In one of my early blog designs, my client asked me to replace the “newer entries” and “older entries” links in their home page with arrow images.

As you may already know, putting images as the previous posts link is not a difficult task.

It made me curious however, how the next_posts_link function works, and how customizable it really is.
So for the job I harnessed 2 of my favorite tools – Adobe DreamWeaver and FireFox with FireBug installed.

Let’s see how the diggin’ is done:

FireBug – Inspecting the HTML

  1. Locate the “Older Entries” link (or any variation of it) in the any blog’s homepage.
  2. Scroll down to that link, right click on it and selected “Inspect Element”.
    The “a” tag becomes highlighted.

    Now the key is to find something unique near the “a” tag we can use to search by in the PHP source … the <div class=”navigation”> is a good bet.
    Here you can see the PHP code behind a default WordPress homepage (index.php file).
    I copied lines 28-31 and put it below. looks familiar, right?? the same navigation div, but instead of HTML, we see the PHP behind it.

    3. 

    <?php next_posts_link('« Older Entries')>
    

    <?php previous_posts_link('Newer Entries »')?>

    In line 2 (above) you can see “next_posts_link” – this is the PHP function the creates the “a” tag.

So now we found the PHP surface, let’s dig a little dipper…

DreamWeaver – Detecting the PHP Function

We want to find out what the ‘next_posts_link’ is all about, so we need to search for “function next_posts_link” note

  1. Open your local WordPress site in DreamWeaver (if you don’t have one, check out this post).
  2. Click CTRL + F and select “Entire Current Local Site” from the drop down.dw-search
  3. Type in “function next_posts_link” and click “Find All”.
    You can see that a single search result is found and it’s in wp-includes/link-template.php file.
  4. Double click on the search result, to jump to this function:
    function next_posts_link( $label = 'Next Page »', $max_page = 0 ) {
	echo get_next_posts_link( $label, $max_page );
}
  5. As you can see in line 2 (above), the function ‘get_next_posts_link’ is called, so now let’s search for “function get_next_posts_link”. The search result is displayed below.
    function get_next_posts_link( $label = 'Next Page »', $max_page = 0 ) {
	global $paged, $wp_query;

	if ( !$max_page ) {
		$max_page = $wp_query->max_num_pages;
	}

	if ( !$paged )
		$paged = 1;

	$nextpage = intval($paged) + 1;

	if ( !is_single() && ( empty($paged) || $nextpage <= $max_page) ) {
		$attr = apply_filters( 'next_posts_link_attributes', '' );
		return '';
	}
}

That’s it! we are done digging and found the source to that HTMl ‘a’ tag (line 11).

This is an efficient way to learn how wordpress works, and the fastest way I know to learn some basic php.
Once you get used to it, you can become a wordpress developer a lot faster than you think.

So now what??

Although it may seems the quickest way to customize wordpress, don’t be tempted to change core php, this is not the right way to do it. Check out this post to read about the alternatives.

Topics:   | | | |