How to Edit a WordPress Theme: Part 3 – Theme Files


Chances are you enjoyed the two previous articles guiding you through the miracles of WordPress and you want more. This is your lucky day then, because the third part is here and as announced, our main focus will be on individual Theme Files.

This post is a continued version of our WordPress Series :

1. How to Edit a WordPress Theme – Part 1: The Basics

2.How to Edit a WordPress Theme – Part 2: Stylesheet

What Are Theme Files?

Each and every WP theme is composed of a large number of individual files. These all work together and project the final image of the theme. They can be easily compared with the role of bricks for a house.

Various themes have various files, but there are several which are common for 99% of themes and naturally, that’s where we will concentrate our keen interest:

  • Archives
  • Comments
  • Footer
  • Header
  • Sidebar
  • Single Post

We will anew work with the Jogfest Theme, you can find it here (in case you have not been the part of our previous exercise).

Download Jogfest Theme


Quick Tip: Always backup by making a copy of file you are about to edit, in case you would need to restore it again.


There are many scientific branches, that also includes archival science. It teaches the importance of proper storage of information.

While it’s doubtful that we could have any use for archival science here, we need to realize the significance of Archive.php – basically because this file is in command of any older post found through the search bar.

Needless to say, the major function of Archive.php is to spit out the content of your website that meets the searching criteria. There is not much to tweak really, we may be however interested in changing some captions.

Let’s say we’re in the proper window:

Now, there are not many captions we could alter, let’s just say we are not satisfied by the original quote informing us that nothing has been found and we want to change it – perhaps to “Accept our apologies, but nothing meets your criteria”:

See? You should know your way inside such basic changes by now and understand that it’s child’s play – once you understand what to look for.


Do you know where is the best place for your visitors to give you invaluable feedback or give you thanks for your efforts?

Exactly, in the comments represented by Comments.php. You are entitled to perform multiple changes:

  • enable/disable login in order to post a comment
  • show / hide the number of comments
  • forbid comments altogether

The good news is that working with comments is not difficult at all. This time we will stay away from coding and will use only plugins or the WP user interface.

One of the most popular plugins for comments is called CommentLuv. Simply put, it will allow the poster to include a link back to his or her latest post, thus give away an incentive to comment.

In case you would like to prohibit comments for any reason, you are able to do so either in Settings / Discussion (to forbid all comments) or you may choose to modify it manually – if you scroll down before publishing a post, there is a window called “Discussion”.

You may observe both possibilities on the screens:


Say hello to one of the most flexible and silent companion in the files group. Not two footers look alike – there could be multiple columns, it could be sizable or tiny or you can ignore it altogether, it’s entirely up to you (or on the theme’s programmer).

We believe that footer is best for the following purposes:

  • links – Meta, WP Blogroll, etc.
  • tracking codes – like Google Analytics or Quantcast
  • executing Java Scripts
  • adding additional information, such as Contact Forms

We will base our code example on the last point. Let’s say we will want to include a possibility to contact you.


First of all, we need to introduce the concept of classes. A class defines an attribute that will be applied each time you will call for it in the code.

Classes are defined in Stylesheet.css like this:

.alfa{text-align: left; margin-left: 10px; color: #000}

Now, each and every time we will write:

<div class = "alfa">,

in this case div element will be aligned to the left, have 10px margin and black color.

Footer Element

Let’s get back to the original topic. First of all, we need to open Footer.php and see how is it constructed:

It is obvious that footer is the bottom black part of the second screen.

Our goal is to add a hyperlinked text under the “Copyright” section in the footer. The copyright section is formatted by class called “left”, so we ought to see Stylesheet.css and examine the attributes of “.left”

The problem here is that we can’t simply use the same class and add another text, perhaps with the <br> tag (forces an end of the line), because it would continue in the space where it ended – see the screen:

The solution here is to go to Stylesheet.css and define another class, like this:

.alfa {text-align:left; margin-left: 10px; }

You can add this chunk of code anywhere you like, but it’s a good idea to use a specific area (such as Alignments) in order to keep the code transparent.

Now, all we have to do is to go to Footer.php and add this piece of code:

<div><br>Feel free to contact us <a href="">here</a>

The final result looks like this:


Being on the top of the website, the Header section might be the very first thing your visitors see – not to mention it’s significance in SEO.

At first, let’s investigate an important drawback which is common for a lot of WP themes.


The title of your blog should be as short and as focused on your keywords as possible. The more things are in your title, the less keyword density you show to the search engines and thus the less strength your site has.

Jogfest is no exception, let’s fix that. What you need to look for is the chunk of code between <title> and </title>.

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

An easy fix is to delete this code and insert a much simpler one:

<title><?php wp_title(); ?></title>

Note : This is not supported by all wordpress themes.

That way, you will only present your site’s name – which is more than enough when it comes to title.

Meta Tags

Header also accommodates special tags called “meta tags”. The word meta originated in Greece and it stands for “after”, “beyond” or “with”. These are inserted anywhere between <head> and </head> tags.

Meta tags used to be important, but they are becoming obsolete. There are basically two meta tags worth of your attention:

site description

<meta name= "description" content="The Name Of Your Site">

character coding – depends on your language, say we want to set the universal UTF 8

<meta http-equiv= "Content-Type" content="text/html; charset UTF-8">

There are several other meta tags, but they are far less important. Just to have our list complete, let’s have some more:

Content author

<meta name="author" content="Name">

Automatic forwarding

<meta http-equiv="refresh" content="Number Of Seconds; URL="TheNewURL">

Single Post

As the name suggests, Single.php deals with things that happen when you click on an individual post.

At first, we need to deal with a bit of a problem. WP Themes have a nasty habit – single post headings are in H2, while in fact they should be H1, because there should always be a H1 heading on every page and article headline is the ideal candidate.

Step 1 – we shall be interested in a parameter called “post-title” or something similar. Our task is to make H1 look like H2, so that visitors won’t see any difference and we will make a significant SEO improvement for our posts.

We will need to operate within two files – Single and Stylesheet. Let’s begin with the Stylesheet:

.post-title h2 a{ color:#333; font-size:35px;text-shadow:1px 1px 0 #fff;}

We are obviously particularly interested in the attributes of H2, because we want to set them for H1 as well. Nothing could be easier:

.post-title h2, h1 a{ color:#333...}

Step 2 – Let’s venture inside Single.php and locate the chunk of code dealing with the post title:

<div><h2><a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title();?></a></h2></div>

All we have to do is to change both presences of H2 to H1. That’s it.

There are of course many more ways you can play with Single.php, such as an author box you know from DesignZZZ. But those are advanced features and I will happily give Ayaz more room to talk about them.


Congratulations! You made it through the third part of our series and you are very familiar with the basics of HTML, WordPress Themes and CSS. I sincerely hope that you have found my material helpful and will anxiously await your comments.

Thank you for reading!

create free website wix below post

Further Related Readings

  1. jskamm February 21, 2012 at 7:42 am

    This has got to be the worst tutorial I’ve ever seen. None of the examples worked for me.

    1. Tayyab February 21, 2012 at 12:02 pm

      that is because we published this tutorial quite a while ago and now WordPress has updated… the tutorial was good when it was published, its not bad, its just outdated. We’ll start publishing new ones soon.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved