Customizing themes

How can I personalize a theme? How can I change the title or the heading? The picture displaying at the top? The name of “Home” in the navigation? The color of the links? The “No posts found” message? The color of the links? And more...

Please read Chapter 1 before you try out anything described on this page. Once you read Chapter 1 have a look at the Chapter's list to see what you're interested in. More customizations will be added with time going by...

Chapter 1: General introduction on how to customize themes (Read this before you start!)
Chapter 2: Default customizing page of the theme
Chapter 3: Change Title and Heading (description, tagline)
Chapter 4: Changing the picture(s) displaying at the top (if any)
Chapter 5: Changing the name of the blog page “Home” to something else
Chapter 6: Changing or adding code to the Header
Chapter 7: Changing or adding code to the Footer
Chapter 8: Change error message for unsuccessful searches
Chapter 9: Change the color of all the links on the theme
Chapter 10: Change the color of some of the links (Not available yet)
Chapter 11: Change the color of text (Not available yet)
Chapter 12: Add some text or anything else to the photo displaying at the top
Chapter 13: Remove or get rid of the date on posts
Chapter 14: Customizing header styles (Not available yet)

Chapter 1: General introduction on how to customize themes (Read this before you start!)

Note: Changes apply to the theme only. If you change the theme you will have to apply the changes to that theme as well. Changes may get lost when the theme is updated so backup what you changed, which code you added where and so on... Make a backup of the original theme to be able to restore it if something should go wrong and make a backup of your customized theme. Finally I deny any responsibility if the theme gets messed up in a customizing process.

Personalizing a theme is really easy once you understand the basics of how it works. The problem is that each theme works in a slightly different way. Where changes need to be made and how varies from theme to theme so it's almost impossible to write a precise how-to for this FAQ.

So what I will try to do here is explain how a theme works in general. Since each theme is slightly different for some things it will work if you follow the tutorials on this post to the letter. Whereas for other things it will probably not work if you follow the tutorials on this post to the letter. The goal is to give you an idea of how something could be done. However you will then have to find out yourself how it works on your particular theme.

Most important thing: changes to the theme are done under Appearance, Editor when you login to your administration area.

On the right side you will find various pages to choose from. Each theme is divided into sections of the page. The ones you will find yourself working on the most are (depending on the theme names can vary):

Footer (footer.php) for everything concerning the bottom of a site
Header (header.php) for everything concerning the top of a site
Main index (index.php) which concerns the whole page
Stylesheet (style.css) where all the formatting preferences for text and links are set (fonts, colors, link-colors, ...). I think this is the one you will use the most.

Click on the page's name to have the code of that page appearing in the box where you can edit it.

On most templates each of this pages are divided into sections themselves. The stylesheet for example will most probably have a section called "header" for all the settings concerning the header part of the page, one called "content" for all formatting settings concerning the post itself, "sidebar" for everything concerning the sidebar, and so on...

Most templates indicate the various sections with titles like this (or similar): /* ---- Content */

Understanding this allows you to quickly and easily find what you're looking for. First you look for the right section then you try to find where exactly you have to apply the change for the desired result to happen.

Once you applied the changes hit "Update file".

I think the best way to learn is by trial & error. Change something, look at the result, if it's not what you wanted change it back to what it was before you changed it. Of course you have to remember how it was set before you changed it. If you're modifying a line of code before doing that copy the line and paste it into a Word document or something so you could always bring it back to original.

I also would recommend you to have a WordPress blog set up for testing purposes only for example under yourdomain.com/test/. This way you don't have to mind about messing up your whole website. You would then just have to reinstall the test blog.

Chapter 2: Default customizing page of the theme

Some themes have a page which allows you to customize some things. This page usually shows up in the Appearance section of your admin area.

Chapter 3: Change Title and Heading (description, tagline)

To change the title or heading of your website go to your administration area, Settings, General. There you can enter a Blog Title and a Tagline which is the description of the blog. Per default the Tagline is "Just another WordPress weblog" so if you want to change that you now know how.

Chapter 4: Changing the picture(s) displaying at the top (if any)

To change the image displaying in the header go to your FTP application, select your WordPress Blog's folder, wp-content, themes, the theme's folder, the folder where the images of the template are and find the image displaying at the top. Once you found it download it, edit it and re-upload it or simply overwrite it. The sizes of the images should match.

