Making the Transition from HTML to WordPress. Where do you Begin?

Making the Transition from HTML to WordPress. Where do you Begin?

Many WordPress users start out their lives on the web using a static HTML site. But then they discover WordPress and realise how powerful web publishing can be. In the first of our technical columns, Christine takes a look at how you take the first steps in moving from HTML to WordPress.

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.php has all the HTML that generates the header,
  • index.php contains the main content of your site and pulls the latest blog posts
  • sidebar.php generates the sidebar content
  • footer.php creates 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.

Comments

  1. Kevin Fukawa says

    Hi Christine – I was at the meeting too.

    For beginners looking to experiment with WordPress locally (i.e. on their own computer), I would recommend trying Instant WordPress which can be found here: http://www.instantwp.com – it’s free, and will allow you to setup a local version of WordPress without having to install and configure your own server software.

    I’d also recommend that beginners start their experimenting on the default theme that comes with WordPress. While there are thousands of free and premium themes to choose from, it’s probably a good idea to start with a solid theme built by the same team who created WordPress.

    • says

      Hi Kevin,
      Thanks for the tip. I haven’t looked at instant WordPress, but I’ll check it out.
      You’re absolutely right about looking at the default theme. I’ve learned tons from both Twenty Ten and Twenty Eleven and still refer to them quite often.

  2. says

    I think this isn’t so much about design though about development, the use of the term web designer is a little confusing as a result unfortunately.

    There is a lot more design wise that also needs to be taken into consideration when moving from html to WordPress. It’s a different platform to a static site and really needs to be designed with that in mind. This need gets more and more then more in depth you go into CMS or by adding plugins such as BuddyPress.

    Personally, I always would suggest someone starts from the point of WordPress when starting out. Step one I always recommend is look at the theme that ships with WordPress. You probably could switch that around now for http://underscores.me/. I still remember my Kubrick exploring days fondly :).

    I’m fairly anti fitting a solution from something else into a different box without looking at how it’s formed. You do tend to unfortunately get weaker designs that way. This is why I’d always suggest to other designers to know the system you are designing for.

    Another great learning tool can be to go right back and look at wireframes – explore the common elements of a WordPress site (there are many). Break it down, see how you can use each. Then when you do your design it will play to the strengths of the platform you’re using. I do say platform in the loose sense meaning WordPress.

Leave a Reply