What I Learned Creating My First Wordpress Theme From Scratch

What I Learned Creating My First WordPress Theme From Scratch

June 2, 2016


The purpose of this post is to help those looking to develop a WordPress theme from scratch run into fewer headaches by learning from my first WordPress development experience.

The Backstory

I am an adventurer at heart and have traveled to many different places, seen some amazing views, and have acquired quite a collection of photos. It was while browsing through these photos that I had an “Aha!” moment, an epiphany of sorts, to create a blog that would share my stories from these adventures. That is when I decided to turn to my favorite blogging platform, WordPress.

Where-Is-Weston-Now-Blog-Image

WordPress has always been something I tinkered around with (altering the CSS), so I figured that I would just start out with a template that was relatively close to what I was looking for and work my way towards what I had in mind. After searching through scours of template sites, over the course of an hour, I finally found something that was close to what I wanted and did my usual tinkering. While the end result was nice, it still didn’t feel 100% of what I thought it could be and I had to integrate various plug-ins that slowed the sites performance. This is the moment that I decided to create my own theme from scratch and create exactly what I had in mind. No more help from thousands of plug-ins!

Scripts and Stylesheets

How, where, and why is the first thing that I learned in this development process. When I started, I naturally went to the header.php file to place in my CSS and JS files. After sifting through many articles, I came to find out that a great way to import and maintain these files was by using a WordPress function in the functions.php file. This function holds all of the scripts, stylesheets, and fonts, and then gets utilized by adding a WordPress action called “wp_enqueue_scripts”. You can see an example here:

function get_scripts_stylsheets_and_fonts() {

wp_register_style( 'open_sans', 'https://fonts.googleapis.com/css?family=Open+Sans:400,700');

wp_enqueue_style( 'open_sans');

wp_enqueue_style( 'style', get_template_directory_uri().'/css/style.css');

wp_enqueue_script( 'myJavaScriptFile', get_template_directory_uri().'/js/'myJavaScriptFile'.js');

}

add_action( 'wp_enqueue_scripts', get_scripts_stylsheets_and_fonts ' );

 

The Menu/Navbar is an Array

This was a weird one for me, but after learning about it, it makes sense. You add in the navbar by using the WordPress function “wp_nav_menu()”. The code for what makes up the navbar is held in an array, which serves as a parameter to the wp_nav_menu function. This array has various parameters that you can put in according to the desired end result you are looking for. See the list of navigation array parameters. Here is an example of what I used for travel blog:

<?php wp_nav_menu( array(

'menu' => 'primary',

theme_location' => 'primary',

'container' => 'false',

'menu_class' => 'nav navbar-nav navbar-left',

) );?>

The main issue that I ran into with this was that I was using the Bootstrap framework and there are specific classes that must be called for everything to function properly. To solve this, I created the Bootstrap menu as usual and then placed in the above code where I wanted my menu items to be. You can see the “container” is set to false, and the reasoning behind it is that this property will wrap your menu in an element which you can designate. This would have goofed up my Bootstrap menu because I needed the ul element’s, which was assigned a class through the “menu_class”, direct parent to be a div with the Bootstrap class “collapse navbar-collapse”.

Getting a Post’s Summary

To get a post’s summary text you must use the WordPress “the_excerpt()” function. When I first put this in my code it didn’t work and it drove me insane figuring out why. As it turns out, when you are writing a blog post there are various menus that you can use to incorporate different features. One of these features is the excerpt.

In order for the excerpt function to work, you must:

  1. Have the Excerpt feature checked
  2. Have excerpt text saved in the excerpt text area box down below the main post/writing text box.

To check the excerpt box, you must click on the “Screen Options” menu box at the top right of the New Post screen, which pulls the menu open, and then click on the checkbox labelled “Excerpt”.

Excerpt-Directions-Step-1

Excerpt-Directions-Step-2

Excerpt-Directions-Step-3

You Must Activate Your Widget Capability

In order for your theme to have widget capability, you must switch it on by adding theme support for it in your functions.php file. If you do not do this, then you will not be able to use widgets in your theme.

Just like with importing the CSS and JS files, you will create a function that will be utilized in a WordPress function. Here is an example from my code:

function activate_widget_capability() {

register_sidebar( array(

'name'          => 'Main Sidebar',

'id'            => 'main_sidebar',

'before_widget' => '<div id="sideBarDiv">',

'after_widget'  => '</div>',

'before_title'  => '<h4>',

'after_title'   => '</h4>',

) );

}

add_action( 'widgets_init', ' activate_widget_capability’);

The key points to focus on to make sure this works is that your function uses the WordPress function “register_sidebar()” and that it then gets placed in the “add_action()” function as the second parameter after “widgets_init”.

Once I got the widget activated in my functions.php file, I designated my widget area in my sidebar.php file. Make sure that the “id” you designated in the activation function matches to the parameter in the “is_active_sidebar” and “dynamic_sidebar” functions.

<?php if ( is_active_sidebar( 'main_sidebar' ) ) : ?>

<?php dynamic_sidebar( 'main_sidebar' ); ?>

<?php endif; ?>

You Must Activate Your Thumbnail Capability

Thumbnail = Featured Image. A thumbnail for a post is set on the New Post page in the “Featured Image” box. Pulling a post’s featured image into your posts page is a fantastic way to make your blog look more appealing to readers and capture/maintain their interest. In order to do this, you must add theme support to the theme you are creating. Luckily, adding this support is quick and easy. You simply insert the code below into your functions.php file and presto, you have thumbnail capability!

add_theme_support( 'post-thumbnails' );

Summary

That is about a wrap for everything I ran into while creating my theme. I hope that this post will help save you some trouble and give you a better insight at developing themes from scratch. If you have run into an issue and figured out a solution that you think would help others, feel free to share in the comments below.