 |
VOOZH | about |
|
VOOZH | about |
Writing your own WordPress template from scratch is fairly simple. If you are into Web Development industry, you might've already heard what "WordPress" is. Maybe a client has mentioned, but you're not familiar with it. Maybe you've already worked with it before, but don't know how to make a theme from scratch. Or maybe you're a complete newbie. Whatever is the case, this post is for you.
Prerequisites:
Before we begin, you'll need to fulfill the following set of requirements.
Scope
Designing a WordPress theme is a long, tedious, never ending but a great programming challenge. The development process depends entirely on how you want your theme to look like. This post is just a tutorial and does not cover all the bits and pieces required for a standard WordPress theme. After going through this article, you have to heavily rely on
WordPress Codexand
WordPress StackExchangefor your further queries.
Getting Started
With the prerequisites in mind, let's get started. The very first thing you need to know is the fact that almost everything you do in WordPress is inside the
wp-content
directory. Everything else is the WordPress CMS itself and you don't want to mess with that. When you'll open
wp-content -> theme
directory, you'll find default WordPress themes, like
twentyfifteen, twentyfourteen, twentythirteen
, etc. To start with one of your own, create a directory with whatever name you prefer. For this post, we'll call it
wpstart
.
A WordPress theme atleast needs two files to exist - style.css and index.php
So go into
wpstart
folder and create these two files. In
style.css
, insert the following comment. This tells the WordPress dashboard about the theme details and meta information.
Now switch to your WordPress dashboard, and click on
Appearance > Themes
. You'll find
WP Start
in your theme collection.
👁 WP Start PreviewGo ahead and activate this theme, and then visit the site. And Voila! You've technically created a custom theme, all by yourself. Of course, it doesn't do anything except it has a blank white screen. This is where
index.php
comes into action. Open
index.php
in text editor and write in the following code.
Visit the site once again and get your first WordPress template up and running.
To develop a standard WordPress theme, you need to divide all your work into sections. This is not necessary, as you can do everything in
index.php
, but a good programming practice involves modularity. For this particular post, we will divide our entire work into
four
sections, viz. header, footer, sidebar and content. Corresponding to these sections, we will create four different files, namely
header.php
,
footer.php
,
sidebar.php
and
content.php
.
<head> for HTML.<title>WP Start<title>with
<title> <?php echo get_bloginfo( "name" ); ?> </title>This is called embedding small php excerpt into HTML. (Technically, we are writing HTML in php file. So we're embedding HTML in php code). So the
header.php, with some additional code, becomes; Additional php excerpts used in this code are; <?php echo get_bloginfo( 'template_directory' ); ?>This is to get the directory of the template, so that addition resources like CSS, JS, fonts, etc. can be located.
<?php echo esc_url( home_url() ); ?>This will echo the homepage url of the site.
header.php are closed in this file. The additional php excerpt used in this file is; <?php echo get_bloginfo( "description" ); ?>This will fetch and place the site description. Another thing to mention here is that I have used "hard-coded" sub-sections like "Contacts" and "Links" in the
footer.php file. Instead, you can use WordPress Widgets to automate and make them modifiable directly via Customizer. This, however, is beyond the scope of this post and we'll discuss it any time in the future articles. Now let's move back to the
index.php
where we will integrate all the above sections into one. As this file is an entry point for our theme, we can cleverly choose to put these sections. Here's how I've done it.
The
php
excerpts used here are self explanatory.
get_header(), get_sidebar()
and
get_footer()
are predefined functions used for embedding corresponding sections. For a custom section like
content.php
, embedding is done by the following code;
<?php get_template_part( 'content', get_post_format() ); ?>
style.css
: Now that we have updated our
index.php
file, let's add some charm with
CSS
.
And Voila! The first look of your custom WordPress theme is ready.
👁 Bare Bones WordPress themeThe Loop
This is the most exciting part of the entire WordPress theme development where you have control of all the posts.
The Loopis a functionality with which you can dynamically insert content into your theme. Our aim in this tutorial is to present all the blog posts as a user-friendly list so that the reader can choose any one of them. Let's see how we do it. The loop itself is self-explanatory.
IF there are any posts, WHILE there are none left, DISPLAY them. Anything inside this loop will be repeated, till the page runs out of all the posts. We can use this concept to display our list. Here's how I have done it.
And changed the
index.php
to this.
Let's look at what just happened! The Loop in
index.php
is calling the
content.php
everytime the page has a post. Inside
content.php
, I've checked if the current post
is_single()
. This condition will hold true if the current page contains only a single post to loop through. When it is not single, I wanted a link to that post via its title. So I used
get_permalink()
to get the url of that particular post. However, if the page is single, there is no need of a link and therefore, I've used only
the_title()
function. Moving on to the meta info of the post. I've displayed
the_date()
on which the article was published and its
the_author()
. Finally, I've used the same concept of
is_single()
to either display
the_excerpt()
or
the_content()
of the post. See, it was that easy and fun. Now with a little charm of
CSS
, I got the following result.
👁 WP Start themeConclusion
:
Happy Programming!
