Pagination? How?

Unfortunately, changing the posts per page option under your WordPress reading settings does not automatically create pagination; rather, you have two options:

1. Use WordPress’ in-built functions (posts_nav_link, previous_posts_link and/or next_posts_link) to allow the user to navigate between pages.
2. Create your own pagination system.

The main problem with the first option is that WordPress only allows the user to go to the next or previous page; there is no way to jump a set of pages without having to visit everything in-between. Consequently, the bottleneck is in the user-experience.

With the second option, the burden is on the developer. Even though it requires more coding, the user experience is not compromised. As a result, today’s article will focus on how to write your own custom WordPress pagination system. To view a demo, see Lateral Code’s pagination.

Specifications

Before we begin coding, let’s lay out our specifications. Our pagination system will ensure that the user can visit the first and last page. It will also provide links to pages within a certain range of the current page. We will call this the scope.

For example, if we have twenty pages, our scope is set to two, and the user is currently on page 5, our pagination would look like this:

1	...	3	4	5	6	7	...	20

Note that the ellipses (…) are just used as visual indicators of a jump in page number.

Since three, four, six, and seven are two of less numbers away from five, they are displayed. In like manner, if we had our scope to set to one, the pagination would be:

1	...	4	5	6	...	20

In this example, three and seven are removed because their range from our current page number, five, is two. This is greater than the scope of one.

Although this system seems to work, what if the scope is two and the current page number is one? No previous page exists to link to. As a result, we can just add more pages to the other side:

1	2	3	4	5	...	20

Since we missed two pages to the left of one, we added them to the right. That’s why pages four and five are visible. Using the same principal, if our current page is twenty, the pagination would be:

1	...	16	17	18	19	20

In this case, the pages are added to the left since they can’t be placed to the right.

Code

Now that our specification is complete, let’s begin coding. We will create a pagination function in functions.php which will be later used in our index.php template. The scope, or range, will have a default value of two:

function pagination( $scope = 2 )

Our first task is to find the number of pages and the current page:

global $wp, $posts_per_page;

$numPages = (int) ( wp_count_posts()->publish / $posts_per_page );
if( $numPages < = 1 )
	return; // no need for pagination with one page

$queryVars = $wp->query_vars;
$curPage = isset( $queryVars[ 'paged' ] ) ? (int) $queryVars[ 'paged' ] : 1;

wp_count_posts()->publish represents the total number of published posts. $posts_per_page is the posts per page setting under the reading area of the WordPress dashboard. Dividing the former by the latter will give us the number of pages.

To find the current page, we can use the $wp->query_vars array. If the paged key exists, its value will be the page. Otherwise, the user is on page one.

After finding the statistics, we need to create the pagination. Although we know that the first and last page will be included, the middle has yet to be found:

// page bounds
$start = $curPage - $scope;
$end = $curPage + $scope;

// if we can't satisfy the scope (add enough pages) on one side,
// add pages to the other side
if( $start < = 1 ) {
	$end += ( 1 - $start );
	$start = 2;
}
else if( $end >= $numPages ) {
	$start -= ( $end - $numPages );
	$end = $numPages - 1;
}

// limit the start and end to their extreme values
$start = max( $start, 2 );
$end = min( $end, $numPages - 1 );

$start and $end correspond the left-most and right-most page value, respectively. The if block is used to display more pages on one side if they cannot be added to the other, as per the last two examples of the specification. Finally, $start and $end are capped at their boundary values to ensure they are within range.

Now that we have the pages, we can aggregate them into an array:

$pagesToLinkTo = array( 1 );
for( $page = $start; $page < = $end; $page++ )
	$pagesToLinkTo[] = $page;
$pagesToLinkTo[] = $numPages;

Finally, we have to process the array and output list elements corresponding to each page number:

$prevPage = $pagesToLinkTo[0];
foreach( $pagesToLinkTo as $page ) {
	if( $page - $prevPage > 1 ) // skipped a few pages
		echo '<li>...</li>'; // add a spacer

	// echo the link
	echo '<li><a href="' . get_bloginfo( 'home' ) . '/page/' . $page . '">' . $page . '</a></li>';
	$prevPage = $page;
}

The URL of each page is http://example.com/page/number, where http://example.com is the home of the WordPress site and number is the page number. We link to this URL for each page that we output.

To determine whether we need to add ellipses, we compare the current page with the previous page. If the difference is greater than one, we skipped a few pages and have to add the spacer.

Here is the pagination function as a whole:

