What do you do when you possibly can’t discover the proper WordPress theme? In all probability, you in all probability flip to a theme framework. Nonetheless, each every so often, you in all probability have this thought flit throughout your thoughts: “I ought to simply code an HTML5 template and convert it right into a WordPress theme.”
However that’s only a pipe dream proper? Let’s be real looking.
The reality is, so long as you have got some primary WordPress programming expertise, changing an HTML5 template right into a WordPress theme is inside attain — offered you’re keen to place within the effort. On this publish, I’ll present you ways.
Proceed studying, or bounce forward utilizing these hyperlinks:
Why Convert an HTML Template Right into a WordPress Theme?
Setting Up Your Growth Atmosphere
Step 1: Discover a Template or Construct Your Personal
Step 2: Flip the HTML5 Template right into a WordPress Theme
Step 3: Correctly Enqueue Scripts and Types
Step 4: Create Template Partials
Step 4: Add the Loop
Step 5: Change Template File Content material with WordPress Features
Why Convert an HTML Template Right into a WordPress Theme?
There are just a few good the explanation why you may wish to tackle this challenge.
Utilizing an HTML5 template means you have got full management over each minute element of the looks of your web site. Don’t like some a part of the template? Change it. It’s rather a lot simpler to tweak a easy HTML template than a posh WordPress theme.
Utilizing an HTML5 template means you don’t find yourself loading up your website with a bunch of options you don’t plan to make use of.
If you would like a WordPress theme that isn’t being utilized by 1000’s of different websites, changing an HTML5 template is one option to find yourself with a very customized WordPress theme.
For those who’ve by no means constructed a WordPress theme earlier than, changing a template will actually stretch your WordPress growth muscular tissues — in an excellent manner.
On this article, I’ll begin with a easy HTML5 template and switch it right into a full-fledged WordPress theme. Observe alongside, and also you’ll have the ability to do the identical.
Setting Up Your Growth Atmosphere
So as to convert an HTML5 template right into a WordPress theme, the very first thing you’ll have to do is get your growth atmosphere arrange.
Listed here are the instruments you will want in place earlier than you begin work:
An area server to energy WordPress: There are lots of choices to think about. We’ve detailed find out how to use XAMPP, MAMP, WAMP, VVV, and Vagrant. Choose one and get it working.
An area WordPress set up: It’s greatest to construct a WordPress theme whilst you have as few plugins activated as doable, so both create a brand new set up or use an present set up after deactivating as many plugins as doable.
A git repo to maintain observe of your adjustments: Whereas this isn’t technically a requirement, it’s a good suggestion. I’ve used GitHub to trace my adjustments and host the completed product, and Sourcetree to serve an easy-to-use GUI for git.
You’re additionally going to should be accustomed to how WordPress themes work and have primary PHP coding expertise earlier than diving headfirst into this challenge. If the phrases “template hierarchy”, “codex”, and “the loop” are unfamiliar to you, then you have to do some homework earlier than leaping into this tutorial. You may study what you have to know by taking a course or two, or by studying by our newbie and intermediate WordPress growth sequence.
For those who get caught at any level alongside the best way and wish to evaluate the template recordsdata I used with the completed WordPress theme, you will get a duplicate of the template recordsdata from Begin Bootstrap and see my WordPress theme’s supply code at GitHub.
Step 1: Discover a Template or Construct Your Personal
You may convert any HTML template right into a WordPress theme. Nonetheless, your job will probably be a lot simpler in the event you choose a template structure that sticks intently to the core performance constructed into WordPress: posts, pages, a sidebar, a header, and a footer. When taking a look at templates — or coding your personal — take into consideration how the components of the template will translate right into a WordPress theme.
That doesn’t imply you could’t convert any template right into a WordPress theme. You may. Nonetheless, the extra non-traditional the template you choose, the extra work it can take to transform it right into a fully-functional WordPress theme.
I’m a minimalist with regards to internet design and a proponent of “mobile-first” design. Because of this, a primary weblog template primarily based on Bootstrap is strictly the form of factor I’m on the lookout for.
For this tutorial, I’ve settled on the Weblog Submit and Weblog House templates from Begin Bootstrap.
These templates are free, minimalist, will translate simply to WordPress, and so they’re constructed with Bootstrap. Good.
When you’ve settled on the proper them, or coded your personal, you’re prepared to maneuver on to the following step: turning the template right into a WordPress theme.
Step 2: Flip the HTML5 Template right into a WordPress Theme
At this level, you must have an HTML5 template in hand. It needs to be composed of a listing that features an index.html file and subdirectories for CSS and JavaScript assets. Copy the complete theme listing into the wp-content/themes/ listing of your WordPress growth website.
The WordPress theme is now situated the place it must be for WordPress to search out it. Nonetheless, to activate the WordPress theme in your growth website you must make two adjustments:
Rename index.html as index.php.
Add a type.css file with a correctly formatted theme file header to the theme listing.
Alternatively, you can simply transfer the template’s major CSS file up one stage — out of the /css listing and into the WordPress theme root listing. The secret is that there have to be a type.css file within the theme root listing, and it should embrace a correct theme header.
For those who’d prefer to, this could even be the correct time so as to add a theme screenshot to your theme listing.
When you make these adjustments, your WordPress theme will probably be accessible for activation whenever you go to Look > Themes within the WordPress admin space. Go forward and activate your WordPress theme and examine your website entrance finish.
At this level, your WordPress theme received’t look fairly. Right here’s how my website checked out this level:
What’s taking place is that your entire theme’s CSS and JavaScript assets are contained in your theme listing, however your HTML template is ready as much as discover the recordsdata relative to your website area. In different phrases, WordPress theme assets are situated in http://yourdomain.com/wp-content/themes/your-theme-directory/, however your website template is on the lookout for these assets in http://yourdomain.com.
Clearly, it’s not discovering them. So, the following step is so as to add CSS and JavaScript assets to our WordPress theme in such a manner that WordPress will discover them.
Step 3: Correctly Enqueue Scripts and Types
The correct manner so as to add scripts and kinds to a WordPress theme is to enqueue them. So as to try this, you will want to create a capabilities.php file in your theme’s root listing.
Now, check out the CSS and JavaScript assets linked to your HTML template. The CSS assets will probably be added within the template head and the scripts could also be added in both the pinnacle or simply earlier than the closing physique tag.
When you’ve situated the entire CSS and JavaScript assets you have to add to your WordPress theme, construct a perform that enqueues the entire scripts and assets — don’t neglect to incorporate your theme’s type.css — after which hook the perform into your WordPress theme with the wp_enqueue_scripts hook. You’ll wish to add the perform and the hook to your theme’s capabilities.php file.
Your enqueuing perform will look considerably totally different. Nonetheless, for reference, here’s a have a look at the enqueuing perform I constructed:
With the CSS and JavaScript assets enqueued, WordPress will now acknowledge the assets your theme will depend on. Nonetheless, as a way to truly insert them into your dwell website, you have to add two hooks to your WordPress theme’s index.php file:
wp_head: Should be added simply earlier than the closing <head> tag in index.php.
wp_footer: Should be added simply earlier than the closing <physique> tag in index.php.
Right here’s an approximation of what your index.php file ought to appear like with these tags added:
With these hooks added, and scripts and kinds correctly enqueued, your WordPress theme ought to now look similar to the unique HTML template.
The subsequent step is to we’ll break index.php into the a number of components in order that we will reuse the header, footer, and sidebar with posts, pages, archive pages, and extra.
Step 4: Create Template Partials
A template partial is a part of a WordPress theme that’s solely used when it’s referenced by one in every of your theme’s template recordsdata.
Let’s have a look at an instance, nearly all WordPress themes break the doc head out right into a header.php file. That manner, the header might be reused with pages, posts, the house web page, archive pages, and the 404 and search pages. Nonetheless, header.php is rarely known as immediately. It is just used when it’s known as by a template file comparable to index.php.
Usually, it would be best to create a minimum of three template partials:
header.php
footer.php
sidebar.php
Create header.php
Create a brand new file in your WordPress theme’s root listing and title it header.php. Your theme’s header.php file will embrace the doc kind declaration, the opening HTML tag, the complete head aspect, the opening physique tag, and your website navigation — in brief, all the things you wish to seem on the high of each web page of your website.
Earlier than you copy over that code, you have to create a file header. Each file in your WordPress theme ought to embrace a file header which is solely a quick rationalization of the aim of the file. Check out a few file headers from themes accessible from the WordPress theme listing. You’ll see that all of them look fairly related. Your file header for header.php ought to look one thing like this:
After you have a file header in place, go forward and replica over the entire header code from index.php over into header.php. Subsequent, delete the entire header code from index.php and change it with the get_header() WordPress perform like this:
Create sidebar.php and footer.php
Repeat the identical course of by making a separate file for all sidebar contents and an extra file for all footer contents. After copying the code from index.php to the related recordsdata and delete it out of index.php, use the get_sidebar and get_footer WordPress capabilities to tie the entire template recordsdata collectively.
Once you’re achieved, index.php ought to start with a file header and get_header, and finish with get_sidebar adopted instantly by get_footer. In between these three capabilities needs to be the primary contents of your web page.
Right here’s a simplified have a look at what index.php ought to appear like at this level:
Step 4: Add the Loop
The loop is the perform that queries the WordPress database and generates the content material displayed on each web page of your WordPress web site. Generally, it would be best to have a minimum of two totally different variations of the loop:
One model of the loop to your weblog web page that shows publish titles, meta information, the featured picture, and a publish excerpt.
A second model to your pages and particular person posts that shows the total content material of the web page or publish.
As well as, it’s possible you’ll wish to refine the loop even additional by crafting variations for particular person pages, particular person posts, search outcomes pages, and extra.
At its most simple, right here’s what the WordPress loop seems to be like:
After all, the remark in that little bit of code must get replaced with WordPress capabilities to generate content material and HTML tags to render that content material correctly.
The loop must take pages, particular person posts, the weblog web page, the homepage, archive pages, and the 404 and search pages into consideration. Because of this, getting all of it achieved in a single file is a problem. Because of this, most public themes break the loop out of index.php and put it into a number of separate recordsdata with titles like content material.php, content-single.php, content-page.php and so forth.
For those who resolve to place the loop into a number of recordsdata, use conditional tags together with the get_template_part perform to reference the model of the loop you want to use.
My suggestion is to start out easy and slowly iterate your loop(s) till you’re pleased with what reveals up in your WordPress website. If all else fails, the next loop ought to work for nearly each WordPress web site, though the outcome is probably not as gorgeous as you’d like. Nonetheless, it’s jumping-off level if the loop is model new to you.
Overlaying the loop in-depth is past the scope of this tutorial. Nonetheless, it’s a subject we’ve lined earlier than and you may study all about it by studying WordPress Growth For Intermediate Customers: Queries and Loops.
Step 5: Change Template File Content material with WordPress Features
This subsequent step might fluctuate significantly from one HTML template to the following. What you wish to do is figure your manner by every template file — header, index, content material (if relevant), sidebar, and footer — changing every bit of static content material with an acceptable WordPress perform.
Begin with header.php. Each time your run right into a little bit of content material, change it with a WordPress perform. For those who aren’t positive what perform to make use of, there are two issues you are able to do to search out the proper perform:
Check out the template recordsdata of a well-coded WordPress theme comparable to Twenty Sixteen and replica what they do. Twenty Sixteen is GPL, copying is okay — even inspired!
Use Google to find the suitable capabilities within the WordPress Codex by trying to find phrases like “WordPress charset perform.”
One step that may be notably tough is establishing the header menu. Let’s take a minute to take a look at that step intimately.
Setting Up the Header Menu
Including a header menu is a two-step course of:
Add the header location to your WordPress theme by including a perform to capabilities.php.
Insert the menu into header.php being cautious to duplicate the courses and ids employed by the HTML template.
You will want to make use of the register_nav_menus perform so as to add a menu location to your WordPress heme. Within the case of the instance WordPress theme, I dropped the next perform into capabilities.php:
Subsequent, you have to use the wp_nav_menu perform in header.php to generate your menu. Pay particular consideration to the courses and ids utilized to the menu in your HTML template. You will want to duplicate these selectors in order that the template’s CSS will probably be utilized to your new menu. Fortunately, the WordPress perform makes that fairly simple. Right here’s how the code that provides the menu to my WordPress theme’s header.php seems to be:
Be aware that I added two courses to the menu itself, nav and navbar-nav, in addition to an ID and two courses to the menu container. I simply copied these selectors from the HTML template. This ensures that the menu will choose up the template kinds.
Setting Up Widget Areas
Additionally, you will have to arrange sidebar, header, and footer widget areas as relevant primarily based on the template you’re utilizing. Including widget areas is a two-step course of:
Use the register_sidebar perform to register the widget space in capabilities.php.
Use the dynamic_sidebar perform so as to add the widget space to the a part of your theme the place you need it to look.
The register_sidebar perform accepts an array of values that features the title of the widget space, the widget space ID, in addition to the bits of HTML that ought to seem earlier than after every widget and the widget title. The register_sidebar perform is nested inside a customized perform, and that customized perform is hooked into WordPress utilizing the widgets_init hook.
Right here’s how the perform that registers the sidebar space for my WordPress theme seems to be in my theme’s capabilities.php:
With the widget space registered, we will add it to sidebar.php with dynamic_sidebar. The dynamic_sidebar perform accepts the widget space ID that we registered with register_sidebar in capabilities.php.
Right here’s how the code including the widget space to sidebar.php seems to be in my theme:
These two capabilities work collectively to generate my theme’s sidebar widget space. The widget space will probably be contained in a div with a category of col-md-4. As well as, every widget will probably be contained in a div with a category of properly, and every widget title will probably be nested inside a fourth-level heading aspect.
You may apply this course of so as to add any variety of widget areas to your WordPress theme. All you must do is:
Create a special register_sidebar perform with a singular ID for every widget space. You may stack your entire register_sidebar capabilities inside a single customized perform, after which initialize them unexpectedly utilizing the widgets_init hook.
Use the dynamic_sidebar perform and the distinctive widget space ID to load the widget space wherever you need it to look: within the sidebar, header, or footer.
Subsequent Steps
For those who’ve adopted alongside, step-by-step, at this level you have got transformed an HTML5 template right into a practical WordPress theme. Congratulations!
I adopted this identical course of to create this WordPress theme:
For those who look again on the template on the high of this tutorial you’ll see that it’s just about a spot-on duplicate.
When you’re undoubtedly happy with what you’ve achieved to date, there’s likelihood you aren’t fully glad with what you’ve created. The subsequent steps you’ll in all probability wish to take embrace:
Creating customized templates and loops for particular person posts, pages, search outcomes, and a 404 web page template.
Including a feedback part to your particular person posts and pages.
Constructing customized widgets that match the styling of the widgets proven in your template.
Internationalizing your WordPress theme in the event you plan to make your theme publicly accessible.
For those who’ve made it this far, then you have got the talents essential to tackle every of those further duties. Nonetheless, strolling you thru the method is past the scope of this tutorial. For those who need assistance taking over these duties, check out the next assets that train the ideas essential to deal with these subsequent steps:
Creating Customized Web page Templates in WordPress
WordPress Growth for Newbies: Widgets and Menus
The Final Information to WordPress Translation and Localization
Wrapping up
Changing an HTML5 template right into a WordPress theme generally is a time-consuming, difficult endeavor. Nonetheless, going by the method means you’ll find yourself with a genuinely distinctive WordPress theme, and in the event you’ve by no means transformed a template right into a theme earlier than, you’re positive to study rather a lot alongside the best way as properly.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!