Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Developing with WordPress

Part 3: From Static to WordPress


WordPress rocks my socks. It’ll rock yours too.


In the last write-up, I talked about getting started with custom WordPress theme designs. I went over some design processes and some important key things to remember when coding the website . In this entry, I want to take a look at the process of converting a static website to a dynamic WordPress site.

I won’t get too detailed about every part of the process. Instead, I will go over some brief overviews of each step of the conversion process and share some great resources on how to complete a conversion with your own project.

Keep in mind that the conversion won’t be a one step process. There are several steps, so it may seem like converting the static site is taking forever to happen. Just bear with me…

 

Underscores Starter Theme

We have our basic design coded into a static website. The next step is to create a “skeletal” theme to use for the conversion of our design into a WordPress theme.

Instead of creating the skeleton theme from scratch, we’re going to use a tool called Underscores.

No, I don’t mean underscores like the ones in grammar. I mean Underscores, the WordPress starter theme!

 

Check out Underscores. It’s awesome and you will love yourself for it.

 

Underscores is basically a barebones theme and will make your development life easier. Instead of creating all the necessary files from scratch in your editor, you can download the basic starter files from Underscores. Think of it as a “blank WordPress theme template” that saves us time. You could recreate these files yourself but it’ll just be tedious and unnecessary.

Just fill out the options on the Underscores.me site and download the Underscores starter theme. Unzip the folder and open the folder in your favorite text editor.

This Underscores theme will now serve as the base for your WordPress theme conversion. All the files and folders within the download will need to be modified to show your theme’s custom layout and design.

 

 

My favorite thing about Underscores is not the files, but the preconfigured file tree that’s created with each download. I don’t have to worry too much about remember which folders I need and which files go where. It’s all pre-built into the download.

 

Installing WordPress

 

 

We have our static coded site and a starter theme. However, we don’t have WordPress installed anywhere. You can’t really develop a theme for WordPress if you can’t test it out and use it on WordPress, right?

Go to WordPress.org and download a fresh copy of the latest stable version. You don’t want to use a nightly build or any version that isn’t finalized because there could be bugs and errors. Once you download the WordPress installation, do NOT start installing it yet.

 

WordPress Database

WordPress requires a database so you can store and modify your content. Without the database, any new content added or updates that is not hard coded will be lost once the website is refreshed or reloaded. WordPress uses a database called MySQL.

To set up this database, you will need to modify the wp-config-sample.php file for setting up a local database.

 

 

This file is key to setting up your database. Keep in mind that this is a local installation that we’ll be using and the database will not reflect the final theme. Once modified, you’ll save this file as wp-config.php and WordPress will automatically recognize the new file.

Now we can continue with the WordPress installation!

To install WordPress locally to your machine, use a local server environment like MAMP or XAMPP to serve the WordPress installation folder. I personally use the free version of MAMP and it does the job for me.

 

MAMP running on my Macbook, with the server on.

 

Go to the localhost address that was configured in MAMP/XAMPP and complete the installation following the prompts. The installation will request your database information from the wp-config.php file, so make sure you have that available!

By having WordPress installed on your local machine, you can run WordPress and install your theme just like you would on a web host on the Internet. This is also a great way to continue developing when you don’t have Internet access and you want to preview your work in a browser.

Install Underscores Starter Theme

Now that WordPress is installed, you need to install and activate your Underscores starter theme that you’ve downloaded. Keep the file as a compressed zip file and install it using the WordPress Dashboard.

We want to install this starter theme and activate it because when we begin to convert our static website design, we can monitor the changes to each file that we’re making.

The installation of the file, on your local machine will be located in the themes folder inside of your WordPress installation folder. Once the conversion is completed and finalized, we will be compressing this theme’s folder to use as the completed WordPress theme.

Keep in mind, once the Underscores theme is installed, you won’t see any real difference. WordPress will look plain and boring… but that’s okay! We’re gonna make it pretty once the theme is done.

Let’s start converting this thing already!

 

Converting to WordPress

So here’s the part you’ve been waiting for! Converting that static website you coded in HTML/CSS/Javascript and making it into a beautiful WordPress theme. This part is usually the most exciting for me as I get to really make the site “come to life” through the use of a dynamic CMS.

Now, remember you already coded your design as a static site? Well, since the code is already written, you can simply copy and paste your code into the appropriate locations in the Underscores theme to begin converting them.