function pagination( $scope = 2 ) {
   	global $wp, $posts_per_page;

	$numPages = (int) ( wp_count_posts()->publish / $posts_per_page );
	if( $numPages < = 1 )
		return; // no need for pagination

	$queryVars = $wp->query_vars;
	$curPage = isset( $queryVars[ 'paged' ] ) ? (int) $queryVars[ 'paged' ] : 1;

	// page bounds
	$start = $curPage - $scope;
	$end = $curPage + $scope;

	// if we can't satisfy the scope (add enough pages) on one side,
	// add pages to the other side
	if( $start < = 1 ) {
		$end += ( 1 - $start );
		$start = 2;
	}
	else if( $end >= $numPages ) {
		$start -= ( $end - $numPages );
		$end = $numPages - 1;
	}

	// limit the start and end to their extreme values
	$start = max( $start, 2 );
	$end = min( $end, $numPages - 1 );

	$pagesToLinkTo = array( 1 );
	for( $page = $start; $page < = $end; $page++ )
		$pagesToLinkTo[] = $page;
	$pagesToLinkTo[] = $numPages;

	$prevPage = $pagesToLinkTo[0];
	foreach( $pagesToLinkTo as $page ) {
		if( $page - $prevPage > 1 ) // skipped a few pages
		echo '<li>...</li>'; // add a spacer

		// echo the link
		echo '<li><a href="' . get_bloginfo( 'home' ) . '/page/' . $page . '">' . $page . '</a></li>';
		$prevPage = $page;
	}
}

Wrapping Up

To finalize our system, we’ll have to call this function in our index.php template:

<ul id="pagination">
	<?php pagination(); ?>
</ul>

Well, that was easy, eh? Remember to style the pagination in accordance to your site’s design. To view a demo, see the bottom of Lateral Code’s home page.

Thanks for reading!

In the past, one of the best ways to improve speed was to reduce the size and amount of the components of the webpage. More specifics of this are outlined in an older LC article about decreasing page load time.

But when we’ve done all we can to reduce page loading time, we can still optimize further by locating and removing/optimizing bottlenecks in the code.

WordPress pages are all dynamically generated, meaning that they are recreated every time someone opens a page. Dynamically generated pages have many pros and a few cons. One of these cons is that it takes time to generate the page before sending it to the user, whereas static pages are immediately sent.

While many dynamic pages are coded in a way that allows them to be generated very quickly, sometimes blocks of code can take more time than intended or thought. This can lead to webpages taking a very long time to generate. Fortunately, there is a way to identify these blocks by adding small bits of code into WordPress.

WordPress has a function called timer_stop(). What this function does is that it returns the amount of time, in seconds, that has passed between when the server started generating the page to the time that the function was called.

For example, the following code:

<!-- <?php echo timer_stop(); ?> seconds passed. -->

would produce the number of seconds passed in an HTML comment.

timer_stop() can be called as many times as you want in WordPress’s code, which becomes useful for doing the following:

<!-- <?php echo timer_stop(); ?> seconds passed. -->
// Fast block of code
<!-- <?php echo timer_stop(); ?> seconds passed. -->
// Slow block of code
<!-- <?php echo timer_stop(); ?> seconds passed. -->

Let’s say this produced the following numbers: 0.01, 0.05, 0.32.
By matching up the numbers to the positions of the code, I could then determine that the slow block of code took .27 seconds to generate, while the fast block of code took only .04 seconds.

By using this method, you can identify bottlenecks in your WordPress code and remove or optimize them to make page generation faster.

Hope this helps you make your WordPress installation faster.

In this article, we will present 10 great minimalist WordPress themes. Minimalistic designs not only look pleasing, but they also provide visitors with short download times. Because these themes use few distracting images, users can really focus on the content itself.

1. Tlight

2. OmegaX

3. The Buffet Framework

4. Karappo Style

5. MagaTheme

6. Zeeb

7. OpenArk Blog

8. Love The Orange

9. WP Framework

10. JS O3 Lite

Do you know any other great minimalist themes? Post them as a comment below!

If you do not yet have your PSD file 100% completed, that’s no problem. We are willing to wait . Just remember to add a comment or e-mail us as soon as possible. Return back to this post for updates on how many free conversions are left.

There are no free conversions still available.

I couldn’t find any adequate documentation, so I’m putting this here for posterity:

For listing the Subcategories, WordPress has a function wp_list_categories.

This code gets the first-level children of the current Category:

wp_list_categories(array(
		'depth' => 1,
		'child_of' => get_category($cat)->cat_ID);
	));

The function get_posts is curious: if a category is specified, it gets all posts that are filed under that category and all subcategories.

