alex sysoef

WordPress Guide – Customizing WordPress Theme Part 3

In last and final part of Customizing WordPress Theme Guide I want to provide details on how to take advantage of your Sidebar even more, while using less of valuable real estate.

Taking advantage of Javascript Domtab technology we will create a tabbed sidebar section exposing your best and most popular content much like Darren at Problogger does but I will make it simple enough that even a brain dead can follow and implement.

But before I begin describing HOW we will accomplish the task I want to present the example of what you will get. You can see the exact code implemented on my sidebar and in image below:

tabs.jpg

And here is explanation of 4 tabs you will create:

  1. Most Recent - List of 10 most recent articles on your blog
  2. All Time – List of 10 post ALL Time popular on your blog
  3. One Month – List of 10 Most Popular articles in one month. This list will vary based on where on your blog it is accessed as it uses dynamic values to get Value of the month. So if your last post on index page is dated February – you will get list of 10 most popular articles in February, if someone is browsing older archives – they will get a list of most popular articles for that month.
  4. Your Favs – List of 10 or however many posts you decide to add that you personally create and edit. Use this section to highlight content you want to be exposed.

Requirements:

In order for this tutorial to work – you will need to have 2 things in place:

  • Popularity Contest – you must have installed and activated latest version of this plugin by Alex King
  • Domtab Script – download latest version, this tutorial created using 3.1415927. Just get it to your desktop and I’ll explain how we will use it.

Once you have installed and activated Popularity Contest plugin and downloaded and extracted to your local drive you are ready to move into next stage…

Installation Of The Domtab Script

Once Domtab script is extracted into its folder on your hard drive (desktop in my case) I need you to go inside the folder and create a NEW file: bestof.php

See image below, I pointed to 2 files: bestof.php you have just created and domtab.js that came with the script:

domtab.jpg

Your bestof.php file is empty at this point but don’t worry, we will fill it in with some useful stuff soon Smile.

In next step I want you to upload 2 files pointed above to your blog’s theme folder. Once again I outline the what and where in image below

uploaddomtab.jpg

And here is what I point in image:

  1. Location of the files on your local drive
  2. 2 files you need to upload to your theme folder
  3. Your theme folder on your host
  4. Files already uploaded into your theme root folder

Once your files are uploaded into the theme folder you will need to call the domtab.js from within your theme to activate it and be able to use it. We will do it by inserting a small piece of code from header.php file.

Go to Admin->Presentation->Theme Editor and open header.php for editing. Insert this code right before the </head> closing tag:

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/domtab.js"></script>

activatedomtab.jpg

Make sure to type code into text editor and not simply copy/paste as it WILL NOT work properly.

Style Your Future Tabs

Before we do anything else we need to add some styling to our theme to be able to handle the new tabbed content properly. I’m not a theme designer so I have borrowed the code from WPDesigner and simply adopted it to my theme:

/* Best Of Integration */
#sidebar ul.domtabs{
float: left;
width: 384px;
list-style-type: none;
margin: 0;
padding: 0px;
background: #fcfcfc;
border-bottom: 1px solid #eee;
font-family: “Trebuchet MS”, Verdana, Arial, Helvetica;
clear: both;
}
#sidebar ul.domtabs li{
float: left;
display: inline;
}
#sidebar ul.domtabs li a{
display: block;
padding: 10px;
border-right: 1px solid #eee;
text-decoration: none;
color: #F25805;
font-weight: bold;
font-size: 1.2em;
background: #fcfcfc;
}
#sidebar ul.domtabs li a:hover{
text-decoration: underline;
color: #0D6AA6;
}
#sidebar ul.domtabs li.active a{
background: #fff;
}

As you can see in example above I had to add #sidebar statement to style due to the tabs going into that specific section of my theme. You can find original code on WPDesigner and adopt it to your theme. Sorry, I have no way of knowing what your theme requirement will be so you will just have to experiment, please don’t ask for support here as once again – I’m no designer…

Add Content To You “Best Of” File

Now we are ready to add content to the bestof.php file we have uploaded to our theme. Simply navigate to Admin->Presentation->Theme Editor and open bestof.php for editing.

Download this text file, add its contents to the bestof.php file and save it. You will need to edit it to your liking before saving and I pointed out section below you need to edit:

bestof.jpg

Simply replace “#” with your URL and Link 1 with Name of Article. Copy entire line and add below first line and edit accordingly for more links. Simple huh? Cool

Showing Your Creation To The World

The time is here to show your newly created Tabbed Content to the world… and possibly work out any kinks you encounter. This is done by inserting your new file into sidebar using include statement we have learned to use in Part 2 of this tutorial. Do remember it needs to be done outside of The Loop as I have described in previous tutorial:

<?php include (TEMPLATEPATH . ‘/bestof.php’); ?>

Code above will tell your sidebar template to include your new file into the rendering. Once again I can’t provide details on where that code needs to go due to many differences in configuration but here is example of where I put it:

addtosidebra.jpg

Now that concludes the tutorial but with much more coming I suggest you subscribe to my RSS and would appreciate a social plug.

Tags: , , , , , , , ,

About The Blog Author

Alex Sysoef is an IT Consultant, Internet Marketer and ProBlogger who shares his passion and knowledge of WordPress, SEO, Social Media and traffic strategies on his blog WordPress Howto Spotter. Connect on Twitter or Facebook

20 Responses to “WordPress Guide – Customizing WordPress Theme Part 3”

Trackbacks/Pingbacks

Leave a Reply

Comment Guidelines: All your links are DoFollow links. No Keywords In Name. No inappropriate or offensive comments. No links to inappropriate or offensive sites. Comments must contribute to the discussion. ALL SPAM DELETED!

Comments Manually Approved prior to appearing!

CommentLuv badge

Notify me of followup comments via e-mail. You can also subscribe without commenting.