If you’re wondering how to make a WordPress tag list with their respective counts when you’re outside of the loop, then you’ve come to the right place. I came upon this issue when I was building the sidebar navigation for this site. Generally speaking, I couldn’t find much information on the subject so I had to resort to my own solution. After scouring the WordPress codex for relevant and usable functions I was able to figure out a method that worked for me.

The Plan

1. Get all the tags WordPress has stored.
2. Associate the tags with their respective counts.
3. Sort the tags by alphabetical order.
4. Print out the list.

Get all the tags WordPress has stored.

I couldn’t find any WordPress functions that returned all of the tags that WordPress stored so I had to find some way of extracting that information directly from the WordPress database. After a little snooping around my local PHPMyAdmin panel, along with some light reading on the subject of WordPress terms and taxonomy, I found out where all the tags were being stored. If you take a look inside the wp_term_taxonomy table you’ll find a field called “taxonomy” where WordPress stores the names of the types of terms being stored. Of all the names stored, “post_tag” is obviously the one we want.

The wonderful thing about WordPress is that it makes querying the database much easier with its $wpdb class which is stored in a global variable. If you aren’t familiar with this class you should really check out the documentation when you get the chance. You’ll definitely find it a necessity if you should ever get around to programming your own plugins. For our purposes, we’ll be requiring the class to help us extract information from the database. Here is the our database query using the $wpdb class.

// Get the tags
global $wpdb;
$query = “SELECT * FROM wp_term_taxonomy WHERE taxonomy=’post_tag’;”;
$rows = $wpdb->get_results($query);

The first thing to remember to do is the globalize the $wpdb variable so that we can properly utilize it. Just to make things spaced out and clear we store our query string into the $query variable. Then we use the get_results() function found within the $wpdb class to perform our query. As you can see, the results are stored as an object into the $rows variable. Again, if you’re curious to see what values are stored in that object check out the documentation.

Associate the tags with their respective counts.

Now that we have a collection of post_tag information, we can now go through each one and extract a term_id which we’ll need in order to get the string value of the tag, the number of posts associated with the tag, and the tag’s permalink. With the help of WordPress’s get_term() and get_tag_link() functions we’ll be able to this. But before we get into a loop to iterate through our $rows object, we first have to create an array where we’ll store this information into a variable, which we’ll call $tag_list.

// Associate tags with counts
$tag_list = array();
if($wpdb->num_rows>0){
foreach($rows as $row){
$term = get_term((int)$row->term_id,‘post_tag’);
array_push($tag_list,array(
‘name’ => $term->name,
‘count’ => $row->count,
‘link’ => get_tag_link((int)$row->term_id)
));
}
}

The get_term() function takes two arguments: the term_id and taxonomy name. The object that gets returned has a property called “name” which we use to get the string representation of the tag. The number of posts associated with the tag can be found in the “count” property of each $row object. Finally, to get the tag’s permalink we use the get_tag_link() function, which takes in a term id value. We store all this information into an associative array which, in turn, gets added to the $tag_list array.

Sort the tags by alphabetical order.

Now that we’ve neatly collected the required information about our tags, we need to sort the $tag_list array in alphabetical order. To do so we first need to set up a comparative function that will sort our multi-dimensional array according to its children’s “name” element. (Remember that we stored a “name”, “count”, and “link” element into each child array.) Below is the comparative function we’ll be using, which should be placed into the functions.php file.

// Comparative function – alphabetical
function compare_alphabetical($a,$b){
if($a["name"]==$b["name"]){
return 0;
} else if($a["name"]>$b["name"]){
return 1;
} else {
return -1;
}
}

I’m still not knowledgeable enough to know exactly how sorting functions work but by just looking at the code you can get a gist of what’s going on. Notice that two arguments are being passed into the function, which represent two elements from the array we’re sorting. Instead of comparing the value of the elements, which are arrays, we compare the value of their “name” element. Depending on the conditions we return a -1, 0, or 1, which is a requirement of all sorting functions. Note that by switching $a and $b around, we can reverse the result of the final sort.

Moving on, we can now properly sort our $tag_list array with the following code:

// Sort by alphabetical order
usort($tag_list,“compare_alphabetical”);

Print out the list.

Once we’ve sorted our list of tags, we can finally write out our list in HTML. The following is the complete version of our code.


<ul>
<?php

</ul>


We begin in HTML by opening an unordered list element. Immediately after, we place the code we’ve been working on from the beginning. You’ll notice the final piece of code we added is a loop that iterates through our neatly sorted $tag_list array. Within each loop we add a list item element which holds an anchor link. By accessing the $tag array we can furnish our HTML appropriately as needed. We end by exiting PHP and closing up our unordered list.

Closing

There you have it! A WordPress tag list, with their post counts, created outside of the loop. I suppose you could use the same principles to get a list of categories as well if you wanted to do something fancy with that information. In any case, I hope that you found this tutorial helpful and informative. As always, your questions or comments are always welcome below. Until next post, happy tag-listing!