As you may have noticed on some websites, most of them have a consistent navigation bar (header) and a footer. No matter which page you are on, they are pretty consistent. However, to recreate this “feature” on a static website, you’ll have to repeat yourself each time you code a new webpage for the site. Sure, you can copy and paste the code but it’s still not DRY (Don’t Repeat Yourself) code.

In WordPress, we solve this using something called a template. This concept is not unique to WordPress, but it’s a very prominent technique used to build and develop themes.

Imagine being able to take just the navigation header of your website, or the footer, place it all in one file and have it automatically insert itself into every new page you create. Wouldn’t that be cool?

That’s exactly what templates do. In the Underscores theme, you’ll notice that there are a number of PHP files that are actually template files. Each PHP file has a unique and semantic name that’s easy to figure out what its purpose is.

Some examples of the PHP template files are:

  • archive.php – Your blog archive design
  • header.php – The header/navigation menu you created
  • footer.php – The footer design you’ve created
  • index.php – The main landing page or blog roll
  • contact.php – Your contact page
  • content.php – Individual blog post layout

So if you want to create that header or footer, you can copy and paste your HTML code from your static website and paste them into the header.php or footer.php file. Any content or design features that are static can be left as is, while any sections that should be dynamic will be replaced with a PHP tag and script.

Once you’ve modified the header.php or footer.php templates, you can then call for each template inside of pages that you want to see them populate. For example, you would call for the header template first in the index.php file, whatever else you want sandwiched between, followed by a call for the footer template.

 

Line 10 in this code is a PHP call for the header.php template

 

WordPress will read and display all HTML onto the browser. Any line in the PHP file that has a template call will insert the HTML from the template as if it was already there.

I do want to note that in my image above, all the WordPress functions, methods and template calls are in blue. All the HTML code is highlighted in red text.

Now that we know what templates are, we can now identify key templates that we need for our WordPress theme and begin to convert them by modifying each file. Most websites will need modifications to the index.php, archive.php, content.php, contact.php, header.php and footer.php files.

All libraries that your design will be dependent on should be located in your assets folder, including all Javascript files, images and additional CSS files.

 


Helpful tip: It is best to include actual files of the libraries and not link to a CDN. This prevents a library update from breaking your theme and rendering it unusable. Download the libraries and place them in your assets folder.


 

As you modify each file, you can actively check your WordPress install on your local server for changes and updates. If you modified the header and added a custom navigation menu, it should now appear on your local WordPress site no matter which page you are on. If not, go back and check the file for errors.

 


Tip: Typical errors are syntax errors like forgetting a closing PHP tag, incorrectly using single quotes or double quotes or loading a resource from the wrong path or link.


 

Repeat the modifications for all the remaining pages of your static website design with the corresponding PHP template files. Be sure to test each page that you are creating for working functionality such as responsiveness from Bootstrap or a Javascript feature that you’ve previous included with your design.

Also, don’t forget to include all your script tags for Javascript and jQuery files in your footer.php file.

 

WordPress Resource

A huge and amazing resource that will become your best friend is the WordPress Codex. The WordPress Codex is the go-to collection of documentation, list of key features, support forum and troubleshooting guide to the WordPress experts.

 

 

What’s great about WordPress is the huge support it has from developers from all over the world. That means if you were to ever experience any trouble setting something up or modifying a template, you are very likely to find a solution using the WordPress Support Forums.

It’s helped me out of sticky spots more than I’m willing to admit! The WordPress Support Forum usually has discussions about errors, problems making certain PHP WordPress function calls and more. You can use their search to find a quick answer for pretty much anything.

When I first went on the WordPress Codex site, I was a bit intimidated but with a little bit of browsing and looking up some questions I had, it became very easy to navigate. I could say the same about MDN back when I first started learning Javascript a few years ago, but now I can’t live without MDN!

 

Wrapping Up

This entry is already becoming the longest entry I’ve written so far. While I didn’t intend to write a full tutorial on WordPress theme development, I did cover the overview of what key steps are needed to create a custom theme for yourself.

Designing and building a custom WordPress theme isn’t for the faint of heart. It’s a pretty long process that most people don’t want to deal with because there are a lot of moving parts and many technologies involved. I guess that’s why premium themes are popular! If you’re a developer who enjoys the creative process and the tinkering nature of converting a static page into a dynamic CMS-based site, then this is a totally rewarding process. I was super intimidated at first at the number of steps required to develop a theme but I’ve come to really enjoy it. In fact, this site was built using a custom developed WordPress theme and it’s made my life much easier to update and add new projects and blog entries.