Hello again! We are in part 2 of Creating a WordPress Theme from Scratch Using Laragon. If you want to go over the information that I published related to this topic, which is part 1, you may go here.
Creating the Simplest Blog Theme
Creating A Theme Folder and the required files
After installing Laragon and setting it up on your computer (I placed all Laragon-related files in C: drive during installation), go to the drive where you placed your Laragon. To create a folder for our new theme, we must first go to the correct location. It should be laragon>www>thememaker>wp-content>themes. Recall that we call our blog Theme Maker from the previous post. Inside the folder, we will create a folder for our theme named simplestblog as shown below.
To see how the theme is added to our blog, check the video below. This will also show how to add a screenshot as a thumbnail for the theme and add the first 2 required files: index.php and styles.css. Note the name of the screenshot is “screenshot.png”. If you use a different name it will not render the image.
HTML Structure
Go back to Visual Studio Code and in the index.php file write the following code:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>We will activate our theme by clicking the activate button shown below.
Let us visit the site by clicking the home button as shown below.
You probably noticed an empty page. It is because we have not placed anything in the body yet. But if we click on the view page source, we will see what those codes are doing to our site. You will also notice the name on the tab in the browser, “The Theme Maker”.
Style Sheet
I made the style sheet in advance. If you are following along, you may copy the CSS code given below to the style.css file.
/*
Theme Name: Simplest Blog
Theme URI: http://simplestblog.michellealzoladesign.com/
Author: Michelle Alzola
Author URI: http://michellealzoladesign.com/
Description: The simplest of simplest blog theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, theme
Text Domain: simplestblog
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
body
{
font-family: 'Xanh Mono', monospace;
font-size:15px;
color:#333;
background:#f4f4f4;
margin:0;
padding:0;
line-height: 1.7em;
background-image: url('../simplestblog/assets/images/blog2-pattern.jpg');
background-attachment: fixed;
font-size: 120%;
}
.top-div
{
background-image: url('../simplestblog/assets/images/top.png');
height: 120px;
text-align: left;
}
header
{
height: 150px;
float: left;
width: 50%;
}
h1, h2, h3, h4, h5, h6
{
font-family: 'Meow Script', cursive;
color: rgb(118, 79, 92);
}
header .container h1{
margin:0;
padding:0;
padding-bottom: 0px;
padding-top: 1%;
font-size: 200%;
letter-spacing: 10px;
}
.top-div header .container
{
height:200px;
padding-top: 2%;
}
.main-nav
{
padding:5px;
padding-top: 2%;
float: right;
width: 25%;
font-size: 130%;
}
.main
{
margin:2% 0;
float:left;
width:70%;
background-color: rgb(246, 248, 250);
padding: 2%;
border-radius: 10px;
}
.post h3
{
font-size: 250%;
margin: 0 0;
margin-top: 2%;
}
.container
{
width:auto;
margin:0 5%;
overflow: auto;
}
.sidebar
{
float:right;
width:20%;
margin:2% 0;
background-color: rgb(246, 248, 250);
padding: 2%;
border-radius: 10px;
color: rgb(81, 61, 47);
font-size: 120%;
}
footer
{
background: rgb(118, 79, 92);
color:rgb(246, 248, 250);
padding:10px 10px;
text-align: center;
}
a
{
text-decoration: none;
color: rgb(68, 49, 67);
}
article.post
{
border-bottom:1px #ccc solid;
overflow:hidden;
width: 95%;
margin: auto;
}
a.button, .submit
{
display:inline-block;
background:rgb(93, 73, 84);
color:#fff;
padding:10px 5px;
margin-bottom: 10px;
text-decoration: none;
border-radius: 5px;
margin-left: 2.5%;
border: none;
width: 15%;
font-family: 'Xanh Mono', monospace;
font-size: 100%;
text-align: center;
}
.meta
{
padding:5px;
}
.meta a
{
color:black;
}
.post-thumbnail img
{
width:100%;
height:auto;
border-radius: 15px;
}
.menu
{
margin:0;
padding:0;
}
.menu-item
{
list-style:none;
float:left;
padding-right:15px;
}
.main-nav a
{
text-decoration:none;
}
.clr
{
clear:both;
}
.side-widget
{
margin-bottom:10px;
margin-top:10px;
}
.Side-widget li
{
list-style: none;
line-height:2.2em;
border-bottom:dotted 1px #ccc;
}
.Side-widget a
{
text-decoration: none;
}
In the index.php, we are going to add the following code:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">Go to the simplestblog folder in your computer, create a folder called assets and inside it, create another folder called images. Save the given files below to the images folder.
Save all changes to the code and refresh the site. You will see the background changed with the pattern that we have just downloaded and saved to images.
Head Tag Function
As you see from the result of the view page source, there is not much going on there except for the charset, language, link to the stylesheet, and the name of the blog. There is a function called wp_head() that renders information needed for the head tag. To include this, simply add the code below to index.php and save it.
<?php wp_head(); ?>After refreshing the view page source page, we have the following output:
It is amazing how a single line of code does this. The head tag needs this function because it controls the script, emojis, admin bar, etc.
Body
Before we move on to the body of our theme, take a look at the video below to learn how to add a tagline and posts in WordPress.
Go to Visual Studio code and create a file called header.php and cut everything we have written on index.php to this file. The header.php file will have codes as shown below with some additional codes.
//header.php[1]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Meow+Script&family=Xanh+Mono:ital@0;1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body>
<div class="top-div">
<header>
<div class ="container">
<h1><?php bloginfo('name'); ?></h1>
<span><small><?php bloginfo('description'); ?></small></span>
</div>
</header>
<nav class="main-nav">
<div class="container">
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu($args); ?>
</div>
</nav>
</div>
<div class="clr"></div>Then in the index.php write the following codes. Notice on the top the line <?php get_header(); ?>. It is a call to header.php that we have just created. The <?php get_footer(); ?> is a call to footer.php that we will create next.
//index.php[1]
<?php get_header(); ?>
<div class="container">
<div class="main">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article class="post">
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<div class="meta">
Created By
<a href="<?php get_author_posts_url(
get_the_author_meta('ID')); ?>">
<?php the_author(); ?>
</a>
on <?php the_time('F j, Y g:i a'); ?>
</div>
<?php if (has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<?php the_excerpt(); ?>
</article>
<br>
<a class="button" href="<?php the_permalink(); ?>">
Read More
</a>
</br>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, No posts were found'); ?>
<?php endif; ?>
</div>
</body>
<?php get_footer(); ?>For the footer.php we are going to include the following code:
//footer.php[1]
<div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>
<div class="clr"></div>
</div>
<footer>
<div class="container">
<p>© Michelle Alzola</p>
</div>
</footer>
<?php wp_footer(); ?>
</html> Let us review what we have. In the previous post, I showed a diagram of the files that we are going to create. So currently, we have header.php, index.php, and footer.php.
When we go to our site, it will give us a frontend looking like the one shown below. It is broken for now, but we can see how it is all coming together.
I want to take a moment to explain what some of the code does in the files that we created.
In the header.php, the code <?php bloginfo(‘description’); ?> gives us our tagline. The <?php wp_nav_menu($args); ?> is for the menu that I will discuss later.
There’s a lot going on inside index.php. But let us analyze it in parts in the video below.
In the footer.php, <?php if(is_active_sidebar(‘sidebar’)) : ?> is asking if a sidebar contains widgets. If it does, the <?php dynamic_sidebar(‘sidebar’); ?> will display the dynamic sidebar. The <?php wp_footer(); ?> puts an admin panel on top of the page as shown below.
Single POsts
In this file, we will create a single post page. To do this, first, create a file single.php and then write the following codes:
//single.php[1]
<?php get_header(); ?>
<div class="container">
<div class="main">
<?php if(have_posts()) : ?>
<?php while(have_posts()): the_post(); ?>
<article class="post">
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<div class="meta">
Created By <?php the_author(); ?> on <?php the_time('F j, Y g:i a'); ?>
</div>
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, No posts were found'); ?>
<?php endif; ?>
<?php comments_template(); ?>
</div>
</body>
<?php get_footer(); ?> This is like the code inside index.php but the single.php returns just one specific post instead of several posts that the blog has. If we click on the title or the read more button from the home page, it will take us to that single post. Notice the <?php comments_template(); ?>, this will add a comment at the bottom of each post.
Pages
A Page is a part of a website where we can show content such as About Us, Contact Us, Works, etc. Unlike blog entries, a page can be a static page. A menu can have links to these pages like a regular site. To make one, add a new file to our theme called page.php and write the codes found below.
//page.php[1]
<?php get_header(); ?>
<div class="container">
<div class="main">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article class="post">
<h3>
<?php the_title(); ?>
</h3>
<?php if (has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<?php the_content(); ?>
<br>
</article>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, No posts were found.'); ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>These codes are very similar to single.php. In our theme, a Page does not have a comment, permalinks, author, time, or loop.
Helpful Functions
The functions.php in WordPress is where we add the unique features of our theme. In our theme, we will create custom functions for the post thumbnails, excerpt length, and widgets. Go back to Visual Studio Code and add functions.php with the following codes:
//functions.php[1]
<?php
function simplestblog_theme_setup(){
//Featured Image Support
add_theme_support('post-thumbnails');
//Menus
register_nav_menus(array(
'primary' => __('Primary Menu')
));
}
add_action('after_setup_theme', 'simplestblog_theme_setup');
//Excerpt Length
function set_excerpt_length(){
return 100;
}
add_filter('excerpt_length', 'set_excerpt_length');
//Widget Locations
function init_widgets($id){
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'before_widget' => '<div class="side-widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
add_action('widgets_init', 'init_widgets');
The illustrations below explain what the codes are about.
To better understand what page.php and functions.php do, take a look at the video below. In this video, I discussed how to add pages, menus, and widgets.
Testing
Yay! We have completed a theme! But before we install it using an actual hosting like Bluehost, we must first test everything making sure that nothing is broken and all functionalities work. See how I did that in the video below.
Before we start packing the theme for Bluehost, we must stop Laragon first and go to the location where we save the theme. Inside the simplestblog folder, all files must be selected and zip them into one file. We will name the zipped file simplestblog.
After placing everything in a zip file, we are ready to test it live using a hosting service. I am using bluehost as seen in the video below.
Sharing and Selling
It is easy to pack the whole theme as illustrated in the previous video, and maybe you want to send it to a friend or a client. If you are thinking of selling themes, below are my recommendations.
Aside from being a blogging platform, WordPress is used in a wide range of industries like eCommerce, Photography, Advertising, etc. This will help you choose what kind of market you want to sell to and to be proficient, develop your skills just focusing on 1 or 2 industries.
Selecting a good merketplace to sell your theme is not easy but if you want to monetize your craft, make sure to read and understand their terms. One of the top marketplaces for selling WordPress themes is ThemeForest. You may visit their site here. When you go there, start browsing for the themes, and if you decide you want to sell, there is a link on top of the page that says “Start Selling”. It will take you to a page where you can create your account as an envato author. Also, you may want to check their Author’s Terms here.
Selling in a marketplace is an advantage because of the community that belongs to them. Those members create a lot of traffic to the marketplaces’ site. This means that many people will see your work. Since the authors want to have the highest views and returns, there is a bit of a competition to make the products better. The competition will also help you to grow your skills, so make sure that you make high quality themes. In addition to marketplaces, you can also sell your themes on your own website.
Take advantage of the social media to promote your products.
Make sure that you follow good coding standards and UI/UX designs. Your product should always come with a good documentation and instructions how to use it. You may also want to have a video tutorial to make it more understandable.
Lastly, one of the best way to have a good following is to offer themes for free. It is called “freemium” themes. This way clients can use your theme even with basic functionality. If they like it, they will come back for more, even for the premium paid ones.
What’s Next?
Useful Resources for Advanced Theme Development
One of the best ways to learn to create a WordPress theme is to open one of their default themes and study it. As you have learned in this post, you will be able to see the inside of a theme by just going to the file under themes in Laragon. If you happen to break something, all you have to do is make another site in Laragon. Yes, it is that simple so be brave 🙂
There are resources that you can use to be proficient in this craft. Start with WordPress.org Developer Resources that you can find here.
WordPress also have a Theme Handbook that you can read and study here.
To learn more advanced themes, you may go here.
Thank You
I hope you enjoyed this post as much as I enjoyed writing it. If you like to be notified of the new topics on this blog, you may go to the menu above and click on “Subscribe” or go here.
Thank you for visiting,
xoxo Michelle
References
[1] E. L. Solutions, Learn to Create WordPress Themes by Building 5 Projects, Birmingham – Mumbai: Packt, 2017.