Otherwise go to the Appearance, Editor section on your Blog's admin areaand select Stylesheet (style.css). Depending on the theme also Styles (styles.php) or similar. There you will most probably be able to find the image and change the URL to it if you want to.
Maybe some themes have it also specified in the Header (header.php).

If the Theme has no image in the header you can add add one by modifying the Header (header.php) under Appearance, Editor. Place the code to embed an image

<img border="0" src="URL of the image" width="350px" height="200px"/>

where you want it to appear on the Blog. This last tip is not perfect but if you want to try it do it.

Chapter 5: Changing the name of the blog page “Home” to something else

Login to your Blog’s site administration area. Go to Appearance, Editor and choose Header.php, scroll down to find this code (or similar):

<div id="pagemenu">
<ul id="page-list" class="clearfix"><li <?php if(is_home()){ echo 'class="page_item current_page_item"'; } else { echo 'class="page_item"'; } ?>><a href="<?php bloginfo('url') ?>" title="Home" >Home</a></li><?php wp_list_pages('title_li='); ?></ul>
</div>

Change the last Home right before the link-closing-tag to whatever you want.

Chapter 6: Changing or adding code to the Header

For some of the FAQs on this website it is required to add some code in
If you read this on my FAQs it’s enough to add the code between tags on your post and embed it in Raw HTML tags so you then would get [*RAW]<head>The code</head>[/RAW*] (without *). No need to edit the theme’s header tag or something.

In other cases that’s what you have to do so here’s how:
To add some code tro the header login to your admin area. Go to Appearance, Editor, select the Header (header.php) if you want to add some code into the <head> tags search for </head> and post the code right before the tag.

Otherwise you can also use Plugins which allow you to enter stuff into the header.

Chapter 7: Changing or adding code to the Footer

Login to your site administration. Go to Appearance, Editor and select Footer (footer.php). If you need to paste some code right before </body> scroll down, find the </body> tag and paste the code right before it (example: for Google Analytics, Statcounter and so on). Don't forget to hit "update file".

You can also change the footer text here. You will see "Powered by". Edit the code around there by adding whatever you want to have displaying in your footer.

Otherwise you can also use Plugins which allow you to add stuff to the footer. Have a look at my Plugins page to find two of these plugins.

Chapter 8: Change error message for unsuccessful searches

To personalize the message displaying when someone searches for something which is not available on your blog go to your admin section, Appearance, Editor, Search results (search.php) and find the message which displays when you perform such a search (example: No posts found). Once you found it you can edit it by simply typing in what you would like to show up.

Chapter 9: Change the color of all the links on the theme

To change the color of all the links appearing on your blog you need to go Appearance, Editor, choose Header (header.php). Once you see the code search for </head> and right before it paste the following code:

<style type="text/css">
a {
color: #0000FF;
text-decoration: underline;
}
a:hover {
color: #0000FF;
text-decoration: none;
}
a:visit {
color: #FF00FF;
text-decoration: underline;
}
</style>

The 6-digit codes for colors designations can be found here: w3schools

This works for most themes, not all themes.

Chapter 12: Add some text or anything else to the photo displaying at the top

To add some text or an image on the main image of your theme insert the following line of code under Appearance, Editor, Header (header.php)
<div id="text-image" style="left: 670px; position: absolute; top: 320px; z-index: 1; font-family: Arial; font-size: 12px; color: white; align: right;">
WordPress FAQ<br><a href="http://wpfaq.org" target="_blank"><span style="color:white; text-decoration: underline; color: white;">http://wpfaq.org</span></a>
</div>

I usually insert it after the closing title tag
<!-- /Title -->
In the code you need to specify where you want the text/image to display.
Number of pixels from the left and from the top. Also you can change the font, font-size, color.

To insert an image use
<img src="URL of the image" width="320px" height="100px">

Chapter 13: Remove or get rid of the date on posts

A lot of people want to hide or have the date of the post disappearing from their WordPress to make it less blog-like and more website-like. To eliminate the post's date go to your administration area, Appearance, Editor to edit the Theme's source files. The date usually placed and hard-coded in the

Main Index Template (index.php)
Single Post (single.php)

files.

Go to these files and search for...
<?php the_time('F jS, Y') ?>
or
<div class="post-date">
or similar. Once you found this line of code simply delete it.
On some themes there's a "Posted on" which is then followed by the code which gets the date of the post. In that case remember to remove also the "Posted on" part.

This FAQ is also discussed in my WPFAQ.org E-Book (sample)

© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com
Thank you for visiting and supporting my website,
- Cédric -

Now share it…

Share

Comments are closed.