HTML to Worpress

Here’s a mock-up I threw together on my sandbox site as an example. It’s not perfect, but close enough so you can see that it’s fairly easy to modify the theme to get the look that you want. It took about 30 minutes to get the structure right by editing three virtual template files, then another hour to tweak the appearance with the virtual CSS files.

So think of your site as being divided into three sections. The top section would be the header, and that would include things like the navigation menu, the company logo, the site title and description (if any), etc. This area is static, i.e., stays the same for all pages on your site. To replicate this section in Montezuma, I copied over the some of the HTML (i.e., the image tags and the top links, but not the menu code) over from your site’s source into the virtual header.php file. You want to leave the menu code out and use the function call that’s already in header.php that creates the menu.

The bottom section is the footer, and contains your contact information, social media buttons, and copyright info. Again, this section is static across all pages. And again, I just copied some of the HTML from your site’s source into the footer.php sub-template.

The middle section has the dynamic content (the page text), but it also has some static elements as well: the image to the left and the composite image at the top. This is where you would make changes to the page.php file, which is the main template that displays single pages. If you examine page.php, you’ll see that it brings in the header sub-template with a call to get_header right at the beginning of the file, and a call to get_footer at the end of the file to bring in the footer sub-template.

You may recall from reading the documentation that the theme is based on a 12 column grid. What this means is that each section of the page will have a DIV with a class of row assigned to it that spans the entire width of the content area. With each row DIV there can be one or more “column” DIVs which are assigned a class name of col#, where <strong# is a number from 1 to 12, with each number representing a multiple of 80 pixels (80px). An element with a class of col1 will be 80px wide, an element with a class of col2 will be 160px wide, etc. The column elements are nested inside the row DIVs such that their column class # totals 12 (which represents 960px).

For example, the default layout of page.php has a DIV with an ID of main that is assigned the class row, so the main will span across the entire width of the page. Nested within the main DIV is another DIV with an ID of content, and that DIV has a class of col8 assigned to it, meaning it will span 640px across the width of the page. After the content DIV is another DIV with an ID of widgetarea-one. A widget area is a place where you can install plugins that add functionality to your site. The widgetarea-one DIV has a class of col4, which is perfect because 8 + 4 = 12.

What I did to modify the page.php page was to take out the widgetarea-one DIV at the bottom (since you don’t need any widgets right now) and create a new DIV at the top with an ID of divLeftPhoto (the same ID as is being used in the original site). I gave this DIV a class of col3, since the left image is 167px wide and widened the content DIV from col8 to col9 so the column elements still add up to 12. Inside the divLeftPhoto DIV I just copied & pasted the link and image tag from the original site. Inside the content DIV, I copied & pasted the image tag for that composite image from your site.

So all of the above, with regards to modifying the virtual template files, is fairly straight-forward, you figure out what section (header, footer, or page) that an element goes into and copy it into there. The tricky part is determining what CSS to use to create the same look, because you’ll have to override the default appearance of the theme. That’s where learning to use a web debugging tool like Firebug (a free plugin for FireFox) or Chrome Developer Tools (comes built-in with Chrome) comes in handy, because you can see exactly what CSS rules are being applied to different elements on the original site and modify the selectors to override the corresponding rules on the Montezuma site. One tip regarding the virtual CSS files: instead of trying to search through all of the different CSS virtual files in order to find the rule to change, copy or create a new rule at the end of the various.css virtual file; since it gets loaded after all of the other virtual CSS files, rules written in there will override any previous rule with the same selectivity.

Once you get all that done (i.e., the framework), it’s just a matter of copying over all your content into Pages. I also created a copy of your Resources page which you can access from the Mountain High menu item. It uses the same header.php, footer.php, and page.php files as the mock-up home page, but all I had to do was copy over the HTML into a new Page (oh, make sure when you create a page that you use the Text editor rather than the Visual editor, or your HTML tags will not be saved correctly).

Whew, that’s enough for now. It’s probably somewhat overwhelming, especially since you have to learn how WordPress works as well, on top of trying to figure out the theme. Don’t be afraid to try different things, there’s always reset button at the bottom of all of the template and CSS files in case you muck things up (but make sure you use the thinner button to reset the options for just that page, instead of the Reset All button that will reset all of Montezuma’s options). If you have any specific questions, feel free to post.