Introduction

So I am now officially on the HTML 5 band wagon. After poring over some forums and articles on video integration with HTML 5, I couldn’t help but feel inspired to learn more about this new hope for web development. Along my web travels I happened to stumble upon Mozilla’s HTML 5 demos, which I found HERE, and I was simply blown away. It was pretty much like interacting with a Flash movie but without the Flash!

But enough with the “oohs” and “ahhs” about HTML 5. Let’s get on to why we’re here in the first place, which is HTML 5 video. While HTML 5 still has a long way to go before being completely supported and in wide use, there are still some features of the HTML 5 specification that are currently being implemented. Video is one of these features that’s slowly creeping its way into today’s websites. The truly wonderful trait of HTML 5 is its cross-platform compatibility, and more importantly, its compatibility with mobile devices. No longer will certain phones be kept out of the loop when it comes to watching videos on your website!

Though this new specification provides us with a way to distribute our videos to almost everyone with an internet connection, the fact of the matter is is that HTML 5 support is still taking its first baby steps. Ultimately, this means that while we can still integrate video into our pages we still need to handle the situations where HTML 5 isn’t supported. But fear not, in this tutorial we solve this problem and ensure that our content gets to the user, one way or another!

HTML 5 Video Player In Action

Before we dive into the code here’s a preview of what this tutorial is all about.

 

 

 

 

 

 

 

00:00/00:00

 

 

 

00:00

 

 

 
You won’t know this until you’ve tested this out on other browsers, but there are actually three different source videos queued up to ensure that the content gets served no matter what browser or platform you’re using. Granted, it won’t reach 100% of you, but it will certainly get pretty close.

You’ll also notice that the video player looks the same across all the browsers. This is one of the nice perks of skinning your own media player. Of course, if you don’t have the time to build a skin on your own you can always find some on the web. Videojs, for example, not only offer a couple of varieties of skins, but also features a convenient code builder that neatly creates video embed code for your own use. If talk of pre-made skins haven’t veered you off this page yet, then read on to learn how you can make your own personal HTML 5 video player.

This first page will outline the basic concept of paginating a multi-page post in WordPress. The second page will show you how to create “Previous” and “Next” links for your own customization purposes, as well as show you how to create the actual permalinks for the anchor tags. So, without further ado, let’s discuss how to paginate a multi-page post in WordPress.

Assessing the situation

Before plunging into anything I usually make a checklist of things that I would need to do in order to pull off whatever it is I’m trying to accomplish. After a few logical deductions I came up with the following list.

1. Check if the post is split up into pages.
2. Define the total amount of pages.
3. If we’re currently in a multi-page post, define what page we’re on.
4. Create links to the other pages.

1 and 2 with one stone!

In WordPress, the way we split posts up into pages is by inserting this code text where we want to split the page.

<--nextpage-->

So, in order to check if the current post has multiple pages, all we need to do is search through the post’s content for any instances of that code. Using the substr_count() function in PHP, we’ll be able to get the total number of occurrences of that code. If you’re inside the Loop, you could use the following code to accomplish this.

$max_pages = substr_count( $post->post_content , '<!--nextpage-->' ) + 1;

Note that we add 1 to the substr_count() result because every time we split the post we’re adding to the total number of pages we began with, which is 1. We store this value into a variable because we’ll be reusing this information later on.

What page are we on?

To determine what the current page is we turn to the wp_query class which carries useful information regarding the requests we make to a WordPress blog. Among its numerous properties and methods is the query_vars array which holds the query variables and their values. Within this array resides the “page” variable if we should happen to be inside of a multi-page post or page. If it’s not set, we can clearly deduce we’re on the first page. Otherwise it would let us know if we’re on page two, or three, and so on.

$page_num = $wp_query->query_vars[ 'page' ];
if( !$page_num ) { $page_num = 1; }

The first line of code stores the value of “page” into a variable. Immediately afterward, we check to see if it’s actually set. If it’s not, then we set our page number variable to 1.

Create the page links.

Now that we have the total number of pages and the current page number we can now make a list of page links. By using a “for” loop we’ll be able to iterate through all the page numbers from one to however many pages there are in the post. See the code below.

for ( $i = 1 ; $i < $max_pages + 1 ; $i++ ) {
echo '<a>' . $i . '</a>' ;
}

Voila! We have now provided a pagination scheme for a multi-page post in WordPress.

That’s it?!?!

Well, that’s the basic gist of how we create pagination. The above example will do fine for most multi-page posts. I don’t imagine how anyone would need any heavy duty post pagination since it would be quite insane to break a single post into anything more than 20 or so pages. However, I could be wrong and there may be some good reasons to do so. And if I am, then that’ll be a topic for another tutorial!

For now, if you’re interested in something a bit more in depth, move on to the next page where we delve into constructing “Previous” and “Next” links. And when you’re done with that we wrap things up with permalink creation and search engine optimization issues regarding multi-page posts.