How To Create A WordPress Theme From A HTML/CSS Template Part 2 – Creating The Basic Theme
In the first part we went over a few different building blocks of WordPress, the template hierarchy and stuff that goes on behind the scenes you should be a bit more familiar with before jumping in. Now we’re going to jump right in and create a WordPress theme either from scratch, or using a HTML/CSS template that you already have.
Before we get started however, you need to have a WordPress development environment set up. If you normally only work with HTML/CSS, you might not be familiar with a “development setup”.
When working WordPress (or other PHP frameworks) you need to work with a development setup, because they run server side code that requires databases like MySQL to work, and that means you can’t check if a theme works just by opening files in the browser. Either you create a development site on an actual server, or you can set up a local development environment. Read more about setting up XAMPP on windows, or if you’re on a mac, using MAMP.
Header.php
First we’re going to start with the header.php file. If you haven’t already, create a folder inside the wp-content/themes folder on your local development installation of WordPress. Open a new file in your code editor, and save it as header.php.
First we’re going to start with the basic HTML tag:
<!DOCTYPE html>
After that, things get a bit more interesting. We’ll leave it up to WordPress to set the proper version of HTML, so the next line of code looks like this:
<html <?php language_attributes(); ?>>
Next we’ll open the head section:
<head>
And then we set the viewport but leave the rest of the meta data:
<meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" />
At this point you can choose to either include the link to your stylesheet here in the header, or enqueue it in your functions.php file.
If you only have one stylesheet, you can enqueue it in the functions.php file(which is considered best practice) file later with this piece of code:
function THEMENAME_styles() {
wp_enqueue_style( 'THEMENAME-style', get_stylesheet_uri() );
}
add_action ( 'wp_enqueue_scripts', 'THEMENAME_styles');
(Note: Again, the code about should be included in your functions.php file, and NOT in your header.php file. If you already called in the stylesheet using link, don’t include this in your functions.php file.)
If you’re working with a preexisting HTML/CSS template and not too familiar with WordPress or PHP, it might be easier for you to simply hardcode it into the header here, especially if you have multiple completely different templates that you have seperate stylesheets for. (Though it is definitely possible to do something like that in functions.php, and we’ll cover that later.) Doing so would look like this:
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
Then simply call on WordPress to fill out the rest.
<?php wp_head(); ?>
At this point you can close the head tag, the title and everything else will get generated for each page by WordPress.
</head>
Next we’re going to move onto the body. Where in a standard HTML/CSS theme, you might style pages differently by adding different classes to the body of different pages, normally things are done differently in WordPress
Most already include the body tag in the universal header file, like so:
<body <?php body_class(); ?>>
WordPress will generate a number of classes, depending on template, and whether it’s a post or page etc. So if you have different styles for certain types of pages, you can create page templates later, and then target those via their name in the body type.
For example, if you have a full-width page template, instead of the selector being .full-width, it would now be; .page-template-page-full-width
But we’ll get back to that later.
Next you’ll want to deal with the actual, physical header. Open a header tag:
<header id="header" role="banner">
(Optional) Open a section :
<?php the_custom_logo(); ?>
This calls the custom logo selected with the logo function (if the logo function has been enabled in the theme functions.php file, more on that later).
If you want the functionality for a header image or even video, insert this:
<?php the_custom_header_markup(); ?>
If your template uses text for a header, then you can use the following (even if you don’t, if you are planning on releasing the theme at some point, you need to include this basic functionality):
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
This will show the title the same on every page, if you want to style the title differently on the homepage, and other pages, you can use this code:
<?php if ( is_front_page() ) : ?> <MARKUP AND CLASS YOU WANT ON HOMEPAGE><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></MARKUP> <?php else : ?> <MARKUP AND CLASS YOU WANT ON OTHER PAGES><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></MARKUP> <?php endif; ?>
Now you can also include site description if you want:
<h2><?php echo get_bloginfo( 'description'); ?> </h2>
Or you can check if the description is enabled in the customizer before showing it:
<?php $description = get_bloginfo( 'description', 'display' ); if ( $description || is_customize_preview() ) : ?> <?php echo $description; ?> <?php endif; ?>
Close the section
</section>
Navigation
Now it’s time to move on to the navigation or menu part of the header. (If your menu is above your header or logo in your template, obviously code it first in the WordPress theme also)
Open the nav tag:
<nav id="menu" role="navigation"
>
Then call the WordPress menu. (If your template has multiple menus, don’t worry, WordPress supports that you just need to name each placement. In the code below, it’s calling a menu named main-menu.)
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
Then if you want search functionality you can insert something like the following:
<div id="search"> <?php get_search_form(); ?> </div>
Now just close out the nav bar.
</nav>
Actually styling the menu, and making sure it looks like it does in your template is something we can tackle later in the stylesheet.
Now we can close the header tag
</header>
And open the container for the main content to come.
<div id="content-container" class="content-container">
And that’s the end of our header.php file. Save it, and create a new file, index.php.
Index.php
The first line in your index.php file should be:
<?php get_header(); ?>
This hooks in the header.php file, and we get all the tags and metadata we need for any page.
Now let’s open up the content section
<section id="content" role="main">
And here’s where we open the loop that we talked about in the last part.
Open a section tag for the entry:
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
Quickly checks if a post has a thumbnail, and if it does, it shows it.
Then we need to have a title right?
<div class="entry-title"> <a href=" <?php the_permalink(); ?>"> <h1><?php the_title(); ?></h1> </a></div>
This uses WordPress’s the_title function to call the title for each post, and also links to them using the the_permalink function.
Then come the main content:
<?php the_content(); ?>
Then if you want you can include the links using for example the wp_link_pages function:
<div class="entry-links"<?php wp_link_pages(); ?></div>
Close the section:
</section>
And if you want comments you can include them here:
<?php comments_template(); ?>
If you have a sidebar in your template use this:
<?php get_sidebar(); ?>
And then get the footer to close out the page:
<?php get_footer(); ?>
Then save your index file and we can move on to the next one.
Next let’s move on to the footer file.
Footer.php
Open up a footer tag
<footer id="footer" role="contentinfo">
You can put whatever you want here. For example, if you have a sponsor section in your theme, you can either hardcode that in here, or make use of WordPress’ widget function to do that.
<?php get_sidebar( 'footer' ); ?>
This line will hook a widget area called footer, so if you want to call it something else you need to put that name in there.
You can also add copyright information here, and anything else you might want to include in a footer.
</footer> <?php get_footer(); ?>
Sidebar.php
If you have added a widget area to your main index.php file, and/or to your footer.php file, now is the time to create a sidebar file.
In the main sidebar.php file meant to be the main widget area of your template, you only need to include a few lines of code.
Start an aside section for the sidebar, prompt WordPress if the sidebar is active, and then call on the dynamic sidebar function. All in all it should look like this:
<aside id="sidebar" role="complementary"> <?php if ( is_active_sidebar( 'sidebar' ) ) : ?> <?php dynamic_sidebar( 'sidebar' ); ?> <?php endif; ?> </aside>
If you have added a widget area to the footer, you need to repeat this process but save the file as sidebar-footer.php instead. (Just change the id of the sidebar called with the dynamic sidebar function, and the id of the section.) Should look something like this:
<div id="sponsors" role="complementary"> <?php if ( is_active_sidebar( 'sponsor-widget-area' ) ) : ?> <?php dynamic_sidebar( 'sponsor-widget-area' ); ?> <?php endif; ?> </div>
Functions.php
Now it’s time to deal with the functions.php file that controls all the functionality of your WordPress theme.
This is also where you add things like menus, widget areas.
This file is going to be all php, so open a php tag
<?php
First we’re going to create a function that adds all the WordPress functionality we want.
function THEMENAME_setup()
First, we need to make our theme support title tag because we didn’t hard code it into our header.
add_theme_support( 'title-tag' );
Then you’ll probably want WordPress to generate RSS links in the head. for your posts and content.
add_theme_support( 'automatic-feed-links' );
And if your template uses post thumbnails, and you inserted that code into your index.php page you need to enable that functionality:
add_theme_support( 'post-thumbnails' );
To add support for headers and video headers just add this snippet:
add_theme_support( 'custom-header', array( 'video' => true ));
Now we’re going to register our menus. the first value in the array is the name/id of the menu. So make sure it’s identical here in the functions file and where you call the menu in the other files (like the header or footer). The other values are how they’ll show up in the WordPress admin area (so you can use spaces and capitalization here) and finally the theme name.
register_nav_menus( array( 'main-menu' => 'Main Menu', 'THEMENAME', 'second-menu' => 'Second Menu', 'THEMENAME', ) );
Then we need to close the function:
}
And add an action that makes use of WordPress’ after_setup_theme function to make it run this function when the theme is activated.
add_action( 'after_setup_theme', 'scratch_setup' );
When registering widget areas we need to use a different function. Start by creating a function called THEMENAME_widget_init .
function THEMENAME_widget_init(){
Then you need to register each sidebar and fill in values for name, id, what you want WordPress to generate before and after the widget itself and the widget entry’s titles.
Two pretty typical entries for sidebar and a sponsor widget area would look like this:
register_sidebar( array ( 'name' => __( 'Sidebar', 'THEMENAME' ), 'id' => 'sidebar', 'before_widget' => ' <div>', 'after_widget' => "</div> ", 'before_title' => ' <h2 class="widget-title">', 'after_title' => '</h2> ', ) ); register_sidebar( array ( 'name' => __( 'Sponsor Widget Area', 'THEMENAME' ), 'id' => 'sponsor-widget-area', 'before_widget' => ' <div>', 'after_widget' => "</div> ", 'before_title' => ' <h2 class="sponsor-title">', 'after_title' => '</h2> ', ) );
Then we need to close the function.
}
Then add it to an action that makes use of WordPress’ widgets_init function.
add_action( 'widgets_init', 'scratch_widget_init' );
If you didn’t hard code the stylesheet into the header, here’s where you should put the code to call the stylesheet for your theme that I mentioned earlier:
function scratch_styles() {
wp_enqueue_style( 'scratch-style', get_stylesheet_uri() );
}
add_action ( 'wp_enqueue_scripts', 'scratch_styles');
Note: Again, don’t include this if you manually called the stylesheet in the head section.
If your template includes non-generic fonts or JS scripts or frameworks that are not included in WordPress by default, it’s now standard to include them in the functions.php file rather than manuallly typing it into the head or footer section of individual page templates.
Create a function for scripts, then you can use wp_register_style to include fonts, and wp_enqueue_script to include scripts.
If you want to use google font, for example Open Sans, it would look something like this:
function custom_fonts() {
$query_args = array(
'family' => 'Open+Sans:400,700'
);
wp_register_style( 'custom_fonts', add_query_arg( $query_args, "//fonts.googleapis.com/css" ), array(), null );
}
add_action('wp_enqueue_scripts', 'custom_fonts');
Style.css
Now we’re going to create and take a quick look at the style.css file.
Create a style.css file, and copy, paste and edit the appropriate areas of the following snippet:
/* Theme Name: YOUR THEME NAME Theme URI: http://whateverurl.com/yourtheme Author: YOUR NAME Author URI: http://whateverurl.com Description: Bestest, awesomemest theme ever! For all the following reasons:. Version: 0.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: awesomest, theme, ever, yo Text Domain: scratch Your Theme Name WordPress Theme © 2017 Your Name Your Theme Name is licensed under the terms of the GPL. */
After this, all you need to do is save the file, and it should show up inside the admin area as a theme. And if you choose to activate it, it should display content completely unstyled by CSS. (If you don’t have any content on your local installation of WordPress, you can use a plugin like FakerPress to easily get dummy content up and running.) With some content it should look something like this:
Congratulations, you’ve made a WordPress theme completely from scratch! Obviously this is only the first step of the way. In the next part we’ll tackle using page templates and the stylesheet to have implement the different page designs in your html template.
Before you move on however, I recommend that you check that the basic functionality you chose to include in your theme is working.
For example, if you included the header image/video function in your theme, you can go to the WordPress Customizer, and add a header image.
Then save the changes, and check your site, (hopefully you are using a development setup for this, local or otherwise), if you coded everything correctly it should show up:
If it doesn’t and you’re not sure where you got stuck, you can download the basic, style-less version of the Theme created during this tutorial.
If you’ve got everything working, then you’re ready to move onto part 3, styling the theme.
Leave a Reply