WordPress Tutorial - Customizing Your Blog's Design
Home >> Blogging >> WordPress Tutorial
Installing WP | Admin Overview | Editing Your Design | Plugins
I will be very honest here. If you don't know much about HTML, PHP and CSS or you don't have a user-friendly theme then customizing your blog design outside of the original design may be a challenge.
Before I started blogging, I created static websites so I learned a lot about HTML and CSS. Static websites are much, much easier to edit and learn from because the code is not as complex. So I'm very thankful for that former education now that I have a blog.
Nevertheless, I will do my best to help you learn how to customize your blog.
First, Create a Child Theme
A child theme inherits the functionality/framework of the original theme but allows you to modify and add your own custom elements.
It's like making a copy of a theme and working from the backup. I highly recommend you consider this when working with WordPress. That way you preserve the original theme.
Read more about creating child themes here.
Every Theme is Different
The most important thing to understand here is that every WordPress theme is different because they are designed by different people. So one set of instructions is not going to apply to everyone.
I often get very specific questions about editing a specific blog theme and it's very hard to answer because the code is different from blog to blog.
The StyleSheet
This is the most important file on your blog because it governs the design and various styles of your blog (link color, link size, font family, column widths, etc.) If you go to the Appearance tab of the WordPress Admin panel and select "Editor", You should see a file called style.css over in the right column. This is your blog's stylesheet.
To edit the stylesheet, you simply click on style.css. It will open up the file right inside WordPress.
Note: Before editing, I would strongly recommend copying and pasting the code into a text editor so you have a backup.
Editing Your Header
As you scroll through your stylesheet, you will probably see something like...
#header {
background-image:url('header.gif');
position: relative;
width: 900px;
}
Use the find feature (Control-F/Command-F) keystroke and search for the word header.
Your code probably won't look exactly like this but there is more than likely a #header ID somewhere in the code. This tells the browser how to style your header. In the example above, the image called header.gif is what makes up the header of the blog.
So if you wanted to change the header you'd have to either...
1) Replace/overwrite it with a new image with the same name and size, or
2) Create a new image and edit the name of the image in the stylesheet
Here's a more detailed tutorial on customizing your WordPress Header.
Where to Upload Images
Most WordPress themes store images in a folder called "images" located right inside the WordPress theme folder. The easiest way to find out where your images are stored is to right-click your mouse over an image that came with your theme and select "View Image."
In your browser, you should see the path to the image like in the example below...
So my bio image on my blog (named bio.jpg) is stored on my web server with the following server file path...
/wp-content/themes/thesis/custom/images/bio.jpg
I like to keep all my theme images in the same folder and highly recommend you do so too. So when you upload new images, you should place them in the same folder.
Once you've created your new header and you're ready to upload it using an FTP program (or you hosting file manager) to save the new image to the appropriate folder on your host.
If you overwrote the existing header image by giving it the same name then all you have to do is upload a new header image and overwrite the existing one.
If you re-named the header, you'll need to upload it and then open your style.css file and change the filename in the line that calls up the header image. So if you named your image headerNew.jpg, you'll need to update your stylesheet to read...
#header {
background-image:url('headerNew.jpg');
position: relative;
width: 900px;
}
Video: How to Update Your Header
If you need a visual of what I just explained above, this video will help.
Install the Firebug Addon
If you are a Firefox user, you should install the Firebug addon. This will allow you to see what files you need to edit on your blog.
Let's say you don't know what attribute to edit to change a link color. You can hover over the link and Firebug will tell you what style you need to edit in your stylesheet. This addon really comes in handy when you're trying to edit your blog's template. Watch the video below...
Adding Custom Code
If you want to customize your blog even further, check out the WordPress Codex site. They teach you how to manipulate the WordPress code to display content in different ways.
For example, say you only want to display some of your categories and exclude a few. They show you what code you need to paste into your blog to make that happen.
Consider Using a Premium/Paid Theme
You may not like the idea of paying for a WordPress theme, but when it comes to designing, premium themes often provide the most beginner-friendly tools and support for editing your core design. Free themes are nice, but you have no support and the code is often buggy.
I use Thesis, and this theme has a free plugin you can install that allows you to edit various sections of your design right inside the plugin. For example, if you want to add a banner below your blog content, you just paste the code for the banner in the appropriate box marked "After Blog Post" instead of digging through the PHP files in the Admin panel.
Thesis also has a Design Options panel that lets you adjust your column widths, # of columns, column layout, menu colors, font and link colors right inside the WordPress Admin panel without having to open up the stylesheet. Learn more about Thesis in the video below...
Thesis is the only premium theme I've ever used, and I can't imagine using anything else. But you may also want to look into The Affiliate Theme and Genesis as well.
Continue on to my recommended plugins.
Installing WP | Admin Overview | Editing Your Design | Plugins
If you liked this, please share. Thanks!
© Copyright 2012 Lisa Irby - All Rights Reserved
Privacy Policy | Disclosure/Disclaimer | Sitemap | Forums