$posts = get_posts(array( 'cat' => get_category($cat)->cat_ID );

To get around this problem, a simple if case can be put into the loop:

foreach( $posts as $post ) {
	$cats = get_the_category($post->ID);
	if ( $cats[0].term_id == get_category($cat)->cat_ID ) {
		echo "<a href=\";" the_permalink(); echo "\">"; the_title(); echo "</a>";
	}
}

Of course, if you have more than one category, you can use a nested foreach:

foreach( $posts as $post ) {
	$in_cat = false;
	$cats = get_the_category($post->ID);
	foreach ( $cats as $cat ) {
		if ( $cat->term_id == get_category($cat)->cat_ID ) {
			$in_cat = true;
			break;
		}
	}
	if ( $in_cat ) {
		echo "<a href=\";" the_permalink(); echo "\">"; the_title(); echo "</a>";
	}
}

And that’s all there is to it.

Unfortunately, WordPress users may have a tough time implementing google adsense without a plugin. For those of you who love to do it yourself, here is a simple way to place adsense on your own WordPress blog.

To accomplish this task easily, we will use PHP Simple HTML DOM Parser. This PHP script enables an easy way of accessing HTML tags and modifying them.

I suggest placing the code created in this tutorial inside the functions.php file of your WordPress theme. It will then be available for use in all of your other WordPress documents.

First, include the parser:

include_once("simple_html_dom.php");

Now we can move on to creating the function add_ga( $content ) which will add Google Adsense code to the given $content variable and return the new string.

The parser requires HTML to work with. Thus, it is necessary to obtain this from the given string:

$content = str_get_html( $content );

Next, let’s find all the paragraph elements inside the given content:

$p = $content->find('p');

For every fifth element, we can append Google Adsense code. Feel free to customize this number, as it all depends on the average length of your paragraphs!

$paragraph_offset = 5; # Customize this for your own needs!
for( $i = 1; $i < = $paragraph_offset * 2 + 1; $i += $paragraph_offset ) {
	if ( isset( $p[$i] ) ) {
		$p[$i]->outertext = $p[$i]->outertext."<div class="adsense">Your Google Adsense Code</div>";
	}
}

Remember to replace Your Google Adsense Code with the code you generate from your own profile. You may style the position of the ads (floated left, right, or center) using the surrounding div element. Furthermore, please take note on how this only displays a max of three ad units, as stated by the Google Adsense Program Policies.

To wrap it all up, don’t forget to return the new content:

return $content;

And that’s it! Here is the final code:

include_once("simple_html_dom.php");

function add_ga( $content ) {
	$content = str_get_html( $content );
	$p = $content->find('p');

	$paragraph_offset = 5; # Customize this for your own needs!
	for( $i = 1; $i < = $paragraph_offset * 2 + 1; $i += $paragraph_offset ) {
		if ( isset( $p[$i] ) ) {
			$p[$i]->outertext = $p[$i]->outertext."<div class="adsense">Your Google Adsense Code</div>";
		}
	}

	return $content;
}

Place the following code in your single.php to use this function:

$content = get_the_content($more_link_text, $stripteaser, $more_file);
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo add_ga( $content );

Thank you for reading!

First, let’s start with a method, flip($content).

function flip($content) {

}

Before we do anything else, we need a look-up table. To save you the trouble of creating one yourself, I have created one for you based on the mappings found at this resource.

$table = array ( '!' => '¡', '"' => '„', '&' => '⅋', '\'' => ',', ',' => '\'', '.' => '˙', '3' => 'Ɛ', '4' => 'ᔭ', '6' => '9', '7' => 'Ɫ', ';' => '؛', '<' => '>', '>' => '<', '?' => '¿', 'A' => '∀', 'B' => '𐐒', 'C' => 'Ↄ', 'D' => '◖', 'E' => 'Ǝ', 'F' => 'Ⅎ', 'G' => '⅁', 'J' => 'ſ', 'K' => '⋊', 'L' => '⅂', 'M' => 'W', 'N' => 'ᴎ', 'P' => 'Ԁ', 'Q' => 'Ό', 'R' => 'ᴚ', 'T' => '⊥', 'U' => '∩', 'V' => 'ᴧ', 'W' => 'M', 'Y' => '⅄', '_' => '‾', 'a' => 'ɐ', 'b' => 'q', 'c' => 'ɔ', 'd' => 'p', 'e' => 'ǝ', 'f' => 'ɟ', 'g' => 'ƃ', 'h' => 'ɥ', 'i' => 'ı', 'j' => 'ɾ', 'k' => 'ʞ', 'l' => 'ʃ', 'm' => 'ɯ', 'n' => 'u', 'p' => 'd', 'q' => 'b', 'r' => 'ɹ', 't' => 'ʇ', 'u' => 'n', 'v' => 'ʌ', 'w' => 'ʍ', 'y' => 'ʎ', );

Please note that this table is not exhaustive, but it should suffice for most sites.

Now that we have the lookup table, we simply need to code the replacement algorithm. The simplest way, of course, would be as follows: 1) Create a new string; 2) Loop through the original string; 3) If a replacement exists, append the replacement to the new string, and if not, append the original. Here it is:

