How to Customize WordPress

A Complete Do-It-Yourself Guide to Customizing WordPress Themes and Templates

Contents
Foreword Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Chapter 6 Chapter 7 Chapter 8 Chapter 9 Afterword Introduction Installation and Getting Started.. Choosing a WordPress Theme.. Using Firebug and Colorzilla: A tutorial in HTML and CSS.. Creating Custom Images and Graphics Customizing the Background.. Customizing the Header. Customizing the Sidebar. Customizing the Footer Customizing the Color Scheme.. Conclusion 1 2 3 5 8 10 11 12 14 14 15

Introduction
This guide is intended for the amateur webmaster and experienced designer alike. For those of you with less experience in web design and programming, you may find the W3 Schools to be a helpful resource. They have tutorials on HTML and CSS, two things that are necessary to customizing WordPress. Customizing WordPress themes has the potential to get somewhat complicated at times, so a basic understanding of HTML and CSS will go a long way in figuring out how to get past the problems you may find. I have included an entire chapter devoted to HTML and CSS when I talk about the Firebug and Colorzilla addons for Firefox. So dont get scared; you will not have to become a pro at HTML or CSS to customize WordPress, Ill tell you all you need to know. Still, if you find you have any problems at all, please dont hesitate to email me at: [email protected]

1 Copyright 2010 HowToCustomizeWordPress.com

Chapter 1: Installation and Getting Started

Installing and using WordPress depends on where you bought your domain name and who is hosting your website for you. Every hosting company has different types of servers with different capabilities. The hosting company I would recommend using when buying your domain name and hosting your website is BlueHost. After you have purchased your domain name with them, you can go into your Control Panel and install WordPress with the click of a button.

Others require you set up FTP access and manually install WordPress. You can call, email or live chat with your hosting company and they can walk you through their way of establishing an FTP account. If this is you, then you can see how to install WordPress on their website. Often times if you simply ask your hosting company to do it for you, they will. To get started with WordPress, you need to identify one vital part of the navigation as shown in this image- the appearance editor. This is your theme editor which allows you to edit the actual HTML and CSS files of your theme. Below that you will see the link to Add New Themes. We will talk about how to use that function in the next chapter. The link for Widgets above the editor can also be important. This is typically where you can edit your sidebar and change what it shows. With WordPress installed and working you are ready to pick a theme!

2 Copyright 2010 HowToCustomizeWordPress.com

Chapter 2: Choosing a WordPress Theme

There are so many WordPress themes out there that you should be able to find one with a layout you like in no time. Here are some sites you can go to and find some free themes: WordPress Themes Base Free WP Themes Themes 2 WP Top WP Themes If you choose to download one of their themes, here are the steps for installing the theme. 1. 2. 3. 4. 5. You will have downloaded a .zip folder. Open the folder and extract all files. You should now have a normal folder with the same name on your desktop. Download an FTP client such as Filezilla. Install and run Filezilla. You will have to set up an FTP account with your hosting company. You can contact them and they can do this for you or you can set one up yourself from your cPanel. 6. Login to your server via your account information in Filezilla. 7. You will see some windows like in this image below:

8. The top long horizontal window is just a log of the programs communication with the server. There are two below it. The one on the left is where you locate files on your computer. The one on the right is where you locate files on your server. Below each is a list of the files at the location you have specified. The bottom window shows the progress of file transfers taking place. 9. Locate the folder that has your theme on the left. It should be on your desktop. 10. On the right, locate the folder wp-content. From there open a folder called themes. 11. Click and drag the theme folder from the left into the window to the right. 12. Give it some time to upload and in a minute you will have that theme available for you in the Appearance--->Themes section of your WordPress navigation.
3 Copyright 2010 HowToCustomizeWordPress.com

I know that seems more complicated than it really is. Email me if you need help getting it figured out. If you want to go the easier route, you can actually install themes directly from the WordPress database. Just follow these steps: 1. Go to Appearance---> Add new themes. 2. You will see the screen below which gives you search options for the type of theme you are looking for.

3. Search for the type of theme you are looking for. Dont bother with colors as they are easily changed. Search based on the number of columns you want and where you want the sidebar to be placed. 4. A list of themes will appear. You can click preview under each of them to see them in full size. Once you find one you like, click install under the picture of that theme. 5. A new window will appear, click Install Now at the bottom right. 6. It will automatically install and a new screen will appear. Click Activate for the new theme to go live on your website.

