Powered by WordPress

I have been focusing a lot of my time lately on learning how to develop WordPress sites. Not only to use it as a blogging platform, but also as a full-blown Content Management System (CMS) for client sites like this one. When the new year rolled around, I thought it was the perfect excuse to get my own site onto WordPress.

Reasons for doing so were this: On my old site which consisted of static HTML & CSS files, it became a pain if I wanted to update a site-wide block of content like the header or footer; because I would have to open every HTML page and be sure the changes were copy/pasted into each one, saved, and uploaded to the server. I also wanted to be able to blog more easily and (hopefully) frequently. But probably the most important reason was to test out how easily it could be done with my current base knowledge of the platform.

Here’s how I did it:

The first step: download WordPress and install it on my server. With the WordPress 5-minute installation and easy-to-follow instructions, this was a breeze. With all things WordPress, the documentation and community of supporters are unparalleled…which makes finding tutorials or help with any problem that needs troubleshooting just a quick search away.

For a theme: I chose Viewport Industries’ Starkers, which is an extremely bare-bones theme (hardly a theme at all, more like a base to build a theme upon) that comes with no styled elements or excess baggage. Perfect for a blank slate and the complete control that I like to have with a project. By starting from scratch with the Starkers theme I know exactly where everything in the project came from regarding files, structure, hierarchy, and organization. No mess dealing with another developer’s code, which can oftentimes be a pain to manipulate.

Starkers Theme

After changing the theme name to ‘Lewek’ and updating the theme screenshot, I activate it and alter a few of the default settings to better suit my needs for the site. Here I’ll also add a few key lines of code to the functions.php file that will allow custom menus (which I’ll use to create and save my header and footer navigation), and other alterations including a function to help out with responsive images and customizations to the admin.

Custom Page Templates: Now I’m ready to add in all of the site’s pages, by creating a separate custom page template for each. Each page will have a separate file in my theme folder labeled with “page,” then an underscore, then the page name like this: page_contact.php, page_work.php, page.homepage.php, and so on. The basic structure of these pages is pretty straight-forward: identify the template name, pull in the header, the page title, the page content, and the footer.

Grab the HTML & CSS: Next all I have to do is copy over the HTML code that was written from my static site pages, and paste it into the new page templates I set up in WordPress (also be sure to point the correct page to its corresponding template in the admin). Regarding the CSS — some styles I was able to copy over directly from the old site. The rest were written newly for the WordPress version. It actually became more of a merge and optimization of old and new stylesheets, getting rid of excess and streamlining for the future.

Finishing up: Finally I’ll install and activate the very popular Contact Form 7 plugin to use on the Contact page.  I also took a few blog posts I had written on my Tumblr to fill in here and test out the functionality to be certain everything is working correctly — and to have some variations of content to finish up the stylesheet.

Now the site is up and running, looking as fine as it’s predecessor but now with the complete blogging functionality and user-friendly admin of WordPress.

Resources

Further Reading

 

Tags: