Wordpress online training course

Wordpress lesson 5, Adjusting Themes

Adjusting theme files

If everything went well you have found a nice theme for your Wordpress website. And it would be even better if you have allready installed your new theme. In this lesson we will discuss a few important theme files. These files are basicly present in most themes. It can be however when you choose a special theme that some files will have a different function or that more files will be present. Im going to assume you have choosen a default theme which is allready in your Wordpress installation namely "Kubrick". To practise and get and idea what you can do the default theme is good starting point.

The default Wordpress installation exists from a lot of files. You can find these files in your admin panel when clicking "Appearance" and next "Editor".

In this lesson i will run through a few adjustments. I have choosen some simple things so you aren't immediatly overwhelmed. Its basicly possible to adjust about anything. Its possible to find a tutorial for allmost any adjustment on the internet. In the last lessons i will explain a few for you. But for now lets first concentrate on this lesson 5.

Quick tip

To make sure you don't "Break" anything i advise you two things:

1. Make a copy of all your theme files before you start to edit them.

2. Don't edit your files through the admin panel but do this localy on your computer with a text editer and after place them in the right folder on your server through ftp in the corresponding theme folder.

Changing fonts

Lets start with the font of your website. This is what i allways start with. Some theme have a terrible or unreadable or too big a font. So its very usefull for you to know how you can adjust this. The used fonts are defined in your style.css. CSS stands for cascading style sheets. In this file you can change the entire layout so it will be displayed entirely through your entire website and you only need to adjust it in one file. If you would like to know more about CSS just go to our CSS lessons. For now its more than enough you know that you can adjust used fonts here. In your style.css file look for the <body> selector.

Behind the property font-family you can find the values for the fonttype. In this case a font family is being used of Lucida Grande, Verdana, Arial and Sans-Serif. You can put any font here you want. But i advise you to only used default windows fonts. If you don't do this then the font will only be shown if someone who is looking at the page also has the specific font installed on their computer. Also when you change a font its best to look directly on multiple pages what the effect is from the change. Maybe the font you choose is a bit to big and it doesn't look that good anymore. If this is the case or your font is to small then you can edit this behind "font-size".

It may be possible that it looks different in your style.css but in principle you can allways find the <body> selector and this allways has the same function.

Colors

I really don't like the basic grey that the default theme of Wordpress allways uses. Lets make it a nice pink color. To do this change the background color to a pink shade that you like, like for example this color: #CC33CC. For an overview of colorcodes look here : W3Schools.com.

Font color is easily adjusted by change the color code from example #333 to any other color you like. But don't be too wild. Most important is that you choose a color that is easy to read.

If you rather have a image in the background instead of just color then you need to upload this image to the folder "images" in your themefiles and you will replace the image name that says "background" with your own image.

Header

If you want to replace the header image you will need to change this piece of code :

The image name should be changed to the name of the new image. What i usually do is just replace the old image with an image with the same name. You can find this image in the folder images in your theme files folder.

There are lots of things you can alter in the .css file. Like how links are shown, how headers should look like, what your footer looks like. I wont explain all because there is to much to mention you need to puzzle a bit with this yourself. If you can't work it out its maybe better if you follow our .css course first.

Other files

There are alot of themefiles where you can change certain things. Adding images, text or plug-ins. The most important files are these :

single.php : this file is displayed when someone is looking at a single file.

sidebar.php : this is the left or rightside of your website. Here widgets are shown. You can also choose not to use widgets but place a code here to use plug-ins. But in general this is not neccesairy.

comment.php : this is the commentform which is shown beneath each page.

search.php : this is the page that shows the search results. Here you can for example place a google search engine box.

footer.php : this file displays your footer. You can add alot of things here but mostly things like copyright, link page and contact data is put here.

There are alot other files that you can change but these are considered the most important.

A example

To give you an idea how you can change the files above i will give a example of an alteration.

Example author beneath article

We want to add a block which contains the author of the post beneath every article is posted by him/her. You cannot find this in the default Kubrick theme. We will now add this block.

Go to single.php and look for the next piece of code :

And paste this code below it.

You will allready see the author beneath your article now but the layout should be bad. Add the next lines to your style.css

Your block will look alot better now. You can adjust a few things like background color or the border thickness yourself so it pleases you more.