4 Copyright 2010 HowToCustomizeWordPress.com

Here is my personal advice in selecting a theme for WordPress. If you choose one that looks more complicated, it will be more complicated to customize. If you choose one that looks less complicated, then it will be less complicated to customize and made to look complicated. You will find loads of themes with built in ready AdSense spots and built in Twitter capabilities. Im telling you, it is much easier to add these to a simple site than it is to alter them on a complicated one. So choose your theme wisely. This guide will definitely work on about 75% of the themes out there. But there are programmers and developers creating very complicated themes these days. Locating the right HTML and CSS files can be difficult with their themes. The good thing about WordPress is that you can always add Widgets and Plugins to do the cool things those themes are set up to do. So pick a clean theme that doesnt have a lot going on. It will be easier to customize.

Chapter 3: Using Firebug and Colorzilla: A tutorial in HTML and CSS

The contents of this chapter are at the core of customizing WordPress. First things first, you must download and install Mozilla Firefox as your web browser. You will only make it harder on yourself if you try to use Internet Explorer or anything else while trying to customize WordPress. The reason is Firefox comes with two important addons: Firebug and Colorzilla. So before we get started, go download the Firebug addon and the Colorzilla addon for Firefox. Using Firebug Firebug is a tool that allows you to find where in your HTML source code any particular element is located. For example, if you are trying to change your logo but cant find it, just right click on it with your mouse, then say inspect element, and Firebug will bring up a window at the bottom of your screen showing you where that element is located in your source code.

5 Copyright 2010 HowToCustomizeWordPress.com

The window on the left tells me that my logo is located in the HTML right after <div class=title>. The highlighted line of code is where the title is coming from. If I wanted to move it, I would simply cut that line of code and paste it elsewhere. The window on the right tells me where in my CSS stylesheet that element is located. It is located in the #header .title a {} section. Everything that appears between the { and the } is styling my logo, such as color, font size, margins, etc. We wont go into HTML much because it is a bit more complicated. But customizing WordPress is all about changing the styles. This is done in CSS and that is what we will discuss in just a minute. Using Colorzilla Colorzilla is a tool that tells you the color of any pixel on the page. And I dont mean blue, green, red, etc. It tells you the exact hexadecimal color code of any pixel. So if you want the color of your title to match the color your header image, you simply use Colorzilla to see what color it is in your header image.

To use Colorzilla, simply click the dropper that is on the bottom left corner of the browser window. Your mouse pointer will turn into a cross. Then hover over and part of the web page and it will tell you the color of where you are hovering over. In the above image, I hovered over the light blue image behind the word Alabama. Now look next to the dropper. The color appears in two formats- first as RGB and second as hexadecimal. So that says the light blue color is R: 234 G: 244 B: 255 and hexadecimal #EAF4FF. This is especially helpful when trying to get background colors or font colors to match a color in your image exactly. Understanding HTML HTML stands for HyperText Markup Language. It is the coding language of the Internet. You really dont need to know much about it in order to customize WordPress. It is only useful if you want to physically move elements on your page. The basic tags or elements of an HTML document are: <html><head></head><body></body></html> You are only concerned with whatever appears between the <body> and </body> tags. Nothing else is visible on your page. If you want to understand the basics of HTML, I suggest going to W3 Schools and reading a bit about it. Again, not essential to customizing a page. CSS is the critical thing to understand if you are going to be customizing WordPress. Understanding CSS CSS stands for Cascading Style Sheet. It helps to trim down all the bulky code that used to appear on web pages. Instead of styling every individual element on a web page in HTML, you
6 Copyright 2010 HowToCustomizeWordPress.com

