WooThemes

Canvas

09. Feb, 2010 by Magnus in Personal Blog

The Awesome Custom Woo Navigation

27. Jan, 2010 by Magnus in Blog, WooThemes News

One of the most commonly asked questions by Woo users is how to modify the navigation in the theme, by excluding items, adding external links etc. We recently added Jeff to our team, and started him off with a project we had been planning for a while; A new custom navigation admin page, where you would be able to really build your own navigation without touching any code.

It didn’t take long for him to come up with the wireframe, and then Cobus added some nice styling to the UI, and we can now proudly present it to you! We’ll start off slow by adding it to our newest themes first, and we hope to get feedback and squish any possible bugs that should appear before rolling it out to all our themes.

Woo Custom Navigation admin panel

Continue Reading »

WordPress 2.9 is out!

19. Dec, 2009 by Magnus in WooThemes News

As most of you probably already know, WordPress released version 2.9 last night, with some nice new features added. None of the new features affect any of our themes, and we have updated all our demos to 2.9 and they are working without any problems.

We recommend everybody to upgrade to the latest version of WordPress. If you believe that you have found a bug or compatibility issue with 2.9, then please make a post in our forum, so we can quickly determine if it is caused by the new version.

Optimize

14. Dec, 2009 by Magnus in Business, CMS, Portfolio

Headlines

05. Nov, 2009 by Magnus in Magazine / News

Unique Features

These are some of the more unique features that you will find within the theme:

• Featured jQuery tabber/slider area above normal posts to showcase your favorite posts. Can be static or set to slide automatically with built in options.
• Show your latest tweet in the header (instead of 468×60 ad space)
• A custom social bookmark option at the bottom of single posts to share your writings with ease!
• A nice Author box widget on single posts
• Cufon font replacement makes all titles look smooth (can be disabled)
• 4 different ad spaces (header, post content, sidebar and footer) and 4 different ad sizes (468×60 top, 200×200 content, 300×250 and 125×125 widgets). Show your adsense code or a image ad.
• Very flexible layout, so you can easily change sidebar position, image position in post etc.
• Custom Woo Widgets for use in sidebar and footer: Flickr, Video Player, Author, Search, 300×250 ad, 125×125 ad (max 6)
• 15 stylish alternate colour schemes to choose from + NEW! Custom color picker for top background color and link/button color

Best Practices When Customizing a WooTheme

17. Sep, 2009 by Magnus in All Themes

Many of our users customize their theme from the default look, from just changing the link color to drastically changing the layout and look. Most will dive straight in and modify the code in the theme, which is the easiest way to do it. But this leaves the problem of updating the theme in the future, since all modifications will essentially be lost if you overwrite your files with the new version of the theme.

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.

How to translate a theme

26. Aug, 2009 by Magnus in All Themes

How to setup a language file in WordPress

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

How to upgrade your theme

24. Aug, 2009 by Magnus in Tutorial

Here are some basic guidelines on how to update a theme to it’s newest version.

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.

Have a Coffee Break

12. Aug, 2009 by Magnus in New Themes

Coffee Break - A nice business theme

It’s been quite a while since I’ve contributed anything to the WooThemes repository, so when I finally managed to sneak in some Photoshop time, I wanted to draw inspiration from our own WooThemes website design, as we have been getting quite a few e-mails asking if our theme is available for sale. Obviously we want to keep our own design unique, but I  designed Coffee Break with a similar layout, so we could offer the public something similar in style.

The homepage layout consists of a jQuery slider at the top, which is great for showing of your most important content. We then added a nice mini-featured area below the slider, similar to the one we have on our homepage. You can add the sections with an icon to the left by just adding WP pages, and adding them to your options panel. We also added two sidebars, one for the homepage and one for the blog, and also a nice 2-column footer where you can have some basic information about the website.

Do you like the theme demo and the 17 alternative styles? Any other features that you think we missed? Let us know in the comments.

Fresh News 2.0

26. Jun, 2009 by Magnus in Development

