WordPress templates
Reveals how it’s possible to take almost any website theme and convert it to a Wordpress template, which comes with a host of benefits…
Kent Elchuk explains everything you need to know to take almost any website theme and convert it to a Wordpress template.
We’re going to look at building a custom Wordpress theme using any basic website template or bare bones css responsive framework such as Bootstrap. Although all of the steps will be explained, this procedure will be much easier for those who have basic HTML and responsive design skills. This article should come in handy for anybody who wants to convert an existing static website (or almost any other website for that matter) to Wordpress.
Because Wordpress is free, you’ll have complete ownership of the site, and can even host it on your own home network for free. And since it dominates the CMS (Content Management System) market, learning how to create a custom template is useful knowledge for web developers and website owners alike.
If you want another reason why it makes sense to customise Wordpress, consider this. The DIY website builders like Godaddy, Wix and Weebly may spend lots on advertising, but the open source Wordpress is the people’s choice. Here are some stats that back this statement up: https://w3techs.com/technologies/ overview/content_management/all.
Unlike the competition, a Wordpress website is owned and the code is yours. With the hours you could spend on other DIY models, more often than not you’ll end up with coding headaches. And if you decide to leave the non-open source collection of DIY builders, then you’ll be back at square one.
We’ll keep this tutorial as simple as possible to avoid any confusion and with enough details to ensure that it remains informative. By the end of this article, you’ll be able to make a custom menu with links to single pages or a blog category. Because Wordpress handles various types of web content such as pages and categories differently, you’ll need code that will output the content of choice.
Be a Wordpress admin
Once you’re logged in, there are plenty of features and button links at your disposal. If this is your first experience with Wordpress, don’t worry. This tutorial will take you through the template-creation process, which includes how to set up pages and posts to check that the template is functioning properly. If everything goes to plan then the installation will complete quickly and it’ll take at most a couple of minutes to prepare a custom wp-config.php file.
When you log in to the Wordpress admin panel, you can hover over Appearance on the left column and select Themes. When you do this, you’ll see a few themes like Twenty Eighteen, Twenty Seventeen, Twenty Sixteen and Twenty Fifteen.
Since we want to make our own template from scratch, we’ll add our own to this selection.
New theme tunes
The first step to developing a new theme from scratch is to create two files; one called style.css and index.php. The index.php is the main workhorse for loading the theme and required files, while the style.css file can be used to create styles.
The two files can be added into a new folder located inside the wp-content/themes folder. If you look in there now, you’ll see the other themes like twentyseventeen. For simplicity, we can call this folder MyTheme, noting that it contains the files index.php and style.css.
In all likeliness, you already have a template that we want to use and it has a file structure that emulates the look we want in a browser. To make this ours, we can open the file in a browser and copy the source code into our index.php file.
The next step is to copy all the folders that contain the css, javascript, fonts and other resources. For example, they could be located in a single folder called
assets. For our purposes, we’ll assume assets has everything we need to display our pages. The next step is to add the following code to the style.css file. Note that this file is required by all Wordpress themes. The css file should contain a few lines like those shown below, albeit with a few changes to the text such as the author and theme names. /* Theme Name: MyTheme Author: Kent Elchuk Description: Site template converted to WordPress Version: 0.0.1 Tags: bootstrap */
The next step is to navigate to Appearance>Themes and Activate the new theme. This enables you to build and test at the same time because it’ll be used for your site theme.
Now it’s time to make sure you have the proper links to css and javascript. Since those files will be inside our theme folder, we only need to add a little code in front of the old paths. We’ll add the following to the beginning of all paths: “<?php echo get_bloginfo(‘template_ directory’); ?>/” . This ensures that we can compare the original and new reference, as shown below: Original <link href=”assets/plugins/bootstrap/css/bootstrap. min.css” rel=”stylesheet” type=”text/css”/> Altered <link href=”<?php echo get_bloginfo(‘template_directory’); ?>/assets/ plugins/bootstrap/css/bootstrap.min.css” rel=”stylesheet” type=”text/css”/>
If you have the entire HTML and the proper folder(s) in place then you’ll see the exact same page as we would from the simple HTML file. In fact, we may as well open our Wordpress site in a browser and check out the results. That was the easy part. Now we need to separate
index.php into three files. To do this, we cut the header code from the index.php file and paste it into a file called header.php, which is in the same folder.
After we cut all the code we want for the header and paste it into header.php, we add the php code <?php
wp_head();?> above the closing </head> tag. Within the index.php file, we add <?php get_header(); ?> to the top of the file where you cut the header code.
Those code pieces we just added are pretty much self-explanatory. The function wp_head() informs Wordpress it is the head. The other function get_ header() does just what it says. By default, Wordpress knows to get the header from the file called header.php.
With other Wordpress templates, including those that come shipped with Wordpress, you’ll see that the
header.php file is located in most theme folders.
Page titles
For obvious reasons, we want dynamic page titles every time a new page opens in the browser. The code between title tags can be added to the head in place of the old title tags. <title><?php bloginfo(‘name’); ?><?php wp_title(); ?></ title>
After that, we repeat the procedure with the footer code. When we paste the code into footer.php, we add
<?php wp_footer(); ?> just above the closing </body> tag. Then we add <?php get_footer();?> into the bottom of the index.php file where the code was cut out.
These two functions work in the same way as the header. One defines the footer code while the other one calls it.
Once we’ve done this, we can refresh the page and see how well it matches the original html. It needs to be a precise match. If it isn’t, we must check the syntax and links. Remember that all links need <?php echo get_bloginfo(‘template_directory’); ?>/ in front of the original link. When we say all links, that not only refers to css and javascript, but images too. Thus, a link like <img src=” assets/img/blogging.jpg” needs to be <img src=” <?php echo get_bloginfo(‘template_directory’); ?>/assets/img/ blogging.jpg” . If we want to add a sidebar, we can cut the sidebar out from the index.php file and move it to a new files called sidebar.php. To retrieve the data, we can use <?php get_sidebar(); ?> in the same spot to cut the
code in index.php. Using a responsive framework like Bootstrap makes it easy to use one column as content and a slimmer column for the sidebar.
Now, let’s get down to the content. In terms of width, the content is whatever we decide to have. For example, if we use a Bootstrap side bar that has the class colmd-4, the content would be the content inside the matching column in a row called col-md-8.
Here’s an example of a typical row with two columns, the smaller being on the right. We use the ‘row’ and ‘colmd-X’ classes from Bootstrap since it is the most popular responsive framework out there, and, in all likeliness a theme would be built to be responsive.
As you can see below, the simple four lines of code will host the main content and sidebar. <div class=”row”> <div class=”col-md-8”></div> <div class=”col-md-4”></div> </div>
For the sake of discussion, this tutorial will use those two columns mentioned above to separate the content and sidebar.
The wide column <div class=”col-md-8”></div> will be in index.php. We could only use this file to output data. On the other hand, we can include other parts.
So, to load extra content into index.php, we simply add <?php get_template_part( ‘content’, get_post_ format() ); ?> . Thus, a simple content section in the index.php would look like the code below. The file that would be included would be called content.php, which would also live in the same folder. <div class=”col-md-8”> <?php get_template_part( ‘content’, get_post_ format() ); ?> </div>
Although we don’t need to create content.php and use the function get_template_part( ‘content’, get_
post_format() ); . Doing so can help to split files into smaller, organised pieces.
Meanwhile, once we create the content.php file, we will want to add more code to both files so we can load dynamic posts and pages. The code below shows the additions to the last set of code in index.php. <div class=”col-md-8”> <?php if ( have_posts() ) : while ( have_posts() ) : the_ post(); get_template_part( ‘content’, get_post_format() ); endwhile; endif; ?> </div>
Introducing content
For your content, you’re likely to want something in the
content.php file like the code below, which positions the title on top within <h1></h1> tags and links back to the original post. This way, when you click a category and see a list, you can then go to a specific post: <div class=”row” style=” background: none; “> <div> <div class=”col-md-12”> <a href=”<?php the_permalink(); ?>”><h1 class=”blog-post-title”><?php the_title(); ?></h1></a> <h1 class=”blog-post-title”><?php the_title(); ?></ h1> </div> </div> </div> <!-- POST BEGIN --> <div class=”blog-post”> <?php the_content(); ?> <p class=”blog-post-meta”><?php the_date(); ?> <em>by <a href=”#”><?php the_author(); ?></em></ a></p> </div> <!-- POST END --> Bring in a sidebar At this point, we can create a static sidebar for your site. Within the sidebar, we can use various Wordpress builtin functions to load those common Wordpress features such as categories and monthly archives.
Since the content above was inserted within a column with the Bootstrap class col-md-8 , we can add the code to a sidebar.php file into a column with the class col-md-4 . The side bar below will list the archives by month and list the blog categories. The two lines of code below show how to do just that. <!-- BEGIN SIDEBAR --> <div class=”col-md-4”> <?php wp_get_archives( ‘type=monthly’ ); ?>
<?php wp_list_categories(); ?> </div>
We’ll reiterate the setup of the content and sidebar in some different terms just in case of confusion. The Bootstrap class called row(class=”row”) is a div element that contains the main content and sidebar; which are two div blocks.
The content will be in the content.php file while the sidebar content will be located in the sidebar.php file. The key is that the <?php get_sidebar(); ?> function is located just before the closing </div> tag for the beginning tag <div class=”row”> .
After modifying the index.php file, we can reload the site and we should see the post content. If the site is brand new, we see content from the “Hello World’ post because the default for Wordpress is to show all posts.
Let’s add another post and load the URL in a browser. Thus, if we create a new post and call it Test, we can view the page and see the new title and content we wrote in the editor. In case we forget how to make a post, select Posts>Add New. Now we can add a title and