can simply define a preset style in CSS and just refer to that style in the HTML. So it is very convenient. Here is an example of CSS: Body { Color: #000000; Background-color: #FEFEFE; Font-size: 12px; Font-family: Verdana } What this tells a browser is when they see the <body> tag, they need to style the font as Verdana, make it 12px in size, make it black and make the background a very light grey. There are a lot of things you can control through CSS. Altering them is the basis for customizing anything about WordPress. For example, let us suppose you dont like the style of your sidebar headers. You can use Firebug to determine where in the stylesheet those headers are. They might be somewhere like this: #sidebar h2 { Color: #000000; Font-size: 12px; } If you decided you didnt want them to be black or 12px in size, then you simply change it to this: #sidebar h2 { Color: #FF7F24; Font-size: 10px; } Now you have made them orange and 10px in size. Essentially every customization of WordPress happens in CSS. Here are the basics of how CSS works. #: As in the example above, a hashtag indicates a section of the page. For example, you can have #content h2 and #sidebar h2. One of these would style the h2 headers in your content section. Another would style the h2 headers in your sidebar. The most common hashtags are to indicate #header, #content, #sidebar and #footer. In HTML, these are found at <div id=header>, <div id=content>, <div id=sidebar> and <div id=footer>.

7 Copyright 2010 HowToCustomizeWordPress.com

.: The only difference between a . and a # in CSS is in the HTML. #header in HTML is <div id=header> and .header in HTML is <div class=header>. They both do the same thing, mostly just semantics. If you want your section to be a div id or a div class, make it a # or a . in your CSS. Color: specifies the font color. Should be in hexadecimal format. Here is a list of hexadecimal colors. Font-size: specifies the size of the font. Should be a number in px. Font-family: specifies the font type. Verdana and Arial are the most common. Font-weight: specifies bold. Only possible values are normal or bold. Text-decoration: specifies italics or underline. Only values are italics, underline or none. Margin: specifies the margin around a certain element. Padding: pretty much interchangeable with margin. Background-color: specifies the color to appear behind the element. Background-image: specifies a certain image to appear behind the element. Background-repeat: says whether or not the image should be repeated or only appear once. Background-position: specifies where the image should appear. Every attribute should end with a semicolon. Lists of an elements attributes appear inside the { and } brackets. For a good tutorial on CSS, you should check out the W3 Schools. Ill help you find the CSS you need to edit and how to edit it in this guide, but for a comprehensive look at the basics of all CSS, I would check out that tutorial.

Chapter 4: Creating Custom Images and Graphics

The thing I hear most often is This theme is perfect except for that one picture. So people keep looking when they dont realize how easy it is to replace that picture with literally anything you want. There are a lot of free tools out there to assist you in doing this. My favorite online tool is Cool Text. This tool can help you make any kind of image as well as a styled title for a logo. For example, here is a possible background image you could use for your website created at CoolText.com.

8 Copyright 2010 HowToCustomizeWordPress.com

That example took me exactly 47 seconds to create. Granted I have used the tool a lot, but it shows you this is not difficult to do. Once you start to use it and get the hang of it, you can make background images, headers, buttons and logos. Here is an example of styled text you could use for a logo.

Another free online tool is called Picnik. This tool allows you to resize, crop and add effects to images, such as borders, black and white, etc. Look at these two images below, a before and after with Picnik.

There are a lot of fun things you can do with it, so just experiment around. It is mostly free, but some features are only available to paying members. Trust me though, you dont need to pay, there is plenty you can do for free. One problem with both of these tools is the inability to make parts of an image transparent. Typically if you round the corners, the image stays rectangular and just puts a white background behind the corner. Unfortunately if you are not using a white background for the image, that doesnt work so well. You might want to make it transparent. In that case, you need another program. The program I use to accomplish this is called Paint.net. You can download it for free to your computer. Once you have it, open it up and open the image in question. Here is how you make any part transparent. 1. 2. 3. 4. 5. 6. 7. 8. Select the magic wand tool from the tool bar. It is right above the paint can. Look along the top and you will see a bar half blue and half white called Tolerance. Set tolerance to 0% by dragging down the blue portion to the left. Now click on an area you want transparent. It will highlight a whole section if all the pixels next to each other are the same color. Click delete on the keyboard. A checkered background should appear. Anything checkered is transparent. Important- when you save your image, make it a .GIF or .PNG as these support transparency. Do not save as a .JPG.
9 Copyright 2010 HowToCustomizeWordPress.com

Honestly, the best thing to do is just go start using these tools. Experiment around with them. See what they can do. The more you play around with them, the more you will be able to do with them. Before you know it you will be able to download an image, crop out a design from it, alter it around and make a logo out of it.

Chapter 5: Customizing the Background

Changing your background is probably the first step you will want to take. It is always the easiest as it is easy to find in the CSS. 99% of all themes have the background in exactly the same place, and that is the body {} part of the CSS, which is usually first. For example, my theme on HowToCustomizeWordPress.com is called Superior. Here is a screen shot of the original.

My goal with this was to find one of the ugliest themes I could and change it as much as I could to show you how easy it can be. So as you can see, the first thing I wanted to change was that mustard yellow color of a background to something a bit easier on the eyes. Here is a screen shot of my site as it appears at the time I am writing this.

As you can see my background is now a dark grey gradient into a light grey one. This is a two step process. First you have to make an image that is a gradient. Then you have to change the background color to the lightest color of the gradient. Here is the actual body section of my CSS stylesheet. You can see all the attributes I talked about earlier that appear in most CSS, but pay close attention to the background attribute. I know I said there was background-color, background-image, etc. but there is also a shortcut to combine all the different background attributes into one attribute. It makes it more manageable. Take a look below:

10 Copyright 2010 HowToCustomizeWordPress.com

body { margin: 0; padding: 0; background: #EFEFEF url(http://www.howtocustomizewordpress.com/wpcontent/themes/superior/superior/images/background.jpg) repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #464646; } If you use background: then you must use color, then image, then repeat, then position. If you leave color out, it uses white by default. If you leave the url of the image out, then no image appears. If you leave the repeat out, it will automatically repeat horizontally and vertically. If you leave the position out it will by default start the image in the top left corner. So you see on mine there is no position specified, so the image starts in the top left corner. The repeat-x value means it will repeat horizontally forever. Obviously repeat-y would be vertically. The url is where the dark grey to light grey gradient image can be found. The hexadecimal color value is the light grey color that continues after the gradient. How did I do it? First, I went to Cool Text and made a gradient image. I then uploaded that image to Picnik where I sized it to the right height I wanted and made it just 1px wide. I then used Filezilla to upload that image to my themes image folder. (Email me if you need help on that.) I then displayed the image as my background and repeated it horizontally. I used Colorzilla to see what the lightest color at the bottom of the gradient was. It turned out to be #EFEFEF. I set that as the color so that when the image actually ended, that color at the end of the image would continue all the way down the page. Thats all there is to it! You can do the same with any image, not just a gradient. Crop a picture of some mountains, display it as your background, then use Colorzilla to find the color at the very bottom of the image. Make that color your background color and the image will seamlessly be your background.

Chapter 6: Customizing the Header

Now that you know how to customize a background, customized a header, sidebar, footer or anything else is a piece of cake. It is as simple as using Firebug to locate the area you want to customize in the CSS and then changing the element you want to change. Look at this example:

11 Copyright 2010 HowToCustomizeWordPress.com

The current header here is a picture of some grass and the sky. If you right click on the image a list comes up. Select inspect element. You will then see this appear at the bottom of your screen:

On the left you see the HTML that calls for a div called navigation. On the right, you see the navigation div in the CSS. This is where you see the background image. Width, height and other elements are shown as well. If I wanted to customize the header, I would simply go to my appearance editor, select the stylesheet, locate the navigation div (#navigation) and change whatever I wanted to change. You could replace the image, make it a solid color, shrink it or whatever else. Thats all there is to customizing a header!

Chapter 7: Customizing the Sidebar

Customizing the sidebar can be the trickiest thing to customize. This is because each WordPress theme is a little different. Some are pre-designed to support widgets. Others are not. The first
12 Copyright 2010 HowToCustomizeWordPress.com

thing you need to do is check which type of theme you have. This is done by going to your admin panel, looking under appearance, selecting editor and opening up sidebar.php. Some themes have multiple sidebars, so it might be l_sidebar.php and r_sidebar.php for example. Either way, you are looking for a line of code that says this: <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> This little piece of code enables widgets. If it is not there, widgets will not work. If it is present, then you can add widgets. You can also simply add it to the top as the first thing inside of <div id=sidebar> and enable widgets yourself. To use widgets, go to the control panel, look under appearance and select widgets. Youll see a screen similar to this:

On the right, mine shows Sidebar 1 because I only have one sidebar. If you saw multiple dark boxes with different sidebars, it means you have more than one sidebar. To enable a widgets, simply drag one of the lighter grey boxes from the left underneath the darker grey box on the right. Make sure the arrow next to the title of the dark box is pointing down. Click on it if it is not. So if you want a list of your categories in your sidebar, simply drag the categories widget over there. This is true of any of the WordPress standard widgets. There are plugins you can download to enable even more widgets. You see KB Advanced RSS on mine. This allows me to display any RSS feed of any blog on the internet in a way I decide. There are others you can search for to do calendars, polls and other things. If you want to do your own HTML, then simply drag the Text widget into the box on the right. This allows you to input anything you want, such as images and buttons. And if you want to change the style of the sidebar, follow the same process we have outlined earlier of using Firebug to identify it in the CSS. Then change any element you would like. This is the same for all sections of your web page. Find the element in CSS and change whatever you want. The only thing that makes the sidebar trickier is the widget factor. But now you know how to quickly see if your theme allows widgets and how to enable them if it doesnt.

13 Copyright 2010 HowToCustomizeWordPress.com

If you cannot figure out widgets, it is ok. You dont have to use any widgets. When you dont enable any, whatever HTML is in sidebar.php will automatically show. You can edit this to customize your sidebar as well. Add Javascript, PHP or other HTML elements to put whatever you want there. Go give it a try, it is pretty fun. Just remember, ALWAYS save a copy of any php file you edit before you save changes. That way if you mess up terribly, you can fall back on something. This is especially true with sidebars. I find the thing I mess up on most is my sidebar, so before I ever edit sidebar.php I always save a copy of what is there on a blank notepad file just in case.

Chapter 8: Customizing the Footer

Customizing the footer is the same as customizing the background or header. Simply right click on the footer, inspect element to open Firebug, and then see where in your CSS the footer is located. Then if you want to change the background color, change the font size or anything else, find it in the CSS and change what you want to change. If you have already made it this far and figured out how to customize the background, header and sidebar, then altering your footer should be a cinch. I will mention here something else though. You can also customize elements inside of the footer, header, and sidebar or anything else. This is done in the CSS like this: #footer a {text-decoration:underline;} This means any links that appear in the footer are underlined. You could likewise do something like this: #header a {text-decoration:none; color:#000;} This makes links in the header not underlined and black. So you could style the text, links, or anything else in a certain section of your web page to look different than their counterparts in other sections. I say that now because typically everything on a web page stays consistent except in the footer. Text is typically smaller and links are typically styled differently. It is up to you how you want everything to look, just know you have the option of making things in the footer look different than those same things when they appear elsewhere on your page.

Chapter 9: Customizing the Color Scheme

Last but not least, the most common question I get. Everyone always asks me how to change their color scheme. Well, you now know how to change your background, how to customize the header, and how to customize the sidebar and footer as well. You also know how to customize elements inside of those sections.
14 Copyright 2010 HowToCustomizeWordPress.com

Truth be told, doing all of that basically will customize your color scheme. However, there are some general places you need to look if something isnt working. In your CSS, the first thing you need to do is look at your body tag. It might look something like this: body {color:#870000; font-family:arial;} a:active {color:#000087;} a:links {color:#000087;} a:visited {color:#000000;} a:hover {text-decoration:underline;} Heres what all of that means. It says that in the absence of any color being specified for any given element, make the text red (#870000). For all links on the page, in the absence of any other specification, make them blue (#000087). If they go somewhere previously visited, make them black (#000000). If someone hovers over the link, make them change to be underlined. To change your color scheme, those are the first two places to look. Changing the colors of links and body text typically will change most of the content on your page. If it doesnt, there may be something like this: #content {color:#000000;} This means the text in the content div will be black. So if you change the body color to one thing and see some text not changing, it is because there is another color specified for that particular section. Really understanding CSS is the key to customizing your color scheme. Again, W3Schools.com is a great resource to learning the basics of CSS so that you can customize your color scheme.

Conclusion
You will get frustrated. Im just saying it now. When I first learned all of this, it was hard to figure out. But practice surely makes perfect. Keep at it and youll get it figured out. Dont hesitate to contact me with specific questions if you are unsure. If you really get messed up and turned around, you can always hire me to come in and customize your WordPress theme for you. Again, for my help in either situation, simply send an email to: [email protected]

15 Copyright 2010 HowToCustomizeWordPress.com