Fresh News is the all time most popular theme here at WooThemes, so we thought it should deserve to be one of the first themes to receive the new Woo Framework update treatment (see video of new framework). What this basically means is that the theme is now easier to setup and use because of the improved functions in the framework (options panel, new widgets, easier image upload, easier to update in future etc.).

We also reworked some of the coding on the front page of the theme, so it now acts more like Busy Bee in functionality. To be more specific:

Continue Reading »

Time to evolve your blog

24. Apr, 2009 by Magnus in New Themes

Meta-Morphosis

We know you like a freebie once in a while, and when we first saw the Meta-Morphosis design by Izzudin Helmi we immediately wanted to develop it into a WordPress theme, and give it away for free! The Photoshop design uses the Delicious font type, and we wanted to try and bring this over to the finished product, something we managed with the help of Cufon.

The layout of the theme is a bit unusual as it has a two column homepage with featured posts on the left, and normal posts on the right, so there is no sidebar like in your traditional theme. All of your widgets go down in the javascript slider in the footer, which is superslick!

We also incorporated the new and improved Woo-Framework in this theme, so you will see some changes in the backend options. The biggest improvement is the ability to upload your thumbnails directly without having to use the old upload, copy+paste link into custom setting field anymore. This also applies to uploading your custom logo in the options panel. We hope to update all our themes with this new functionality soon!

Check out the demo and get downloading already!

Meta-Morphosis

24. Apr, 2009 by Magnus in Free, Personal Blog

Theme Features

These are some of the features that you will find within the theme:

• Two-column homepage with Featured posts and normal posts
• Sweet jQuery widgetized slider in the footer
• Cufon javascript font-replacement for titles (Delicious font by exljbris)
• As always, Meta-Morphosis is built on our very popular (new) backend, which includes some  non-standard, non-average customisation options;
• 8 different colour schemes to choose from…

Newsport

27. Feb, 2009 by Magnus in Magazine / News, Portfolio

Unique Features

These are some of the more unique features that you will find within the theme:

• Integration of breadcrumb navigation to increase the usability of your website;
• 4 widgetized areas (left sidebar, footer 1st-3rd column)
• 5 custom Woo widgets (Flickr, Quote, Search, 125×125 ad, Feeds)
• 11 great colour schemes to suit your site identity.
• Newsport has been localized and includes a .po file for easy translations to be made of the theme

Ad space

The theme has a variety of ad space to choose from, and can display both banner ads and adsense code which you input into your option panel. The ad spaces availabe are:

• 300×250px MPU on the right above categories (option to show it in footer instead)
• 468×60px in the header besides the logo (logo will be left aligned)
• 468×60px after every single post
• 125×125 widget (upto 4 ads) which you can place in any of the 4 widget spaces.

Ad spaces

WP-PostRatings Integration

23. Feb, 2009 by Magnus in All Themes, gotham news

This tutorial was written by one our awesome Woo Ninjas – Jordan Hatch.

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. (:

WooTube haz homepage!

20. Feb, 2009 by Magnus in Development

When we first designed WooTube, we only intended it to be a simple video browser theme. Some complained that the homepage looked like a single post, probably because that is exactly what it was WooTube has been out for nearly a month, and it seems like it has been well received, even though there isn’t any fancy homepage layout for it.

But now there is! A few hours of coding, and voila, an optional homepage layout, which you can turn on from within your options panel. This will add post boxes on the front page, and you have the option of showing the latest video, or disabling it and getting that gallery feel on the theme.

This theme can therefore easily be used as a normal blog/gallery/portfolio or whatever you can imagine it to be. There is no need to add videos to your posts, so you could use it to show of your design work, or run a CSS gallery.

If you already own WooTube and want to know how to upgrade, you should study the changelog.txt and first backup your current theme if you have made any changes to the files.

Let us know your thoughts on the upgrade by checkint out the demo, and if there are any more tweaks that we should add.

Customizing your theme with Firebug

19. Jan, 2009 by Magnus in All Themes

This tutorial was written by one our awesome forum ninjas – Jordan Hatch.

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

Click video to view video