Setup

Get the plugin and install it. The setup wizard will guide you through adding languages. You can add or remove languages later as well.

The Languages Wizard

Next step is to add a language switcher, which allows your visitors to toggle between different languages. WPML provides two built-in options for language switcher and also makes it possible for web developers to create their own custom language switchers.

The built in language switchers are:

• Language switcher widget (either a drop-down or open list of languages).
• A footer language switcher, as a horizontal list of languages.

Lastly, go to WPML->Languages to choose which language selectors to enable and style them.

Translating

To translate contents, go to either the list of posts/pages or edit individual posts and pages. In the list, you’ll see ‘+’ and ‘edit’ icons below each language. Click on the ‘+’ icon to add new translation or on the ‘edit’ icon to edit existing translations.

The Pages List

In the edit screens you’ll see similar translation controls, which allows you to add or edit translations while editing contents.

Editing a single post

Here are some good practices for creating solid multilingual sites:

1. Make sure that texts and links are translatable.

The following code snippet won’t be translated automatically:

<a href='<?php get_option(home)?>/support/'>Support</a>

Instead, you need to modify that snippet to use gettext (more info here) and look like this:

<a href='<?php get_permalink($page_id)?>'><?php _e('Support',THEME) ?></a>

We’re getting the actual permalink for the support page from WordPress and getting localizable anchor text. WPML will return the correct permalink of the support page for the display language, so the support link will display and link correctly.

2. Avoid using images as text

Some times, folks use images that have texts. These will make maintaining multilingual sites much harder as the translated images will have to be generated manually for each language. Whenever possible, you should use images as background and place text, as normal text, on top of them.

3. Assume texts can be larger or shorter

When you’re designing the site layout, take into account that texts in different languages has different length. For instance, compared to English, German can be 150% larger and Chinese 50% shorter. Make sure that page layout adjusts well. Elements such as graphics buttons, headings and sidebar should display correctly regardless of the length of the text.

What we want to show you in this tutorial is the best ways to customize your theme, so that updating your theme will be as painless as possible, and you are more in control of your customizations. There are two ways of doing this based on how much customization you want to do.

Option 1 – Custom.css: Only stylesheet changes

