A few weeks ago at our local WordPress Meetup, we were having a round table discussion and someone asked
“How do I start? I currently have an HTML site and would like to convert it to WordPress, but I don’t know where to begin.”
That question took me a few years back when I was first dipped my toe into WordPress theming.
I had been designing websites for years, had just learned CSS and ditched my tables, I had a blog, but I was looking at my other pages and thought how do I integrate this other content with my WordPress site?
Thinking of Content Differently
When learning web design, you first learn that CSS allows you to separate presentation from content. WordPress takes that concept even further by separating the HTML from the content and storing all content in the database.
Once you’ve grasped that concept, you also need to know the difference between the various WordPress content types.
- Posts – are displayed on your blog and appear in reverse chronological order, i.e. the latest posts are at the top. Your blog posts can be categorized in a series of ways and thus can be used for news, press releases, events, reviews, articles, whatever you wish.
- Pages – on the other hand are for your static content. Contact information, about page, services, etc…
- Comments – these can be turned on or off and are also stored in your database and associated with your blog posts.
- Media – any document, file or photo that you upload in your WordPress site is uploaded in the uploads directory and it’s information is also stored in the database.
- Links – Should you wish to use your blogroll, this other WordPress content type is there for you.
When you plan your WordPress site, the first thing you’ll want to do is simply upload your content. Create your pages, decide if you want a blog or not and make sure you’ve got everything in place.
Understanding Themes and Templates
Once you’ve inserted your content and created your pages and posts, you can then move on to the fun stuff and start designing and breaking stuff. Yes that’s right breaking it.
You remember that story about the clock maker who gave his son a watch? What did his son do? Take it apart of course… that’s how you learn. We’ve all taken stuff apart to see how it works, the same is true for learning WordPress.
The first thing you should do is select a theme and make a child theme. Any theme will do, but I would recommend sticking to a popular theme from the WordPress repository. I would also try to pick a theme that has fewer files. Nothing is more frustrating that looking at a theme that consists of 1000 files.
Once you’ve selected your theme, take a closer look at individual files and try to understand what does what. You’ll notice that the folks at WordPress have made things easy and the filenames are quite logical.
-
header.phphas all the HTML that generates the header, -
index.phpcontains the main content of your site and pulls the latest blog posts -
sidebar.phpgenerates the sidebar content -
footer.phpcreates the content found in the footer area
Once you’re comfortable with the template, copy the ones you want to play with, add them to your child theme and grab your hammer. Just comment PHP code out or take it out altogether. Look at the site and see what happened. If you’re site suddenly goes blank, then just hit the undo key. The good thing about working with a child theme is that, if you get into trouble, the parent theme is still intact, so you can just go and grab the original copy and start over.
As a web designer, I shouldn’t have to remind you that you’ll need to set up a play area. You probably want to have your text editor and work on your local machine or set up a dummy sit on your hosting provider.
Tips and Tricks
Once you’ve moved things around, you might get stuck. WordPress has put a few tools in place for you to use. You will notice in your header.php that the <body> tag has a function in it called body_class(). This function generates a string of information including the name of the template used. If you’ve ever wondered why a certain change isn’t sticking and you’re not sure what template is being called, just look at the HTML source and look for the template name in the body tag.
Take the time to learn how to use Firebug or the Chrome developer tools. Both are very handy tools that will help you make edits and small changes to your theme. Have a look at Siobhan’s excellent tutorial on how to use Firebug or check out Devin’s video about Chrome’s developer tools.
CSS is both fantastic and frustrating. Sometimes getting it to do what you want is so tedious. The first thing I do when debugging CSS is add background colors to the area I’m working. These boxes of colors are great visual indicators and give you immediate clues as to what’s going on.
Finally if you ever get stuck, don’t forget the WordPress forum. We’ve all been there and most likely made the same mistake you are making now. If you post your question on the forum, we might be able to help, just make sure you read Andrea’s tips first. Following her advice will increase your chance of success exponentially.