This post was originally published at webinuse.com
At the first, this heading might sound intimidating and clickbait. It is not, well maybe a clickbait a little bit, but bear with us. WordPress theme market is huge today and there are companies that earned millions on one theme only, like Avada theme. To make such a theme we need a theme of professionals and probably several months of work.
If you want to learn more about what is WordPress you can check this awesome course Building websites with WordPress by Nat Miletic. This course is excellent for those who want to start with WordPress. Nat is teaching us what is WordPress, what can we use it for, how can we use it, in a really nice and simple way.
Affiliate Link
Most of the themes that are selling today come with a tone of additional stuff like builders, widgets, extensions, multiple layouts, etc.
What are we gonna talk about is how to convert our HTML template to a WordPress theme. And in future articles, we will continue to build upon that.
There are out-of-the-box solutions that we can use to create a bare-bones WP theme, that only has a basic skeleton. Some of the places where we can create such themes are Underscores, UnderStrap, and Bones.
Structure of a WordPress theme
Every WP theme has the same basic structure. We only need style.css and index.php, header.php, and footer.php to have a WordPress theme. Usually (read always) there are more files to a WP theme. Some may say that we need even fewer files, but let’s be nice and separate everything as it should be.
Our theme will have the following structure:
- header.php
- footer.php
- index.php
- style.css
Later, in other articles, we will add some more files, but for now, we will only make the homepage.
NOTE: This is only a simple theme, with almost everything hardcoded, but we will improve our theme during the course of time.
1. Let’s create header.php
The first thing we will do is create header.php. Then, we paste anything from the existing HTML template, that comes before the body tag and we include the body tag, into header.php.
If we have something, like a hero image, or jumbotron that repeats on all pages, we can insert that also. In our case, we will use navigation, but later we will change that navigation to the WordPress menu. Also, we will put the main tag, because it will be the element that will hold all other elements.
<?php
/**
* The header for our theme
*
* This is the template that displays all of the
* <head> section and opening body tag
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package theme
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/#about">About</a>
<a href="/#portfolio">Portfolio</a>
<a href="/#contact">Contact</a>
</nav>
<main id="main">
2. Next is footer.php
After we created header.php we can create footer.php for our WordPress theme. Footer.php will hold everything that we have in the footer, any additional part that will be repeated across the whole website, at the bottom. Plus, we need to add a closing body and html tag. But the first thing is we need to do, at least with this example that we have created here, we need to close the main tag.
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package theme
*/
?>
</main>
<footer id="footer">
<p>Here goes some content for the footer</p>
</footer>
</div>
</body>
</html>
3. The main part – index.php
After we have created header.php and footer.php, we can continue with index.php. If there are no other files like single.php, page.php, post.php, something-template.php, index.php will be used as the template for everything. But we will deal with this in our future articles. For now, let’s just create index.php.
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package theme
*/
get_header();
?>
<section id="hero"><img id="hero-img" src="#"></section>
<section id="about">
<h1>This is about section</h1>
<p>Here comes some text about us</p>
<button>We can eve use some call to action</button>
</section>
<section id="portfolio">
<img class="portfolio-img" src="#">
<img class="portfolio-img" src="#">
<img class="portfolio-img" src="#">
<img class="portfolio-img" src="#">
<img class="portfolio-img" src="#">
<img class="portfolio-img" src="#">
</section>
<section id="contact-us">
<form>
<input type="text" id="name">
<input type="email" id="email">
<textarea id="message"></textarea>
<button>Send</button>
</form>
</section>
<?php
get_footer();
?>
Now let’s analyze a code a little bit. The first thing we see is get_header() function. It is actually a built-in WordPress function that runs our header.php that we have previously created. So instead of using include, or require, from PHP, we use get_header. Why? Because get_header does a lot more job than just including a file.
After that, we can add any HTML we want. We just added some super basic stuff.
When we are done with HTML we use get_footer() function that includes our footer and runs some more stuff in between.
4. style.css in a WordPress theme
Normally CSS files are used for styling our content. When we are using WP, style.css means more than simple styling. For a WordPress theme, style.css is crucial because it holds the theme’s name, which is required in order for the theme to be recognized and activated.
/*!
Theme Name: theme
Theme URI: http://theme.com/
Author: Webinuse
Author URI: https://webinuse.com
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
As shown in the example above in the first few lines there is a comment with several lines that holds some information. This information is used by WordPress in order to recognize themes and get some information about them. The only mandatory line is Theme Name, everything else is optional. There are more data that we can put in style.css, but we will tackle that some other time.
After the comment, we can put any styles we want. Same as with any other CSS file. If we convert some HTML template, that already exists, style.css is the perfect place to paste our CSS code.
This is basically it! We have created a working WordPress theme. In the following articles, we will create more advanced features. Also, we will add more page templates to our WordPress theme and some other cool things.
Now when we want to upload it, we put all of our files in a single folder and name this folder using our theme name slug, e.g. my-super-awesome-theme. After that, we zip that folder and upload it through the Themes installer in WordPress, and we can activate our theme.
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to warn users when the connection is lost?
Top comments (0)