If you only plan on doing small modifications to the stylesheet or CSS, then the best option is to use the included custom.css file in the theme folder. Simply copy the CSS you want to change from style.css (or alt. stylesheets in /styles/*.css folder) in to the custom.css file, and edit it from there. This will effectively overwrite the style in style.css as the custom.css stylesheet is loaded after style.css on page load.

Example: Editing custom.css

Lets do an easy example where we use FireBug to find the navigation link color in the Object theme. We inspect the element by clicking on it with FireBug enabled, and it will show us what the style for the nav element is called.

FireBug shows us which style to change

We see in the screenshot above that the style for the link color in the navigation and that we can find it on line 41 and 42 in style.css. We open style.css and copy this out:

.nav a{color:#767676;display:block;line-height:33px;z-index:100;padding:0 10px;}
.nav a:hover{color:#b939d3;}

Then we paste this into custom.css, we want to change the color so to red (#ff0000), and the hover color to black (#000000). We also remove the other styles which we won’t be changing so it ends up looking like this:

.nav a{color:#ff0000;}
.nav a:hover{color:#000000;}

Once you save custom.css and refresh your page you will notice the nav link color is now red, and if you hover over it it will turn black.

Changes after applying styles to custom.css

You can also add new styles to your custom.css stylesheet to supplement those already in the theme. If the theme ever gets updated, remember to not update your custom.css file, as this will then be overwritten. We always recommend backing up your theme before updating to a newer version, and also check out our upgrade tutorial on how to do it.

Option 2 – Using a child theme

The second option is for those who need to modify not only stylesheet changes, as in option 1, but also your template files in addition to CSS. It is a bit harder to grasp at first, but once you get the hang of it, you’ll find that it is way superior compared to modifying your theme directly. We won’t go into details about what a child theme is in this post, as you can read a great explanation on the topic in this tutorial.

To get started we need to prepare a child theme which means you’ll need FTP access to your host, so you can upload the new child theme. If you don’t have this, you should talk to your host so they can give you your FTP login details, and download a FTP program to upload your files.

Making the child theme

First we need to create a new stylesheet for our child theme. Create a new file called style.css and put this code in it:

/*
Theme Name: Child WooTheme
Version: 1.0
Description: Child theme for WooThemes.
Author: WooThemes
Author URI: http://www.woothemes.com
Template: themedir
*/
 
@import url("../themedir/style.css");

Next we need to change the Template field to point to our installed WooTheme. In this example we’ll use Object theme, which is installed under “wp-content/themes/object/“. We also need to change the imported style.css directory to point to Object. The result will look like this:

/*
Theme Name: Object Child
Version: 1.0
Description: Child theme for Object.
Author: WooThemes
Author URI: http://www.woothemes.com
Template: object
*/
 
@import url("../object/style.css");

We’ve now got all we need to create a child theme. The next step is to upload this file to a new folder e.g. “wp-content/themes/object-child/”. Once uploaded, we can go to our WP admin panel and activate the child theme:

Activate the new child theme

Your child theme is now ready to be modified. Currently it doesn’t hold any customization, so lets look at a couple of examples on how we can customize the childe theme without touching the parent theme.

Example: Edit stylesheet

Lets try the same example as we did before, changing the color of the navigation link in the stylesheet. Simply find the styles like we did in above and paste them into our /object-child/style.css file:

/*
Theme Name: Object Child
Version: 1.0
Description: Child theme for Object.
Author: WooThemes
Author URI: http://www.woothemes.com
Template: object
*/
 
@import url("../object/style.css");
 
.nav a{color:#ff0000;}
.nav a:hover{color:#000000;}

After saving the file, and refreshing our browser you will now see that the link colors should have changed, and if you hover over the style.css link in FireBug, you will see that the path points to the object-child directory.

Styles from child theme applied to parent theme

Example: Editing template files

But wait, there is more! You can do the same with the template files (*.php) in the theme folder. Lets try to remove the top right description. This is located in header.php, so we need to copy header.php from our parent theme folder “wp-content/themes/object/header.php” to our child theme folder “wp-content/themes/object-child/header.php“.

Once we have copied it to our child theme, we edit header.php and find the description code on line 89 and remove it:

        <p id="tagline"><?php bloginfo('description'); ?></p>

Then we upload our changes to our host and refresh our page to check that the changes have been applied

Removing description from header.php in child theme

NOTE! Although you can override template files in your child theme, functions.php will be loaded in both the parent theme and child theme, so you can’t replace the functions already loaded in parent theme functions.php.

TEMPLATEPATH vs. STYLESHEETPATH

WordPress has a few things that it handles differently in child themes. If you have a template file in your child theme, you have to modify how WordPress includes files. TEMPLATEPATH or bloginfo('template_directory') will reference the parent theme. To make it use the file in the child theme, you need to change use STYLESHEETPATH. The same goes for use of template_directory parameter in bloginfo() function, which needs to be changed to stylesheet_directory.

More info on this from the WP Codex

Alternative styles

If you are using an alternative style on your theme, then this will be loaded after the child themes style.css and overwrite your styles. There are two good ways to fix this:

1. Add body in front of your CSS tags so they override the ones in the alt stylesheet e.g. body #header { font-size:14px; }
2. You can unload the function from being outputted in the header by adding a functions.php file to your child theme (if you haven’t already), and adding remove_action('wp_head', 'woothemes_wp_head');.

Child Theme Support

Although we do offer basic child theme support that can easily be answered, it still falls under theme customization, so please refer to our support policy to see the extent of support we give.

We highly advice anybody confused with child themes to use the WordPress forums for help.

All of our themes have a /lang/ folder, which holds all the translated files, called .po (Portable Object File) and .mo (Machine Object File). To activate WP with your language file you need to do the following steps:

1. Copy your .mo language file from the themename/lang/themename-xx_XX.mo (e.g. busybee/lang/busybee-es_ES.mo) to the root of your theme folder, and remove the theme name prefix, so only the language and country code make up the filename, for example

busybee/es_ES.mo

2. Edit your wp-config.php file and add this to it

define ('WPLANG', 'es_ES');

Remember to replace the parameter ‘es_ES’ with your language and country code (or ‘es’ if you only have a language code and no country code).

NOTE: If you only use a language code and no country code in wp-config.php, then simply name your ‘mo’ file with the country code (e.g. busybee/es.mo). The wp-config.php and your filename must be the same.

This is all that is needed to activate your language with your theme.

How to translate a theme from scratch

Background info

WordPress uses a standard localization framework called GNU gettext. This framework provides the programmer the ability to mark text inside code as being suitable for localization. The role of the translator is to take these marked pieces of text and produce a language-specific localization. No code needs to change and you do not need to understand how the program works.

Text is marked by wrapping it with special PHP functions. It is not important to know how these functions work, but it will be helpful to recognize them:

• __($text) – Looks for a translated version of $text and returns the result
• _e($text) – Looks for a translated version of $text and echo the result to the screen (i.e. effectively it is echo __($text))
• __ngettext($single,$plural,$number) – If $number is 1 then looks for a translated version of $single. If number is more than 1 then looks for a translated version of $plural.

(Source: Urban Giraffe)

Translating WooThemes
Putting this into context, it means that all our text in our template files (.php files) have been wrapped in gettext functions. This enables us to create a Portable Object File (or .po file) which contains all the text for the theme. This has already been done by us at WooThemes.

The user (that’s you) then has the ability to use a program (we’ll get back to this later) to translate this .po file into another language, add it to the theme directory, and have a translated theme!

Before we start

Before you can start to translate the theme, you need to make sure that the theme has been made ready for translation. All our new themes will support localization and include a language file (.po file) which contains all the English texts, and soon all our old themes will be upgraded as well.

If you are not certain if your theme has been made ready for translation/localization, you can simply check if there is a “/lang/themename.po” file in your theme folder. If there isn’t one, you will need to download the latest version of the theme and check if the .po file existst there. If it does include a translation file, you will need to upgrade your theme to be able to translate it.

How to translate

To translate your theme, you will need to use Poedit to translate the included Portable Object file (.po file), which will then create a Machine Object file (.mo file) which we will upload to our theme folder for WordPress to read.

Follow these steps to translate your .po file into another language and make a .mo file:

1. Download and install Poedit, the program we will use to translate our .po file.
2. Open the themename.po file found in your /lang/ folder with poedit.
3. Now go through and translate all the text one line at a time in the bottom box.
4. Save the file after you’re done. This will output a .po and .mo file.

Translating the .po file with Poedit

Setup WordPress
Before we can upload our new .mo file, we need to make sure we named it correctly, as it has to match your desired language locale. See the complete list of language codes and country codes to find your exact locale.

We’ll use Norwegian as the example here, so first we find the language code (nb – Norsk Bokmål) and the country code (NO). We than rename our .mo file to nb_NO.mo and upload to the root of our theme folder e.g.

wp-content/themes/themename/nb_NO.mo

The last step is to make sure your WordPress config file, wp-config.php, is setup with your locale, which in this case is Norwegian. So open wp-config.php and check that what you have in your define() function. For Norwegian it will look like this:

define ('WPLANG', 'nb_NO');

Once you have matched the wp-config.php setting to our .mo filename, you should have successfully translated your WooTheme into another language.

Share your language

We want to make it easier for users to get the theme in their language, so if you have translated your theme into your language, we hope you can share the .mo file with us, so new users don’t have to translate the theme themselves.

them

1. Find out which version you have and download
2. Have you modified your existing version with any modifications to the template files (php and css files)?
3. Updating modified template files
4. Updating the WooFramework

Find out which version you have and download

1. Check which version you are running by looking under Apperance -> Themes:

Find your theme version

2. Login to our website and find the changelog for your theme in your dashboard or under the theme documentation:

See the changelog for newest version

3. The next step is to download your theme from your dashboard (where you originally downloaded the theme), by logging in to our website and clicking Account in the top right corner and My Downloads.

Download new theme from your Dashboard

Once you have downloaded and unpacked your theme on your computer, you need to determine which way you want to update your theme based on the following:

Have you modified your existing version with any modifications to the template files (php and css files)?

If the answer to this is NO, then you can simply update your theme by overwriting the existing theme files, although we highly recommend making a backup of your current theme directory (e.g. rename /wp-content/themes/freshnews to wp-content/themes/freshnews-old/), or to install it into a new directory (e.g. /freshnews2).

If the answer is YES, then you will have to make a decision on how to proceed based on how many updates that have been made on the theme. You can check this by looking in the changelog.txt in your theme folder and see all the changes since your theme version which we found above. If there are many changes in files you have modified, then you might be better of just installing the theme to a new directory, and reapplying your customizations.

After you have uploaded your theme, you should make sure it’s activated and then go over the Options Panel and see if there are any new additions that need to be edited.

Updating modified template files

If you have modified your files, and you can see that these files have been updated in the changelog.txt, then you need to inspect exactly what changes have been made so that you can update your existing file to the new version. This is most often described in the comment behind the actual file like this:

*** Fresh News Changelog ***

2009.08.19 - version 2.0.6
  * footer.php - removed tabs.js
  * includes/theme.js - added superfish, tabs
  * includes/js/superfish.js - superfish new file

In this example from Fresh News changelog.txt, we can see that there are 3 files that have been updated. So for updating footer.php you would need to edit yours and remove the line where tabs.js was included before.

You can also use a program to list the differences between your existing file and new file, to see what the changes are, and merge the two, on both PC and Mac.

The Woo Framework

All our themes have now been updated to use the new framework that we have developed. The idea behind this is that all files that run the backend functionality of the theme should be standarized and seperate from the template files, so we can easily update these without touching your customized code.

This is very useful if WordPress releases a new version, where we have to apply a fix to all themes, and do a mass update. If you then have the new version, updating is as simple as updating the functions folder in the theme directory, which holds the framework.

To check which version of the framework you have, simply look in your theme options panel

Framework version

If you still need help with updating your theme, please post a query in our support forum.

Changing your Wordpress Permalink Structure from WooThemes on Vimeo.

Another useful plugin you may want to install on your site is WP-PostRatings. You can get your visitors to rate your posts on a scale of one to five. It provides a wealth of functions you can use to display the stats around your site.

This tutorial is written for the Gotham News theme, however the main part of the tutorial can be completed in most of our other themes too. In this tutorial, we are going to install the plugin and add it to our single post template, and we’re also going to add a section to our sidebar tabs to show the highest rated posts.

Installing the Plugin

You can grab the plugin from is the WordPress.org plugins repository, but if you have 2.7, search for the plugin name in your admin panel and you can install it from there too. When you’ve installed the plugin, head over to the new “Ratings” section of your WordPress admin panel. Click on “Ratings Options”.

Here you can choose what images you want to use for the ratings, and who can rate the posts. Choose an image you like (or stick with the default), and head over to your template folder. Let’s add it to our posts:

Adding the code

Open up single.php in your theme directory. This is the template used to display a single post on your site. We want to add the ratings below the post content, but above the comments.

Let’s find where the content is in the template file, and add the post ratings function after it. Find:

<?php the_content(); ?>

Now after it, add:

<?php if(function_exists('the_ratings')) { the_ratings(); } ?>

Load up any single post on your site and you’ll see that the post ratings form is displayed below it. However, it looks rather out of place with the rest of our content. It would be nice to align it to the right, and to add some padding to the top. As with the WP-PageNavi plugin, you can add a special CSS file to your theme directory, and it will style the plugin. It will stop it from being overwritten when plugin is upgraded.

Lets create a file called postratings-css.css in our theme directory. The entire post ratings section is enclosed in a ‘div’ with the class name ‘post-ratings’. This means we can add the following CSS to the file we just created, and it will style every occurrance of the post ratings section on the site:

.post-ratings {
	text-align: right;
	padding-top: 10px;
}
 
.post-ratings-loading {
	display: none;
	text-align: right;
}

The first portion of the CSS file, ‘.post-ratings’, is styling the main section of the post ratings which includes the stars and the statistics. The second portion of the CSS file, ‘.post-ratings-loading’, is simply the “Loading…” indicator which only appears when a rating is submitted.

Save the file and upload it to your website. You will find that the ratings are now on the right hand side of the page. There’s a lot more you could do to the ratings beyond the scope of this tutorial. However, we’re going to look at adding a “Rated Posts” tab to our sidebar now:

Adding a tab

It’s simple and easy to add a new tab to the tabs in the sidebar. Open sidebar.php and take a look at this section:

<ul class="tabs wrap">
	<li><a href="#comm">Comments</a></li>
	<li><a href="#feat">Featured</a></li>
	<li><a href="#tagcloud">Tags</a></li>
</ul>

Each item in the unordered list is a separate link for the tab. The URLs that the links are pointing to are the sections which each tab shows or hides. We are going to add a new list item to the section, for our Rated Posts tab. So after this:

<li><a href="#tagcloud">Tags</a></li>

add the code for our section:

<li><a href="#rated">Rated</a></li>

If you upload sidebar.php now, you will see there is another tab to our list. However, clicking on it does nothing, as we haven’t added our list yet.

The plugin includes a useful function which will show us the highest rated posts on the site, and we can easily add them to our sidebar. Find this line in the sidebar.php file:

<div class="inside" id="tagcloud">
	<?php wp_tag_cloud('smallest=10&amp;largest=18'); ?>
</div>

This is the code for the “Tags” section. Below it, add the following:

<ul class="inside" id="rated">
	<?php get_highest_rated('post',0,5); ?>
</ul>

This code adds a new section which corresponds to the tab we added earlier. The function get_highest_rated is one which the plugin includes, and we can specify whether we want to show posts or pages, only to show a post after X number of votes, and also the number of posts to show in the tab – for now it’s set at 5 posts, but you can change that if you like.

Upload sidebar.php and check out your site. If you’ve done everything correctly, there will now be an extra tab called “Rated” which shows the highest rated posts along with a link to each of them.

As we’ve demonstrated, it’s easy to add new tabs to your sidebar, and there are tons of useful plugins out there which can add things such as post ratings, pagination and breadcrumbs.

Feedback is appreciated in the comments, along with suggestions for future tutorials. (:

Firebug is a great add-on extension to the popular web browser Firefox. It can help you make CSS changes in real-time and will help you locate where the CSS rules are defined and where in the file they are. It makes it even easier to customise any WooTheme. This tutorial is going to go through the basics of editing a style with Firebug, and then editing the CSS to save the new styling.

Downloading Firebug

You can download Firebug by visiting the Add-ons Repository here. You may need to restart your browser after installing it.

To change a style in Firebug, right click on the area you wish to change and choose the Inspect Element option. The Firebug window will open up at the bottom of the screen, and you can see the HTML of the page on the left, and the CSS of the element you clicked on on the right. You can change any of the CSS and it will automatically update the page so you can see your changes in action. When you’re happy with them, you can add it to your CSS file.

We will be attempting to change the link color of our Gotham News theme, with the default style, to a color of your choice.

Finding the CSS

You’ll need to open Firefox and go to your WordPress installation with Gotham News selected as the theme. Choose the default style for now, you can do the same techniques here to other stylesheets later.

Considering we’re going to change the link colours, right click on any normal link (ie. in a post or page), and choose the Inspect Element option. The Firebug window should open and show you all the CSS styling for the link.

Right click the link and select Inspect Element

Click on the color: attribute and you will find that you can change the colour. Change it to whatever you like, you can visit this site for a colour wheel with the relevant codes. When you change the colour in the Firebug window, it automatically updates on the page, so you will find your links all changing to match the new style.

Click on any value in the CSS edit window

However, these changes are not permanent yet! If you refresh the page, you will find that your changes are lost, because Firebug is only editing on the client side (eg. your web browser) and not on your web server. Let’s go and add those into the stylesheet.

Saving your changes

So, we would like to save our changes to our CSS files. The first step is to find what CSS file our styles are defined in. As in the screenshot, take a look at the right-aligned text above the a element in Firebug. That is the file our styles are in – style.css – and the line number of the styles – line 46.

Find the correct file to edit

You can now download the style.css file from your server and find line 46, and you should find the following there:

a {
	color: #006DAD;
	text-decoration: none;
}

Change it to what you decided on in Firebug, and then upload it to your server. Clear your cache, refresh the page, and voila – your links should all be your new colour.

Finding the correct stylesheet file

The standard file to edit is style.css which is located in the root of your theme folder.

Our themes come with various styles, and you will often find that the CSS points to the specific style (e.g. default.css). You can find these stylesheets under a sub-folder in your theme directory called /styles/ (e.g. wp-content/themes/busybee/styles/default.css).

The location of 1-default.css in Fresh News

You can’t use your WP theme editor to edit these files, as they are in the /styles/ sub-folder. You have to download the file with an FTP client and edit it locally, and then upload it to your server again.

Validation

To make sure that webpages were coded to a certain standard, the W3C released their Validator, and you can check if your site is Valid XHTML. All our themes are valid XHTML out of the box, but be aware that if you’re adding YouTube videos or modifying the theme, you may cause your site to fail the validation. If ever any of your modifications cause problems with browser compatibility, use the validator to check if you’ve coded everything correctly first.

Doing a bit more!

You can use Firebug to make changes to almost anything in your themes. For example, you could use it to change the background image of the header, you could use it to add extra padding around a picture, or change the background colours of the sidebar tabs. Firebug is your CSS buddy when it comes to WordPress!

A short video demonstration

(Please open the article to see the flash file or player.)
Click video to view video

In this video we show you how to find your category and page ID’s, which is useful for setting theme options or for using when you want to exclude or include with wp_list_categories or wp_list_pages in the template files.

The video will show you that you can find your cat/page ID by hovering over the link on the manage categories/page page in WP admin. You will see the link in your browser statusbar like this:

The browser status bar reveals page/cat ID

Both VibrantCMS and Over Easy are themes which turn WordPress into a Content Management System. Using a plugin and some template hacking, we’re going to integrate breadcrumbs into these themes.

First, you’ll need to download and install the Yoast Breadcrumbs plugin, and you can configure it in the Settings menu. It’s quite simple, and gives you a lot of customisation over what is displayed on your site. Time to get into some coding.

Adding the Breadcrumbs

There are quite a few files we will need to modify to add in the breadcrumbs. We will be adding the same lines of code to each of the following files:

• archive.php
• page.php
• single.php
• tag.php

Let’s open archive.php and add the breadcrumbs to that file.

If you are using VibrantCMS, you will need to find this line:

<div id="leftcontent" class="grid_10">

If you are using OverEasy, then you will need to look for this line:

<div class="spacer">

After, add:

<div class="breadcrumbs">
	<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } ?> 
</div>

Upload to your site and view any category or archive page, and you should see the breadcrumbs showing at the top of your page. If not, go back and check that you have done the steps correctly.

Now, you will need to add the breadcrumbs code to the other three files mentioned above. You should add it in the same place as before.

Styling the Breadcrumbs

At this point, the breadcrumbs have no styling at all. However, we have given our code we added a class attribute, and so we can add styling to change the link colours, the font size, positioning, and lots more.

To do this, we will need to change style.css and add the following lines to the end:

/* ---- BREADCRUMBS ---- */
 
.breadcrumbs {
 
}

For example, if we would like to change the size of the text to 12px, we would change the CSS to this:

.breadcrumbs {
	font-size: 12px;
}

You could even add a border to your breadcrumbs:

.breadcrumbs {
	font-size: 12px;
	padding: 3px;
	border: 1px solid #ccccff;
}

You can experiment with CSS styling to completely transform how your breadcrumbs look. The plugin is completely flexible too, and so you can change what text is displayed and where the breadcrumbs are shown.

One common request on our WooThemes Forums is how to integrate the popular WP-PageNavi plugin with one of our themes. Using this quick and simple tutorial, it is really easy.

Installing the Plugin

The first thing you need to do is to grab the latest copy of the plugin from the WordPress.org Plugin Directory , and install it on your site. You can configure how the pages are displayed by going to the ‘Settings’ -> ‘WP-PageNavi’ section of your WordPress Admin Panel, although for this tutorial the defaults should work fine.

For this tutorial, we will be adding the plugin to the category and archive pages. The actual file editing will vary between themes, but the editing will need to be done to the following files, if they exist, inside your theme folder:

• archive.php
• tag.php
• search.php

You will need to find the following code in the files:

<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></div>

and replace it with:

 
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Note: If you have trouble finding the code, you should try to find the block of code where the ‘next_posts_link’ is in your file. It should be very similar to the code above.

Save and upload the files to your blog, you will find pagination automatically generated depending on how many posts you have on your site. If you like the links how they currently appear, then you’re done, but if you’d like to style them a bit, read on!

Styling the Links

The WP-PageNavi plugin comes with the ability to style the navigation links to your liking. The default blue colour, for example, may not suit some designs. Now we are going to look at how we can create custom styles for our links.

First, you will need to create a file named ‘pagenavi-css.css’ in your theme folder. The plugin will automatically look for this, and will load it instead of the default if it is present.

For this example, we are going to style the links brown. First, lets copy the default CSS code from WP-PageNavi into our custom CSS file.

wp-pagenavi a, .wp-pagenavi a:link {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.wp-pagenavi a:visited {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.wp-pagenavi a:hover {
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}
.wp-pagenavi a:active {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.wp-pagenavi span.pages {
padding: 2px 4px 2px 4px;
margin: 2px 2px 2px 2px;
color: #000000;
border: 1px solid #000000;
background-color: #FFFFFF;
}
.wp-pagenavi span.current {
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}
.wp-pagenavi span.extend {
padding: 2px 4px 2px 4px;
margin: 2px;
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}

Don’t let the amount of CSS we’re pasting into the file seem daunting – if you’re good with CSS then you’ll find this a breeze. However if you don’t know CSS much, it’s not a problem. We’re going to change the border colour of the links and I’ll show you what you need to change to do that.

First, let’s have a quick look at what each class means:

• .wp-pagenavi a, .wp-pagenavi a:link: This is the class for what the user sees when the item is not selected – so it’s the default state.
• .wp-pagenavi a:visited This is the class for what the user sees when the page has already been visited, but when the user is on a different page.
• .wp-pagenavi a:hover This is the class for what the user sees when they hover over an item.
• .wp-pagenavi span.pages This is the class for the box which contains the text “Page 1 of X”.
• .wp-pagenavi span.current This is the class for the box which contains the current page. There is no link here.
• .wp-pagenavi span.extend This is the class used for the box found on the far right with ‘…’ (only shown when there is a lot of pages)

The colour we are going to change the border to is ‘#993300′. (If you’d like to use a different colour, head on over to this colour wheel which will pick out the code for you.)

This is the line which we will need to change – the CSS ‘border:’ attribute.

border: 1px solid #0066cc;

The current colour is ‘#0066cc’, but we want to change that to our colour – ‘#993300′. It’s as simple as replacing one with the other. So, it should look like this:

border: 1px solid #993300;

Replace all three occurrances with our updated border code and upload to your server. You should now find your pagination borders brown. You can experiment with this to use background colours and hover states, it’s all up to you!

Before starting the troubleshooter, make sure you followed the documentation which tells you to CHMOD the cache folder.

Table of Contents

1. Finding the problem
2. Cache Folder
3. Path Problems
4. PHP GD Library
5. 404 page not found
6. Issies with WPMU
7. Large image files (PNG)?
8. Still having problems?

1. Finding the problem

Before you start looking for problems you should be aware of these limitations of thumb.php:

• External Images. You can now use external images (in version 1.11), but you need to add the domain in thumb.php for security purposes. Search for “Flickr.com” to see where to add your domain.
• It can’t resize huge files. If your image is very large in megabytes (1-3mb), the resizer will not be able to resize it for you, depending on your hosts capabilities. Always make your images smaller in size before you upload.
• It won’t work on a temporary site. If your site is on a local dns or some other temporary state i.e. not live on your proper domain, the resizer will probably not work until you go live with your site.

Are your thumbnails not showing up? If the image resizer doesn’t work it will just show the post title instead of the image where the image was supposed to be. If you are using a theme with a javascript slider you will not see this, but only the slider trying to load an image.

First thing you should check is the thumbnail URL. It will normally tell you what’s wrong quite easily. Here are a few ways to find the URL to your thumbnail:

• Right-click on your image and open/view it in a new browser tab
• Do a view source on your website and look in your source code for the image URL (search for thumb.php) and paste it into your address bar. This is useful on themes
• Install FireBug and, right-click on the image and select “Inspect Element”. You will then get a window below which will show the source code and you can copy the image url (just click on the http:// part and it will become selected so you can copy)

Once you have the image URL it should look something like this (click this link to see the image being resized)

http://www.woothemes.com/demo/freshnews/wp-content/themes/freshnews/thumb.php?src=http://www.woothemes.com/wp-content/uploads/2008/09/cff5b9107da40103bfe2951e42ee6c51.jpg&h=195&w=540&zc=1&q=95

If your image does not show, you will probably get any of these errors explained below…

2. Cache Folder

One of the most common errors is that the cache/ folder does not have write permissions. If your error message is something along the lines of “Permission denied…” and you can see it referencing you /cache folder, then you probably have not set write permissions to it.

To do this, you will need to “CHMOD” the folder in your FTP client to 777 (or 755 or full write permissions). Check out this tutorial on how to do that. The folder you will need to change the permissions is “/wp-content/themes/yourthemename/cache”. This is the folder where the thumbnail generator stores cached images.

3. Path Problems

If your script is showing a message similar to “/var/www//wp-content/uploads/2008/10/featured.jpg not found.”, then this is your problem. This should not happen with the updated version of TimThumb. If you get a similar message to this, please post in our forum so we can investigate.

4. PHP GD Library

The thumb.php script uses PHP GD Library to resize the images, which is usually included with PHP and should be installed on your web host. Some small web hosts haven’t done this and you will then get a error like “GD Library Error: imagecreatetruecolor does not exist”. You should ask your web host to activate PHP GD or find a better hosting provider, since this should be included and is not a hassle to setup for them.

5. 404 page not found / hosting problems

Some users have experienced that images suddenly stop working. If your image URL (see part 1) is giving you a 404 page, then it could mean that thumb.php doesn’t have permission to run on your server. Contact your host and give them the image link and ask why your thumb.php isn’t allowed to run.

Is your host running Apache 2 or recently upgraded? We know for a fact that Hostgator users have had this, and that is because they upgraded their Apache to version 2, and need to turn of the mod_security setting on your site. Here are details on what to ask Hostgator about. Contact your host if this happens and ask them about the permission on thumb.php.

6. Issues with WPMU (WordPress Multi User)

The latest versions of our themes work out of the box with WPMU. If you have any issues, please make sure you have the latest version of the theme, and post your problem in the forum.

7. Large image files (PNG)?

Get the latest version of TimThumb and replace your thumb.php which resizes to JPG.

8. Still having problems?

If you still can’t get your thumb.php to work, then drop us a line in the forums, where one of our ninjas will be happy to help you resolve the problems.

wp-content/themes/freshnews/cache/

To allow the image resizer to write to this folder, you have to CHMOD the cache folder.

What is CHMOD?

CHMOD means simply setting write permission so the script is able to write to the cache folder. We need to set the permissions to 777 (or 755 depending on your server).

You need to connect via FTP and locate the theme folder mentioned above. You then use your FTP program to set the permissions set permission to 777 on the cache folder.

Tutorials to help you out

• About.com: How to CHMOD from FTP
• Siteground: CHMOD with FTP

FTP programs

If you already have an FTP program installed, search the help file or try to google it (ex. “cuteftp how to chmod”).

• SmartFTP is a free FTP program and it is very easy to CHMOD.
• FireFTP is a free addon to Firefox

If you don’t have the required connection details to connect to your host, you need to ask your hosting provider for the host name, username and password.

Images still not showing?

If you are still having trouble showing the images after doing this, please refer to our Image Resizer Troubleshooter, and then make a new post in our forum if that doesn’t help you solve the problem.

This tutorial will guide you through setting up various types of ads on WooThemes. Some themes may need a little extra tweaking but it shouldn’t be too complex.

In this tutorial you’ll learn:

• How to ad in adsense or flash based ad codes
• How to insert an ad into the header
• How to add in image ads (alternate way) and add more ads to the sidebar

Most themes use 2 or 3 types of ads:

• 300×250 (sidebar)
• 125×125 (top and bottom – in the sidebar)
• 468×60 (currently Gazette only – in the header)

Part 1 – Using flash or adsense ads

Flash and adsense ads can’t be applied via the admin menu but it’s relatively easy to set them up.

1. Make sure you’re using the latest versions of wordpress and of the theme itself
2. All sidebar ads are located in the /ads/ folder.
3. To insert your code, look at the coding examples below:

300×250 – Remove all the coding between the div commands:

<div class="mpu_banner">
 
ADD IN YOU CODE HERE!
 
</div>

125×125 (repeat the same for both the top and bottom ads)

<div class="ads">
 
	ADD IN YOUR CODE HERE!
 
	ADD IN YOUR CODE HERE!
 
</div>

It’s as simple as that!

468×60 – You need to open header.php (this is for Gazette only!)

Find this code located at the bottom of header.php:

<div id="topbanner">
 
			<?php
 
				// Get banner code //
				$banner_img = get_option('woo_banner_image');
				$banner_url = get_option('woo_banner_url');
 
			?>
 
			<a <?php do_action('woo_external_ad_link'); ?> href="<?php echo "$banner_url"; ?>"><img src="<?php echo "$banner_img"; ?>" alt="" /></a>
 
</div>

And simple remove the coding and add in your code as follows:

<div id="topbanner">
 
ADD IN YOUR CODE HERE!
 
</div>

Part 2 – Adding an ad into the header

Let’s say you want to a 728×90 ad in the header:

Simply open up header.php and ad in your code in either the ‘top’ or ‘navigation’ sections. To center, simply place the ad in center commands:

<center> ADD YOU CODE HERE! </center>

This will push down the main navigation, and all you need to do to resolve this is alter the background image. You can read my other tutorial on how to do this here.

You can apply these techniques to any theme

Part 3 – Alternate way to use image ads

Coding the ads yourself instead of using the admin menu is easier than you think. It also allows for you to add more if needed. For this example we’re going to add in 2 new ads into the top ads section. You need to open ads-top.php (although this will work for all the ad files).

The technique is the same as above but you substitute the ‘ADD YOUR CODE HERE’ with this code (make sure to change the link and image urls)

<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>

So you should end up with this:

<div class="ads">
 
	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>
 
	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>
 
</div>

That will give you 2 ads. To include more, simply copy the all 4 lines of code, and change the link and image urls to suit:

<div class="ads">
 
	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>
 
	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>
 
</div>
 
<div class="ads">
 
	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>
 
	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>
 
</div>

And it’s as simple as that. You can have as many ads as your require.

Making radical changes to the design of Fresh news can be as simple as editing images, style.css and header.php. It’s important when planning to customize the header, that you decide what elements to keep. All elements except for the logo can be successfully placed elsewhere in your site so you’re not confined to keeping elements the same.

For this tutorial, we’re going to create a site based on holiday experiences, called ‘Wish you were here’.

As you can see, I decided to remove unwanted elements such as the rss links and categories which can be moved to the sidebar. I also decided to change the category dropdowns to page dropdowns. This tutorial allows you to pick out certain techniques if you don’t want to follow it literally.

Step 1

Make sure that you have the latest versions of wordpress and the Fresh news theme.

Step 2

To create a full width image as your background, use the guide below when designing the image. The width of the image can be any size, but remember to keep the main elements into 960px box in the middle (see the whitened area) and the logo and search box should be in the ‘header image’ section.

Save your image as bgr.jpg. For the logo, you could either make it a separate image same size as the logo in the fresh news theme or just keep it on the bgr.jpg. You won’t need to use the admin menu for you logo to appear and the area will still be linked to the home page just like the logo.

Step 3

Before we continue, we need to remove any unwanted coding from header.php. You can use either wordpress’ built in editor or a text editor.

Because in this tutorial we’re removing the page and rss links at the top, find and remove this coding:

	<div class="grid_12">
        <ul class="nav1">
            <li <?php if ( is_home() ) { ?> class="current_page_item" <?php } ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
            <?php wp_list_pages('sort_column=menu_order&title_li=&depth=1'); ?>
        </ul>
	    <!--/nav1-->
	</div>
	<!-- end .grid_12 -->
 
	<div class="grid_4">
        <span class="subscribe">Subscribe:&nbsp;&nbsp;&nbsp;<a href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>">Posts</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="<?php bloginfo('comments_rss2_url'); ?>">Comments</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=<?php $feedburner_id = get_option('woo_feedburner_id'); echo $feedburner_id; ?>" target="_blank">Email</a></span>
	</div>
	<!-- end .grid_4 -->

To remove the rss image from the navbar, find this code and remove it:

		<a href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>"><img src="<?php bloginfo('template_directory'); ?>/images/ico-rss-trans.png" alt="RSS" /></a>
   </div><!--/rss -->

Finally, to change the navbar from categories to pages, find this coding:

	<ul id="nav" class="grid_15">
		<?php include(TEMPLATEPATH . '/includes/version.php'); ?>
		<?php wp_list_categories('title_li=&exclude=' . $ex_aside) ?>
		<li>&nbsp;</li>
	</ul>

and change it to the following:

<ul id="nav" class="grid_15">
			<?php include(TEMPLATEPATH . '/includes/version.php'); ?>
			<?php wp_list_pages('title_li=&exclude=' . $ex_aside) ?>
            <li>&nbsp;</li>
</ul>

You can exclude pages you don’t want in the navbar by changing the text in the brackets to the following:

		<?php wp_list_pages('exclude=17' ); ?>

Once you’ve edited header.php, save and upload (if necessary).

Step 04

Now upload your background image into the default folder (found in /styles/default/). Open up style.css (in the main theme directory) and change the following:

#top{
	clear: both;
	height: ADD IN YOUR TOP MENU HEIGHT;
	margin: 0 auto;
	padding: 7px 0 0 0;
	font-size:11px;
}
 
#header{
	height: 109px; - make sure you leave this as it!
}

Step 05

To finish you may want to have the image behind the nav menu duplicated in the actual drop downs. To do this, first save a section that can be repeated as nav.jpg, making sure it’s the same height as the header (the width can be anything). Upload into the /images folder (in the main directory).

Now open up default.css (located in the /styles folder) and change #nav command url to nav.jpg:

#nav li ul li { background: #FFFFFF url(../images/nav.jpg) repeat-x top; }

And that’s it!

WooThemes are wonderful because they look beautiful out of the box. But if you’d prefer to customize them to your taste they’ve built-in the tools to make that very easy. Here are a few tips I learned first-hand when I built our new Cubicle Ninja’s website with the VibrantCMS theme.

Let’s pretend we’re launching a fun new website about an upcoming war between kittens and mankind. We’ve installed Wordpress, followed the detailed directions provided by the WooThemes team to install the VibrantCMS theme, and we were ready to add in our own imagery.

Using Large Images

By default the featured post area will grow vertically to match your image, but horizontally, your image will overflow into the next featured panel. Take a look at the left side of the image above as an example.

Is there an easy way to add in image greater then 340 pixels wide without this issue?

1. Go to Manage > Pages and locate the page with the problem image.

2. Find “VibrantCMS Custom Settings” where we’d originally placed our image URL. Located here are two fields, “Top” and “Left”. We will use these to adjust where our image is located.

3. Place a value you’d like to move your image into the field labeled “Left”. For example -50 moves your image 50 pixels to the left.

4. Hit save to update this featured panel.

5. View your page to see how you did. You can keep guessing and checking until your image fits perfectly.

Editing the Background

We now have our custom images snuggly in place. Would it be possible to customize our background color or image?

Absolutely. As a matter of fact, if you can customize this you’ve learned how to customize any element of your theme – the same rules apply. We’ll be using an amazing plug-in for Firefox that helps us see what we’ll need to edit. This tool is called Firebug. Click here to install your copy before we begin.

1. With Firebug, finding out what the code is behind any part of our website is as easy as clicking. Let’s open Firebug by going to Tool>Firebug>Open in New Window within Firefox.

2. At the top-left of Firebug there is an menu item called “Inspect”. Let’s click this.

3. As we run our mouse over the page we can see a blue outline appearing. These are the hidden elements of your webpage. If we mouse-over the top of our background and click, we see the specific code that controls this area.

4. In Firebug’s top right corner it displays where this code is located. This class is located in a file called “pink.css”. All of the template variations have their own CSS file. This controls the look and feel for that specific style. Use a FTP program to find the folder where these CSS files are located.

It should look close to this:
www.yourwebsitehere.com/wp-content/themes/vibrantcms/styles/

5. Next, use a text editor to open the “pink.css” file.

6. Once inside look for an entry that matches our Firebug name, “#featured”. It should look like this:

#featured {
background: #ffc0d4 url(pink/featuredbg.jpg) repeat-x top left;
}

7. Looking at this class we can see how quickly we can modify our featured area:
“#FFC0D4″ is the pink in our background, by changing this value we will modify the color
“url(pink/featuredbg.jpg)” is referencing the gradient image across the top of the featured area
“repeat-x scroll left top” tells the image to repeat horizontally and start at the top left

8. Let’s say we like our background gradient image, but we’d like there to be repeating text in this area. This would be as simple as finding the referenced image above and replacing it. (If you’re using a different style then Pink, your featured background image will be located in the folder name of that style.)

9. We can find this image at:
www.yourwebsitehere.com/wp-content/themes/vibrantcms/styles/pink/featuredbg.jpg

10. Edit and replace the old version of “featuredbg.jpg”. Your website now has a new repeating background image.

And that’s it! We’ve only begun editing our Kitten Wars website, and it looks very rough, but you can see how quickly we could change almost every aspect of the featured panel. And with your knowledge of Firebug exploring the remainder of your website should be that much easier.