function flip($content) {
	# Lookup table goes here, omitted because of length

	$new = '';

	$len = strlen($content);
	for ( $i = 0; $i < $len; $i++ ) {
		if ( $table[$content[$i]] != '' )
			$new .= $table[$content[$i]];
		else
			$new .= $content[$i];
	}
}

However, there are two cases we would want to check for: escaped symbols, like &, and tags, like <p>. Two sub-cases of the tag case are <script> and <style> tags. While it is fine to flip the contents of other tags, flipping the contents of these two tags can bring about undesired results.

To do this, we would add a simple (nested) if/else.

You can replace the existing for-loop with this one:

for ( $i = 0; $i < $len; $i++ ) {
	// Tag case
	if ( $content[$i] == '<' ) {
		$start = $i;
		// <script> subcase
		if ( substr($content, $i + 1, 6 ) == 'script' ) {
			while ( substr($content, $i, 9 ) != '</script>' )
				$i++;
			$i += 8;
		}
		// <style> subcase
		else if ( substr($content, $i + 1, 5 ) == 'style' ) {
			while ( substr($content, $i, 8 ) != '</style>' )
				$i++;
			$i += 7;
		}
		// Base subcase
		else {
			while ( $content[$i] != '>' )
				$i++;
		}
		$new .= substr($content, $start, $i - $start + 1);
	}
	// Escaped char case
	else if ( $content[$i] == '&' ) {
		$start = $i;
		while ( $content[$i] != ';' )
			$i++;
		$substr = substr($content, $start, $i - $start + 1);
		if ( $table[$substr] != '' )
			$new .= $table[$substr];
		else
			$new .= $substr;
	}
	// Base case
	else {
		if ( $table[$content[$i]] != '' )
			$new .= $table[$content[$i]];
		else
			$new .= $content[$i];
	}
}

To make the magic happen in WordPress, you’ll need to modify your theme files. Find your functions.php file and place the flip($content) function into it.

After the function, add this line:

add_filter( 'the_content', 'flip' );

or, if you want to keep this to April 1st only, just put a check:

