If you google – yes ‘google’ is an accepted verb since mid-2006 – the term ‘creating wordpress theme’, you’ll be presented with many options to choose from the page results. Many of these are quite explicit in detailing the steps to make a WordPress theme from scratch.
Scout around the web, and exemplary theme designs are yours to take inspiration from if you have a knack for designing, and you want to do the whole thing from ground up.
I’m rather the type that wants the good of 2 worlds – a better-than-average theme, and a free one at that. I’m sure there are many of my tribe, hence this article.
Fortunately for me I came across 100 free WordPress themes just when I was planning to change the layout of this blog. I was spoilt for selecting the best among the best for my need, and after much hemming and hawing I eventually settled for VersatilityLite.
It made sense to me because I liked the wide preview pane at the top and the neat arrangement in the sidebar. After I downloaded the theme I realized it has another advantage for me – its codes are pretty easy to manipulate.
Now don’t get me wrong. I’m not a programmer, not also a designer, but like many out there I know how to tweak around things here and there that enabled me transform VersatilityLite when I installed it to this present theme.
Let’s get started.
Tools You Need
Whatever change you make in the theme you can test that only on a server. This may be a local proxy server or a part of your present web server. I used my present web server where I first installed WordPress through SimpleScripts in a test directory.
In the second step I downloaded VersatilityLite and then uploaded it to the /wp-content/themes/ directory inside the main WordPress test directory. My third step was to activate the VersatilityLite theme from the blog dashboard.
If you are planning to do the redesigning yourself, I’m sure you are aware of the 3 steps just described. If yes, the following steps will be easy to follow. If not, I’m afraid you need to know them first before proceeding.
Okay, what are the tools you need for this work? I used the following:
- You need software to create/edit images for your blog. For me it’s Jasc Paint Shop Pro, now a Corel product.
- An FTP upload tool, such as FileZilla, and lastly
- Some space in a web server that ‘understands’ PHP/MySQL.
I haven’t mentioned Notepad for changing the codes which I trust everyone with a computer has.
Understanding WordPress Theme Structure
There is no need to change the core programs of the blogs that are outside of wp-content directory. Even inside the wp-content directory it is better to leave the plugins directory untouched. Instead I focused on the themes directory – more specifically the files within the VersatilityLite directory inside the themes directory. Any question why it should be so? Okay here is the answer.
A WordPress CMS is like the shell of an apartment that is dressed up with a theme template, similar to doing the interiors of the apartment.
There are 3 distinct parts of any WordPress theme: the header, the container, and the footer. The container breaks into 2 parts – the main content area that contains the meat of the blog, and a sidebar mostly on the right. There are instances of 2 sidebars, one each on either side of the content area, but they are occasional.
Of the 3+1 parts of the theme, the header and footer almost remain constant. The sidebar changes minimally, usually when the list of articles updates with new additions.
That leaves the main content area which is the place that constantly changes with each new addition of posts. The content area also changes according to the type of content it contains.
The ‘index.php’ page contains a list of recent articles arranged chronologically in new-to-old order. Each article has a brief summary or excerpt from the post as the case may be.
The ‘single.php’ page puts out the detail content of each post. The ‘search.php’ page will show up the search results in the content area when anyone uses the blog’s in-built search tool.
For all these occurrences the main content changes, while the 3 other parts remain essentially same.
Quite evidently, the only place where as a blogger you can and must have meaningful content to attain and retain visitors’ interest is the main content area.
What Controls A Theme’s Design?
It’s the CSS file that comes with every theme that controls the overall design. The styles of different elements outlined in that file govern the way a theme is seen in the browser. Or do they?
Earlier Design Changed Design
To a great extent yes, but not in entirety, I’d say. Look at the 2 themes above placed side by side. Some of the changes in the header and sidebar are rather done directly in the ‘header.php’ and the ‘sidebar.php’ files.
What follows therefore is that the CSS file holds the all-important main key to bring the changes in the theme design, even though some minor modifications in other PHP files are also required.
Points To Remember
Before I embarked on making the changes, I first created a folder on my hard disk naming it ‘VersatilityLite-changed’. To this I’d bring in the copies of original theme files that are to be changed for my needs.
I found it convenient to make changes in the theme files on my desktop before uploading them through FTP to the server where my blog is located. But you can do this in another, perhaps more obvious way.
You can make changes directly on your website after you log in to your WordPress blog dashboard and then proceed to the theme editor. The editor page opens with the ‘style.css’ file while the rest of the theme-related files are listed on the right that can be opened for making changes when needed.
If you want to change the images like I did, there is no other way than to FTP-upload the new image files on to your web server.
Lastly, if you have a running website as in my case it is better that you do all the redesigning in a separately installed WordPress blog. You may have the ‘nofollow’, ‘noindex’ meta-tags in the header to stop the search engine robots from prying into the test blog.
<meta name=”robots” content=”nofollow, noindex” />
Steps I Did
The 2 most important points to consider for altering a theme are, (1) why you need the change, and (2) exactly what change you need.
As I said above, I wanted the VersatilityLite theme because I liked its top preview pane and the neat sidebar arrangement. And I wanted to change the VersatilityLite theme because I wanted the template to be wide enough to accommodate my 640×480 pixels video in the main content area, and I also wanted a new color scheme for the theme.
With that in perspective, let me now recount the steps I followed:
- I widened the template from 900px to 1000px, and changed the sidebar from 339px to 279px, and that of the main content area from 519px to 689px.
- I made a host of other changes in the ‘style.css’ file like font-family, background images (which I designed and uploaded), link colors, navigation links, the featured pane at top, and so on.
- For every change I made in the style sheet, I did it like below so that I could always see what the earlier figures were:
.post{
width: 649px; /*EARLIER 469px;*/
padding-top: 25px; /*EARLIER 7px;*/
margin-bottom: 25px;
color:#333; /*EARLIER #7f7f81;*/
float:left;
/*background: url(images/post-star.gif) no-repeat top left; >> NOT NEEDED*/
/*padding-left: 50px; >> NOT NEEDED*/
} - In the ‘sidebar.php’ file I removed the third small box in each row of 2 nos. 125x125px ads. This provided more space to further reduce the width of the sidebar. I made other changes here as well.
- The blog header is very important. This is the place that first attracts the attention of a visitor. So, apart from good design, I needed to have important messages up at the top about my video-production course. At the same time I also wanted a large ad banner there, and some space for getting subscription for blog posts.
More than anything I wanted all of these occupying not more than top 60% of the screen above the fold. I made necessary changes in ‘header.php’ file while noting that I’ll have a featured post at top right which was one of the reasons of my preference for VersatilityLite theme. - Some minor changes were necessary in files like ‘index.php’, ‘comments.php’, ‘featured-block.php’, and ‘footer.php’, mainly because of changes in sizes in content area and sidebar, and also because of change in color scheme of the theme.
What Else…
If you are doing your own redesigning and have come thus far without much of a hitch on the way, you’ll know the job is almost complete except for small tweaking here and there.
An important aspect is to understand where to place the ads in the page so that they go well with the template, yet do not lose prominence for attracting clicks.
Redesigning can be thrilling because it brings a sense of fulfillment to your ability. I always suggest to not shy away from trying out things yourself if only to discover a hidden talent of yours.
Wish you all the best.
Update (May 8, 2010)
Since writing this article, I’ve changed this blog theme once again couple of months back. This time I’ve settled with Oulipo while making minor tweaks here and there. Hope to remain with Oulipo for quite awhile.
 This article of September 17th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
[...] is the original post: How Did I Redesign WordPress Theme Of My Blog Related [...]