Final Tutorial: Michael Vinson

It was the one thing I had the biggest pain trying to find: how to customize a theme to make it look like you want it to. I found plenty of stuff on finding themes and implementing them, but when it came to actually customizing them, my resources surprisingly slimmed down. Anyway, I am here to save the day.

To start off with, you have to have at theme to actually customize. To do this you will want to go under the Appearances tab on your WP dashboard and click the Themes button. This will then lead you to a page which looks like this:

At the top left is my current theme I am running on my site. Then below that are the other themes I have downloaded at one point or another. The Install Themes tab is where you will want to download and activate a new theme for yourself. Here is a search I did for a theme with a Right Sidebar:

You can then select one and preview it or even activate it on spot. This video did a wonderful explanation for me of explaining this process. The first 4 minutes of the video shows the process I just explained above, which is the most popular way to get a theme, the second half goes into uploading and installing themes you download from other sites. Also, before I get into my way of editing CSS, here was another video I found while researching that goes into a little more painstaking way of editing your CSS.

But anyway, to the real reason we are here: customizing this theme. Here is a my site with a basic theme I downloaded:

Not a whole lot going on here at the moment. However before we begin, it is a good idea to take a look with the help of Firebug to see some of the things we would like to change in this site. This was one of the things I never saw brought up in other tutorials, like the ones mentioned above or a 3rd listed in my bibliography at the end of this post. For this example we will start to customize the header, and when I say header, I am referring to the part of the site that contains the site name "Michael's Test Site" and the little blurb beneath it. So lets say we want to change the font of Michael's Test Site. First, we can Ctrl-click that text and then hit "Inspect Element" to bring up this page:

As you can see, the link is now highlighted in blue and at the bottom right we can see that it's styling properties are contained in line 127 of the style.css file; so let's take a look at that file, shall we?

To get to the page shown above, click once again on the Appearances tab on your Admin page and then select Editor. IMPORTANT NOTE: When you arrive at this page, be sure that below where it says "Edit Themes" that the stylesheet listed in parentheses is titled style.css. Sometimes, when you click on the Editor it will open first the rtl.css or ie6.css file, which does you DO NOT want to edit. If it does show rtl.css, simply scroll down the page a little and on the bottom right select style.css to edit from the Styles heading.

Now, to make your life a little bit simpler, I recommend dragging and dropping your stylesheet into your own text editor. Since I'm on a Mac at this time, I will drop it into Text Wrangler:

I am a fan of line numbers in my CSS, especially when working with WP Themes. To show these in Text Wrangler, I went to View->Text Display->Show Line Numbers (it only says hide because I already have them shown). Then I can scroll down to line 127 to start editing my header:

As you can see, I've gone in and added a new color of red for the font color as well as changed the font style to Georgia. I then can select all of the stylesheet in text wrangler and paste it back into my Editor in WP. After you have done that make sure to hit the Update button on the Editor page. Now if we go to my test page it looks like this:

 

So there you have it, at least strictly delving into the CSS. One last thing I'd like to show you is where your images are when you want to add them to your CSS, at least, where they are within your WordPress Admin page:

If you click on the Media tab you are automatically sent to your library where all your media is housed (images, video, audio, etc.). Now that's look at one of these to see where it is in our actual site. How about the first image:

Clicking on the image brings you to the Edit Media page, and as you can see circled in red, there is your File URL. If you copy that into your CSS for an image location you will have it appear on your site, like so:

First, the relevant CSS change:

And the outcome:

I didn't style it just so you can see that it works. But you can do this within any element where you can have a background. I also see that this post has run a bit long, so I will end here and hope that I have provided you guys with enough info to get out there and start styling your own WordPress site. Happy coding!

Bibliography:
Theme Installation Tutorial for WordPress 3.0
How to Edit a WordPress Stylesheet: Easy Way + Hard Way
WordPress 3.0: Simple CSS Edits