Build WordPress Theme from Scratch
In this tutorial we will discuss how to build WordPress site in the most basic and understandable way. We will need help from plugin and we will tackle template hierarchy, templates, partials, post types, the style.css stylesheet, filter and action hooks, loop, and conditional tags. We will also take a look at a typical simple WordPress theme file structure. So let’s get started.
Please take note that you can download the source code here. This will be your guide in copying the codes.
The first thing we’ll do is install plugin that will batch create WordPress posts and other WP content. This way, we’ll be able to quickly populate our development website without losing too much time.
1. Go to Plugins > Add New > Search for FakerPress > Install Now > Activate
2. After activation, it will create a new option in the admin area named FakePress. Let’s try creating a fake content via post and see whats the result is.
3. So this is the result on what we previously generated. We will use these post later to test our newly created WordPress theme.
4. Okay, so we will now proceed to creating WP theme formally. You need a basic programming skills and a little knowledge on either CPanel or FTP.
Login to your CPanel and go to: public_html/wp-content/themes, you will see all the installed theme in your site here.
5. Open your preferred text editor. Create index.php and style.css. Input the following codes.
6. Compressed those files then upload it in your CPanel Upload button listed in the menu.
Extract the zip file.
7. Navigate back to your WordPress administrator page, and Activate the theme.
Go to your site homepage and can see an undecorated website. But don’t worry we will modify that later. The next step will be a little complicated, we will tackle different coding changes so just hang in there.
8. Go back to your index.php file and replace code with the looping of post with content. Change by adding the_title(), the_excerpt(), and we add HTML markup and the_ID().
9. After all the changes made in index.php we will now create two new files namely footer.php and header.php. But before doing that, let’s insert these code get_header(); and get_footer(); on the index.php.
Take note that we will be using Twitter Bootstrap theme, since Bootstrap is well documented and very handy to use.
10. Next, create header.php and this file will look like this.
<?php
/**
* The header for our theme.
*
* @package Botega_Scratch_Theme
*
*/
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="navbar-brand"><?php bloginfo( 'name' ); ?></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">11. Proceed to creating footer.php and the file will look like this.
<?php
/**
* Footer template partial
*
* @package Botega_Scratch_Theme
*
*/
?>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</footer><!-- /footer -->
<?php wp_footer(); ?>
</body>
</html>12. Okay, so upload those file in your theme folder. These will be inline with index.php and style.css, so basically you will have four files now.
I picked the famous and simple free bootstrap template from startbootstrap.com. You can download it here, our theme will come with predefined styles, responsiveness, and we’ll still be able to style it further.
14. Extract the template that you have downloaded, then create 3 folders namely css, js, and webfonts. See the screenshot beside and find those files in the extracted template folder. Copy those files in your newly created folders. Sort them according to filetype .css to css folder, .js to js folder and just simply copy the webfonts content to your webfonts folder.
Compress the file and upload them in your theme directory where your index.php resides.
Copy index.php to archive.php, page.php and single.php. The exact image on the right side is the exact file structure.
15. After all those changes, we will need to call those files we uploaded. We will create a new file named functions.php. This file will serve as man’s plugin archive. It allows us to include any custom functionality in our theme. This file will include Bootstrap and bootstrap theme’s styles and scripts that we downloaded from our free template. The file will look like the image on the right.
16. Almost everything is set and ready but on thing is missing, our header. We need to modify our header and set dynamic header too.
Navigate back to header.php, let’s edit it. Find these lines of code:
<ul class="nav navbar-nav navbar-right">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?>
</ul>and replace it with:
<ul class="navbar-nav ml-auto">
<?php wp_nav_menu(array(
'menu' => 'Top Menu',
'items_wrap'=>'%3$s',
'container' => false,
'list_item_class' => "nav-item",
'link_class' => "nav-link",
)); ?>
</ul>17. Now update the functions.php with the following codes:
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);17. Now we modify the header into a dynamic one. Go back to your header.php file and add this line of code in there.
Update the style.css and add these lines:
body.logged-in.admin-bar #mainNav {
margin-top: 32px;
}
@media screen and (max-width: 782px) {
body.logged-in.admin-bar #mainNav {
margin-top: 46px;
}
}