if ( date('md') == '0401' )
	add_filter( 'the_content, 'flip' );

And that’s it. Have fun flipping your text.

To help all of those who are beginning their own blog, here are 5 WordPress Installation Tips that I always use.

1. Set your blog title and tagline

   This is one of the most important things to do straight off the bat. Without giving your blog a fitting title and description, users will be unable to understand your site’s content. For example, Lateral Code uses:

   Blog Title: Lateral Code
   Tagline: A Blog Focused on Code and Technology

   To set these two features, go to the Administration Panel and click on Settings in the sidebar.

   Choose wisely!

2. Find a fitting theme for your blog

If you have a site with a design that you hate, will you really want to blog on it? A beautiful site that portray’s your site’s content in a professional manner is imperative for a successful blog.

Look through the wordpress themes database for some pre-created themes or make one yourself. A fully created, original theme will have an inherent satisfaction factor. Set a new theme by uploading it to your server and going to Appearance under the Administration Panel.

When picking a theme, remember some basic rules:

• Your blog title should be clearly displayed.
• The content should be easily readable. Do not resort to a small font. Not everyone has perfect eyesight.
• Links should be easily distinguishable from content
• Have some breathing space. Not many people love to view a cluttered website.
• The latest post should be clearly visible when the theme loads.
• Make sure the RSS subscription button can be easily accessed and found. RSS is a key way to keep visitors devoted to your site.

If a theme you really love lacks one of these guidelines, don’t be discouraged. You can customize the theme to meet your needs. By changing the CSS or adding a few elements, most of the guidelines can easily be met. Don’t be afraid to ask for help. If you don’t have anyone to go to, you can ask us through our contact page.

3. Customize your permalink and user settings

   The default WordPress permalink structure is not very friendly. Would you rather have a link that like this:

   http://www.lateralcode.com/?p=31

   or:

   http://www.lateralcode.com/2009/03/5-wordpress-installation-tips

   The latter version benefits both the user and search-engine. It is very simple for the user to remember such a link. Search engines also like this form: containing your title inside the URL is known as a ‘friendly’ URL. You can change the permalink structure by going to the Settings → Permalinks.

   User options are a nice way to express yourself as the author of a post and set contact info to obtain the latest updates to your blog.

   You may set name, contact information, color scheme, and more at Users → Your Profile.

4. Change the default sidebar

   A regular WordPress sidebar contains a blogroll with 7 links to wordpress.org. As much as you and I love this blogging system, doesn’t this seem like overkill?

   Take time to add and remove widgets from your sidebar. Make it nice for the user and search engine. Provide links to archives, and tags. Navigation defines what posts users can find.

   Many people love to place a calendar on their blog’s sidebar. I feel that this is completely unnecessary. Search engines will see this calendar on every single page of your site. When their spiders look through your content, much of the resulting info will be numbers.

   Some argue that calendars are great for users. Let’s think about this logically. The user is at a computer. Most or all computers have a time and date setting build in. He/she already knows this information. Thus, I recommend staying away from this widget.

   To customize the sidebar, navigate to Appearance → Widgets.

5. Use the wide range of plugins available

   Before writing an article for a new blog, I add in some of the most popular WordPress plugins.

   I love the All In One SEO Pack. It gives my pages nice titles and provides default descriptions. These titles are displayed on search results. Those that clearly express the content in articles and leave out the unnecessary items are perfect for search engines.

   You may find more of my recommended plugins in my previous article: 5 Great WordPress Plugins.

   Please remember that most plugins are absolutely free. Do not hesitate to use them. They can really help provide everyone a better experience while viewing your site!

   To install a plugin, upload it and visit the Plugins section of your Administration Panel.

Good luck!

Easy View - A Free WordPress Theme

You may view a demo of the theme or download the files.

Enjoy!

1. Google XML Sitemaps

   Search Engines play a large role in the amount of traffic your site obtains. Google, one of the main search engines, enables the use of Sitemaps, or a list of links that pertain to a site. There are many benefits for using Sitemaps:

   • Faster crawling/indexing of your site in Google
   • Ability to index pages that are never linked to internally/externally. Google can only find pages on your site by following links. If you provide a Sitemap, their crawler is able to find pages that are not linked to, but are listed in your sitemap.
   • Prioritizing content becomes possible. If some of your pages are very important to your site, it would be preferable for Google to visit/update them more often. This is where priority becomes important.

   Google XML Sitemaps automates this whole process for you. All you need to do is provide some information about your prioritizing needs and other options. We personally love this plugin and use it on our site.

2. Google Analytics for WordPress

   Getting information about visitors is always vital. Whether it is the number of visits, what pages are visited, or incoming links, webmasters should have easy access to this information.

   Google Analytics is one of the best systems used for tracking this information. Most everything you could ask for is clearly available when using this system.

   In order to use this plugin, you must sign up for a Google Analytics account (which is free) and then type the given account number under ‘Settings’ of the admin panel.

3. WP-PageNavi

   Having too many posts on your home page can be a pain for your visitors. The large loading time and excess content can scare away potential viewers. In order to counter this problem, many webmasters use pagination.

   Pagination is the splitting of content into multiple pages to enable fast loading times and easy access. This plugin automates the process of paginating your home page depending on given preferences.

   In order to use this plugin, please refer to the usage information found here. You can see an example of this pagination by scrolling to the bottom of the Lateral Code homepage.

4. Akismet

   Akismet is one of the most useful plugins you will ever find. Have you ever obtained comments on your blog that seem to be spam? Your admin panel may even be filled with these types of comments.

   Luckily, Akismet resolves all of this with ease. It finds these spam comments and eliminates them. If you ever want to override the decision of this plugin, you can go into the ‘spam’ area of your comments list.

   We highly recommend using this plugin as soon as you start blogging. In order to enable Akismet, you must sign up for a WordPress.com account and enter in the API key given.

5. WP-reCAPTCHA

   Here is another anti-spam plugin for extra protection. WP-reCAPTCHA uses an ingenious method to produce CAPTCHA images that are hard to bypass.

   CAPTCHA images are those distorted words that users must type in so that a site knows that a human is using it’s services. This plugin is mainly used as an anti-spam mechanism and works wonders.

   In order to use this, you must sign up for a reCAPTCHA account and enter the given key in designated area under the admin panel.

Enjoy!