How to add a random rotator to your Wordpress theme in 5 steps

Did you ever wonder why you like certain websites and dislike others? Why is it that some websites pull the reader in and make them read more while other website’s bounce rate couldn’t be higher?

Two secrets are the positioning and the choice of information presented on your website. The first impression should please the visitor. It should at least give hints on what value can be gained from your site. The second look should excite the user.

But how exactly do you present the variety of content on the front page?
A lot of websites teaser there information in little boxes all across the home page template of their Wordpress theme. You might find boxes pulling the latest posts of specific categories. Other pages might show testimonials as a random rotator. With a little creativity you can come up with astonishing results using the technique explained below.

There is an easy way to accomplish all of that in Wordpress. And please remember – simplicity rules!

How to create a random testimonial rotator in Wordpress

In this example let’s assume that we want to show a random testimonial in our sidebar. There are 5 steps we need to take to accomplish the desired result. Let’s get at it right now…

1. Create a category for your testimonials

The first thing we need to do is to create a category for our testimonials. That way we can later on specify that we only want posts of that category to actually show up in our sidebar. So log in to the Wordpress admin panel and navigate to Posts>Categories. Create a new category and name it so that you easily remember what that category is for. For this example I’ll use name the name Testimonials.

2. Create your posts (testimonials)

Create two new entries just like you normally would. I use the testimonials name as a title and the feedback I got as the content of that post. But you can use whatever fits into your setup. You should create at least two posts right now. It would still be working with only one post but you couldn’t test the random rotator feature without the second entry.

3. Assign the posts to your new category

Before you save your posts select the category we created in step 1.

Now when you save the posts you have created testimonial entries with your clients name and their feedback. You have assigned those entries to the right category. The next step is to make that post show up in your sidebar (but it also works the same way for your footer and almost any other position).

So now let’s get to that…

For the testimonial to show up in the sidebar we need to modify the sidebar template to pull the information from the Wordpress database. In most cases your sidebar template will be called sidebar.php.

Open your theme’s sidebar.php file. My default sidebar code looks like this:

That sidebar is widget ready. The only thing to notice about that code is this line:

I, by default, like to keep options open to use more than one sidebar for my themes. In this case I’d be pulling sidebar number one. That sidebar will also be your default sidebar if you only have one. There is no need to change that code.

4. Add the code to pull your testimonials to your sidebar.php file

Now let’s add a little code to your sidebar to query your database for your testimonials. We add a list element to your sidebar’s main <ul> list. That way your testimonial will be included into the list of widgets you place in your sidebar. In my example you can place the testimonial above all other widgets or below them. Let’s choose the second option for now and add the testimonial rotator at the bottom of the sidebar.

This is what your updated sidebar file should look like now:

You will notice that we added a loop to the sidebar.

The above line of code queries your Wordpress database for all posts assigned to the category with the ID 3 (in this example 3 is the ID Wordpress assigned to the testimonial category – it might be different for you. I’ll explain how to find the category ID a bit later.)

But that line also takes care of more.

cat=3 defines that category we want to display in the sidebar
showposts=1 defines how many testimonials (posts) we’d like to display
orderby=rand makes Wordpress display a randomly picked post each time your website is reloaded. Of course that will only work if you have more than one post in the category you used for the rotator.

The loop

Those two lines build the loop for our rotator. In that loop we display the content (your clients feedback) and the title (your clients name). We use these lines to display the actual post content:

I placed the title in <b></b> to make it bold.

In a lot of themes the sidebar will be to the left of the main content area of your website. The main content area is where you have the loop pulling your pages or blogposts’ content. The rotator would most likely corrupt your main loop. That issue can be solved by simply adding another line of code to the rotator. After displaying the random testimonial we reset the testimonial loop using:

5. Upload your edited files

All left to do now is uploading the edited sidebar.php file to your server. You might have to refresh your browsers cache once. After that your new rotator will be in place.

Do you need to style your testimonial rotator to stick out more?

To have your random rotator stick out more you can style it by assigning classes and ids to it. You need to define those in your theme’s CSS stylesheet (style.css in your themes folder).

To illustrate how easily you can style the rotator why not put it into a box. Here is how you can accomplish that. Simply put the loop in an additional DIV that will function as our box.

Add that DIV to your sidebar.php file. Then open style.css to create the new id we use for that DIV. As you see I like to use names that are intuitive and that I can easily remember. That makes it so much easier to edit your themes code even after month.

This is an example for the css to add to your stylesheet:

Keep in mind that this is only an example. You need to fit that CSS class into your theme to work properly.

How to find your category ID in Wordpress

To be able to set the rotator to query the right category you need to know your categories ID. There are at two easy ways to find that ID in Wordpress. You can have a plugin installed showing the IDs in your admin panel or you can simply look at the variables passed with your browsers URL. That will give you the ID without having to install any plugin.

Find your Wordpress category ID using the browser URL

In the admin panel navigation to Posts. You’ll get a list of all your posts within all categories sorted by date. Wordpress gives you the possibility to filter your posts to only show entries of a specific category. To accomplish that Wordpress passes variables to the scripts. One of those is the ID of the category you selected. Lets choose the Testimonial category and click the filter button.

We are not so interested in the result of that filter process but have a look at the URL in your browser now. It should look like this:

Also see this screenshot (click to enlarge):

I marked the ID in red.

Use a plugin to display IDs in your Wordpress admin panel

The solution presented above is the fastest way to get your categories ID. I tend to work with IDs a lot. Therefore I installed a plugin named Reveal IDs for WP Admin. This plugin will not only show you all your categories IDs. You will also see your post IDs, your page IDs and so on. This is information that can be very useful to customize your theme to your needs.

Now we are done! You just added a random rotator to your Wordpress sidebar in 5 steps. As mentioned before you do not need to limit the use of this technique to your sidebar. You can use it to display information in your header, the sidebars as well as in your websites footer. You don’t even have to limit yourself to one information box. You can display a variety of content. I use the same code to display “Posts you should read” in my websites header. Don’t overdo it. Make sure you use this feature to add to your website not to distract from your content.

Do you have further questions about how to add such a rotator to your blog or website? Use the comment feature to post your question here on my website. I’ll try to answer asap and your question will also help others with their problem.