Creating a Wordpress Theme from Static htmlWordpress theme creation from static html
Create a WordPress theme from static HTML: Preparation of the markup
I did a small (and I admit very unscientific) poll of other WordPress programmers last year. How did they create their first WordPress theme? Have you hacked an already created design or have you started with your own static HTML and converted it into a design? Most of the folks I talked to used the second way - they were all seasoned front-end designers who had created websites with HTML and CSS and found it simplest to take their HTML already in place and turn it into a theme.
You begin with a simple HTML document (with a seperate stylesheet) and turn it into a WordPress theme with a number of templates and a multitude of hashes, features, and templates contained to use ribbons, menu items, widgets, and more. I' ll show you in this first step how to get your HTML ready before you convert it to PHP to make a design, which we'll cover later in the session.
You only need the basics of HTML edit functionality for this tutorial: What should you do to get your HTML ready? Theoretically, you could take any HTML that is good, put the right templating tag and ribbon in it, and turn it into a theme, but I would suggest you be a little more thorough. This is because WordPress adds HTML items and categories when you begin to include functions such as menu items and widgets, so it makes good business of working with these items and categories at all.
I' ve sketched out the class and ID generated by WordPress in a former workshop, so you might want to get familiar with them before proceeding. A further excuse is to make sure your mark-up is standards-compliant and in HTML5. When you convert an old static Web site to WordPress, you may be working with old HTML that is in an older release of HTML and that, quite openly, needs some cleaning up.
However, I cannot tell you how to clean up your mark-up, but I can give you tips on using HTML5 with WordPress and how to structure your work. A number of HTML5 items such as and have apparent places they should go in a WordPress theme - I've been blogging about them, but the way each of them should be used is evolving, so use your judgment.
However, in the HTML document I will be working with for this Tutorial, the texture is as follows: You can see that this uses a number of HTML5 tags as well as some that precede HTML5. The next part of this tutorial will show you how to divide this tree into templates, but right now you keep everything in one single filename named index.html.
Unless your mark-up has a similar structure and is not in HTML5, take some your own moment to make the appropriate changes. It is important that the following areas of the page are clearly defined: the contents - in this case I use . I also added extra styles class - these are all object-oriented so they can be used throughout the theme and on the pages I will be adding later in WordPress. The bottom - in .
It tends to put another item in my bottom line that surrounds the widgets - I call this . Next is to work through your mark-up and include some class and id' that will be issued from your completed design. There is no impact on your design at this point, as the class and ID are added by PHP features that you will use later.
But if you are adding the correct class and ID s now, use them in your style sheet so that your style will still work once you have transformed your HTML into a WordPress theme. Go through each part of the mark-up in that order. The WordPress does not routinely append class and ID to the page name and descriptor, but it makes good business of using those that match the WordPress terms.
To give the user of your theme full control over the theme shown here, you can set it up as a widget area. I' ll show you how you can build widgets later in the session, but only adding the appropriate class(es) for now: Most importantly, you can easily include image class in your work.
Wordprocess will generate image categories for you, depending on how you apply them to the Media Manager, so you need to make sure that they are all part of your design. There are two pictures in the mark-up for my dolly page - one is big and the other is middle and shifted to the right.
Notice that in your definitive design you are removing the coding for these pictures as they are added by WordPress but it will help to insert them so that you can properly setup the style. After adding the categories to your mark-up, you need to make sure that you have included the picture categories in your style sheet, so please append the following: maximum width: 100%; margin: 0; height: aut; width: aut; #content . alignleft, float: left; marginal:
4% 4% 4% 4% 0; #Content right-justified, float: right; margin: Twelve px; If you look at my sample page, you will see that the first picture is 100% the width of the contents and the second picture is moved to the right with borders:
There are also widgets in the side bar and bottom bar, so you need to include the appropriate class (es) in your mark-up and styles using the class (es) in your spreadsheet. Here's what the side bar mark-up looks like: There are four widgets in the bottom line mark-up, each of which can accommodate more than one broadget.
Now your HTML document is formatted and can be transformed into a number of theme documents.