A lot of people use WordPress as their blogging platform. After installing WordPress, newly christened WordPress users will usually try to find and download WordPress themes that they can use so that their site looks different from the default theme. Whether a WordPress theme is free or premium, there are plenty of ways to improve them. The following WordPress theme tips cover basic customization, styling and optimization.



1. Reduce the Size of Theme Images

Images are an important part of every WordPress theme, yet WordPress theme developers sometimes forget about optimizing them. Images in a WordPress theme include CSS background images, template logos, default stock images, icons, and so on.

Optimizing images can save you in bandwidth consumption and can improve page response times for your blog readers.

Photoshop, for example, offers a Save for Web feature that optimizes images for the web. What I usually do is lower the quality settings of the image until I start to see changes in color or quality.

Furthermore, you can use a lossless image optimization tool like Smush.it that will squeeze out excess file size without loss in image quality. You can find more image optimization tools here.

Yahoo! Smush.it is a lossless compression tool.

Learn all about web image optimization via this guide to saving images for the web.

2. Use a Custom Favicon

Some WordPress themes don’t come with a default favicon (the icon that represents a website that you can see in browser tabs and browser web address bars).

The Design Instruct favicon displayed in Firefox 3.6. The site uses WordPress as a publishing platform.

When a website doesn’t have a favicon, it can look unprofessional. Make sure that your WordPress theme has a favicon. You can check out this list of favicon generators to help you design your own.

To reference your WordPress icon, simply place the following code inside header.php, which can be found inside your theme’s directory:

Modify the href attribute value to point to the location of your favicon file.

3. Style WordPress Image Captions

When you upload and post an image in a blog post, you can give them image captions to describe it.

Every good WordPress theme should include default styles for image captions. To style the default caption, you can use the .wp-caption class in your styles.css.

Here is an example of styling the image caption (using some CSS3 properties):

.wp-caption { background-color: #f3f3f3; border: 1px solid #ddd; -khtml-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; /* optional rounded corners for browsers that support it */ margin: 10px; padding-top: 4px; text-align: center;}.wp-caption img { border: 0 none; margin: 0; padding: 0;}.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px;}Here is the result of the style rules above:



4. Use PHP Flush

By calling the PHP flush function right after your header, you will be able to speed up your WordPress blog. Simply add this line to your header.php file after the closing tag:

This code simply forces your web server to send your website’s header before sending the rest of the content. By using the flush function, the browser has time to download all the stylesheets referenced in the header while waiting for the other parts of the web page.

5. Use Shorthand CSS in Your Theme’s Stylesheet

The CSS files of WordPress themes contain lots and lots of code to cover all sorts of situations and usage. In order to reduce the size of the file, you can use shorthand CSS. Some WordPress theme designers will make it easier for less advanced users to tweak the styles by not using shorthand properties, but if you’re an experienced CSS coder, you can write/re-write the styles using shorthand properties.

For example, if you find style rules in your theme that look like this:

.post { padding-top:3px; padding-right:10px; padding-bottom:5px; padding-left:2px;}You could reduce them to their shorthand equivalent as such:

.post { padding: 3px 10px 5px 2px; }This will effectively reduce the size of your stylesheet. Changing this won’t make that much of a difference, but every bit of optimization brings you a little closer to a faster WordPress theme.

6. Minify Your WordPress Theme Files

Congruent with using shorthand properties for CSS to optimize styles.css, if your theme’s CSS and JavaScript files aren’t minified, you can minify them to reduce their file sizes. Minification will take out unneeded characters from your files such as spaces and tabs.

For JavaScript, you can use JavaScript Compressor, a free web-based tool that you can use to minify your JavaScript files.

For CSS, check out this list of CSS optimizers.

It will be trickier to minify your HTML since the theme’s markup is spread amongst several files and they will have PHP code interspersed with them. However, there are plugins like W3 Total Cache that will minify all of your front-end code as well as perform other optimization processes such as caching your blog posts to improve site speed.

7. Secure the Theme

One easy way to protect your theme is to remove the generic WordPress generator code that is placed inside your theme’s tags. The reason behind this is that if a malicious user knows your WordPress version, it’s a lot easier for him to attack it using version-specific vulnerabilities. In order to remove this, you have to take two steps.

First, go to your theme’s header.php file and check to see if there is a line like this: