Help!
That’s the first reaction you might have if you are trying to figure out your WordPress conversion tasks, right?
Even if you are just a beginner and not really a web expert, you can definitely create a WordPress theme for as long as you know how WordPress works.
If you’ve been using WordPress as your website platform, chances are, you’re tired of using generic WordPress themes for your site. You might even think of just doing your own theme to have your preferred styles and features.
Customizing Your WordPress site
You can design your ideal site by creating a mockup in Photoshop and then convert the PSD file to HTML and CSS. Afterwards, you can then convert it to a fully functional WordPress theme.
Designing websites using Photoshop PSD files and then converting it to WordPress themes is one of the easiest shortcuts in web design and development today. It is the most ideal way to provide your client a site with small amount of time and with ease.
It is easy-peasy, believe it!
This tutorial will help you learn how to convert your HTML and CSS static site to a fully functional WordPress blog theme.
Converting HTML and CSS static site to WordPress theme will be your shortcut in web design and development. This means you can easily deliver your customer’s site at ease within a small amount of time.
Reading this tutorial, you can simply gain knowledge on how to create your own WordPress theme.
Disclaimer: You need to have a background knowledge about HTML, CSS, JavaScript and PHP.
Here Are Your Expected Results
At the end of this tutorial, you will learn how to convert your plain HTML and static site to a fully functional WordPress blog theme. This tutorial will give you insight about WordPress blog theme templates which we have stated in the first part of the tutorial.
This tutorial will encourage you to apply the following coding standards to your WordPress theme:
Validate your HTML and CSS codes first. You can use service like W3C’s validation site to ensure that your markup and styles are valid.
Ensure that your WordPress code syntax won’t cause any issues. You can always visit this site to check your codes if it aligns to the WordPress Coding Standards.
Always test your code on all browsers if possible. Check if your site works across all major browsers to avoid any further issues on your theme.
Test your code on multiple devices. As mobile and tablets users grow it is ideal if you would check if your site is responsive and is working across modern devices.
What You Have Learned So Far
In part one of this tutorial we’ve worked on the following:
Copying files to the NeoBlog WP directory
style.css
screenshot.png
Activating the theme
If you’ve been following this tutorial, the WordPress theme was named via style.css and a screenshot was added for the theme to be identifiable at the WordPress admin panel.
After doing this, the theme was activated. Really, there are more things to do. Familiarize with the steps covered in the first part of this series to enjoy this second serving for you will be learning things a notch higher.
More focus would be on the rest of the WordPress templates that have defined on the first part of this tutorial.
OK, without further do, let’s finish the remaining templates so that a fully functional WordPress theme can be achieved.
What You Should Expect
To be specific, you will work on the following:
functions.php
header.php
footer.php
searchform.php
sidebar.php
index.php
single.php
page.php
page-about.php
page-contact.php
page-contact.php
search.php
content-search.php
comments.php
404.php
Resources You Need
NeoBlog HTML and CSS theme
Basic Knowledge of WordPress Codex
Intermediate Knowledge of PHP and jQuery
What’s the Fuss about This Tutorial
In the first part of this series, you were how to prepare your HTML and CSS files for WordPress and then brand and activate the theme.
In this last part of the series, you will learn what codes each remaining WordPress template must have to build a working WordPress theme.
At the end of this tutorial, you will have the same output just like the demo image file we posted in part 1 of the series.
STEP 1 – Defining constants and registering navigation menu support
The theme is already active! Now add support to the theme directory as well as the navigation menu thru the functions.php. Go ahead and create the functions.php file first on the root directory of the NeoBlog WP theme.
Next, define the constants for the theme directory. Go ahead and copy the code below to the functions.php recently created.
(Note: Since this is a php file all of the functions and codes relating to php must be enclosed with < ?php ?> tag.)
You also need to register a function for the navigation menu. Below are the functions needed to make a working navigation. Go ahead and grab it.
An add_action hook has been added to register the navigation menu. The first argument is the tag (to which the action will be added later) and the second argument specifies the register_my_menus function to call.
To learn more about this, check this page.
STEP 2 – Creating header.php
Now, create the header.php file. Open index.html and copy everything from the opening DOCTYPE declaration to the ending tag and then paste it into the header.php file created on the NeoBlog WP theme folder.
Some of static HTML tags can be replaced by the WordPress built-in functions such as the language, meta information, body class and so on.
Add the wp_head hook before the closing head tag. Use this hook by having the function echo the output to the browser, or by having it perform background tasks. For more information about this, see the WordPress Codex.
For the navigation menu, use the wp_nav_menu function to display a navigation menu created in the admin panel of WordPress.
The theme_location parameter will display the menu assignment to the location it was set. Otherwise, if it was not set, the parameter fallback_cb will determine what is displayed.
To learn more about the wp_nav_menu, check this page.
Copy the code below and replace the static html header information just copied.
STEP 3 – Creating footer.php
For this part, create the blank footer.php and once again open index.html from the NeoBlog HTML and CSS theme folder. Copy everything from the sharing idea section to footer section. Then paste it to the footer.php file on the NeoBlog WP theme folder.
You must have the same HTML codes below.
Same with header.php file. Again, replace some of these HTML tags to the WordPress built-in functions such as the link to the homepage, the current year and the blog name information.
Check out the codes below.
STEP 4 – Working with searchform.php
Next on the list, add the markup (with built-in WordPress functions), which will display a search box on the sidebar. Go ahead and create searchform.php and copy and paste the code below on it.
(Note: Most of the classes you see here came from the search box markup of index.html file)
Notice that the the_search_query function as the value of the text box was used. This will simply display the search query for the current request, if a search was made.
STEP 5 – Working sidebar.php
Before creating the sidebar.php, register the sidebar on functions.php file. Go ahead and open functions.php and add the codes below on it.
The codes above will build the definition for a sidebar and returns the ID.
Next, let’s call the sidebar. Create the sidebar.php file on the root directory of the NeoBlog WP theme and paste the codes below.
The codes above contain function that calls main-sidebar widget callbacks and prints the markup for the sidebar but, first, it will test if the sidebar is active before proceeding.
STEP 6 – Populating the Index File
After adding all of these template files, work on the Home Page – the index.php file. Go ahead and create first the index.php on the root directory of the NeoBlog WP theme.
Now, put some codes on thew index.php file to display the changes.
Now, let’s now check out the front page of the NeoBlog WP theme and see results.
Notice that the header and the footer are on their proper positions except for the sidebar.
To add the contents inside the home page, open the index.html file and copy the blog area section up to the closing div tag of box-layer align-center page-nav class and then paste it just under the get_header function. You’ll get similar codes below.
The codes above will only show a static display of the theme. To make this dynamic, structure the WordPress loop within the markup of the blog area. Copy the code below and replace the blog area just copied from index.html file.
The WordPress loop are PHP blocks of code used by WordPress to display posts. Using the loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within the loop tags. The WP loop usually comes with these blocks of PHP codes:
The codes above is the basic loop along with the markup; however, it has to display the blog information using the following WordPress functions:
the_permalink – Displays the URL for the permalink to the post currently being processed in the loop
the_title – Displays or returns the title of the current post
the_author_posts – Displays the total number of posts an author has published
the_author - Displays the name of the author of the post
get_the_date – Retrieves the date the current $post was written
the_category – Displays a link to the category or categories a post belongs
the_post_thumbnail – Displays the Featured Image for the current post, as set in that post edit screen (more on this below)
the_excerpt – Displays the excerpt of the current post after applying several filters to it, including auto-p formatting which turns double line-breaks into HTML paragraphs
With regards to the featured image, use the code the following codes.
First, test it if there is a featured image set on the WordPress post panel. If the statement is true, it displays the URL of the post and the featured image itself.
Notice that an array is added with a class opacity-hover box-layer img-responsive. This is a way of adding a class in the Featured image to make a nice hover, border and box shadow on it.
But, doing this won’t display the featured image. You need to add functions first to register the featured image. Copy the codes below and paste it into the functions.php.
Great! The featured image will now appear. Next, add function to remove brackets, ellipsis or the hellip word at the end of the excerpt (which is the default display of the excerpt).
Open the functions.php and add again the following codes.
Next, you will tinker the page navigation that was already added on the index.php file. The following code will call the wp_query, a class defined in the WordPress core that deals with the intricacies of a posts (or pages) request to a WordPress blog.
It will then set the previous_post_link and next_posts_link function to add a navigation to the blog post list.
Check out the code below:
As a final touch, place the get_sidebar function inside the col-md-3 col-md-offset-1 margin-sidebar div along with an HTML5 aside tag to make it float on the right side of the page.
Check the code the below.
As a review, the index.php will contain all of the following PHP codes. Check out the code to avoid missing something.
STEP 7 – Working with single.php
Now, to display each individual posts in a blog page, create the single.php file and then copy and paste the code below.
There is for the comment section. Check out the codes below.
This code will check if comments are open or at least have one comment. It will load up the comment template (more on the comment template later).
STEP 8 – Working with page.php
After working on the blog page, work on the regular pages. Create the page.php file and then copy and paste the code below.
Again, there is nothing new to this file except that it doesn’t have the comment section since this is a regular page.
In the next 2 files, create 2 WordPress built-in Post Types template. These are pages that display page layout differently.
STEP 9 – Working with page-about.php
For this part of the tutorial, first create a php file and call it page-about.php. Since this page is focused on the details about the website owner, it just contains plain HTML codes along with the header, sidebar and footer.
Add a comment at the beginning of the page-about.php file to make sure WordPress will treat the file as a page template.
Copy the codes below and paste it to the page-about.php file.
STEP 10 – Working with page-contact.php
Many WordPress plugins can add a contact form to the blog, but a plugin is sometimes unnecessary. For the page-contact.php file, add a little bit of PHP and JavaScript codes. First, go ahead and create the page-contact.php file.
Now, create a simple contact form. Simply paste the following code on the page-contact.php.
What has been done here is simply to make sure that the form has been submitted and filed correctly. If an error, such as an empty field or incorrect email address occurrs, a message is returned and the form isn’t submitted.
Next, create the form and display the error messages below each text box and text area field.
The form is now working but you can enhance it further by adding client side verification. To do this, use jQuery and the validate jQuery plugin.
First, download the validate plugin and then place it on the js directory on the NeoBlog WP theme. Add the following links to the header.php file before the closing head tag.
Now, create the verif.js file and put the jQuery code to enable the validation. Here are the codes:
Great! The contact form has just been created. The form will now validate every input and simply picks a form element with class required and verifies if the form is properly filled.
Note: Use a plugin if doing the coded above is too difficult.
Try Contact Form 7, a very powerful and flexible plugin that adds a contact form to the pages.
STEP 11 – Assigning page templates to pages
Cool! The page templates have been created. To make them work, assign them to a page.
For this part of the tutorial, create first a page from the WordPress admin panel and then assign a page template to it.
To do this, go to Pages -> Add New and then give it a title About or Contact.
Now to assign a page template to the page, go to the right side panel and look for Page Attributes panel on the right side. Under template, select the preferred template and hit Publish.
Now you can check the page if it works in the front-end.
STEP 12 – Working with search.php
The structure of the search box is now set up but it is not working yet; it needs some functions to make it work.
For this part of the tutorial, add the functionality to enable the search query on the search box.
The codes below will have some PHP codes for the search to output the results; otherwise, it will return an error message: “Bummer! No results found”, which is wrapped in an H2 tag.
Create first the search.php file and grab the following code below on it. Otherwise, if there is a result returned, it will display the result within an H2 tag.
Note: The codes below contains HTML tags based on the page.php and single.php
STEP 13 – Working with content-search.php
The search.php will control the layout of the search results; however, add the loop of the search to output the results.
For this part, create the content-search.php file on the NeoBlog WP theme directory and then paste the code below on it.
STEP 14 – Working with comments.php
To check again the single.php file, notice that there is a part on that file that contains a div class of comment-section along with some PHP codes.
See code below.
These codes will simply check if the comments are enabled on the WordPress admin panel using an if statement. If it returns true, it will get the number of comments and simply display all comments returned.
Take note these codes alone won’t yet display comments, one needs to create the comment_template, using the comments.php file. For this part of the tutorial, go ahead and create this file on the NeoBlog WP theme directory.
Now copy the code below and paste it on the created file.
There are a lot of things happening on this file. First, it will test if the post needs a password for the user to be able to comment. Next, if it returns true, the comments number and comments will be displayed.
Notice that there is also a navigation to see the comments (both previous and next) using the previous_comments_link and next_comments_link function.
Finally, use wp_list_comments to display all comments for a post or page based on a variety of parameters, including the ones set in the administration area.
Next, add some wp_enqueue_script to check if the threaded comment is enabled. If it returns true, it will enable comment reply. Open up your functions.php and copy the code below on it.
STEP 15 – Working with 404.php
Creating a custom 404 page is easy using the 404.php template in a WordPress theme. This will make sure that every link actually goes to a specific web page. If there is a broken link, it will display this page.
For this part of the tutorial, create a simple 404 page template. Copy the code below.
A 404 ‘Not Found’ error page is a page generated by the server to inform a user about non-existing page.
On the code above, a simple message error message “Oh Snap! Page not found!” is displayed along with a home link URL. This is making sure that the visitor will stay on the site.
The NeoBlog WordPress theme is now complete! Congratulations!
Our Final Project
[Download Source]
Tips You Ought to Remember for This Part of the Tutorial
Always check out the WordPress Codex for functions, tags and PHP codes. This will keep you on the right path in dealing with codes.
Make sure to use well-structured, error-free PHP and valid HTML. See WordPress Coding Standards.
Follow design guidelines in site design and layout.
Always Backup your files. Always, always backup your files just in case you made changes on a template file so that you can easily retrieve it later.
Seek for help. If you are working on a different theme, chances are you might have some issues while converting some files. I recommend asking help in Stackoverflow community, which is a community of developers helping each other’s codes issues.
What Troubleshooting Techniques You Can Use
There is not really an official rule to check on errors while you are developing a theme. It might be your own codes or some typographical error you just missed on your WordPress templates.
However turning on the Debugging mode or checking your error log might help.
Before You Leave
You don’t want to read the whole thing? You might wanna try the video version! If you need to know the Part 2 of this tutorial series, you need to watch the whole playlist.
Round-up
Congratulations! You just converted an HTML and CSS template into WordPress blog theme. That was easy, right?
You’ve successfully converted your plain static HTML and CSS NeoBlog theme to a WordPress theme.
Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.
Clear Conclusion
Congratulations! You just converted an HTML and CSS template into WordPress blog theme on full. That was easy, right?
Now you have a fully functional WordPress blog theme that can pull and display content from a database.
You can also add more functionalities and styles on it by just browsing the WordPress codex to check all the functions you need.
If you have any comments or suggestions, please feel free to drop a line in the comment section.
Hope you learned something on this tutorial and see you again next time!