Do you carry basic knowledge about CSS, JavaScript, and HTML?
You can then easily create WordPress themes. WordPress is the most significant open-source CMS of the world right now. In the year 2020, more than 455 million websites are using WordPress. Also, more than 20% of self-hosted websites use WordPress currently.
This platform helps in creating a full-bodied online presence through your business website. When creating your business website, it is important to focus on the theme. Themes help websites seem more attractive which is an essential quality in luring web visitors to explore your web page.
Are you knowledgeable about how WordPress theme development works? This guide will help you learn.
Penning Down Requisites First
If you are opting for WordPress theme development from scratch, it is important to know the requisites.
- Install WordPress locally
- Procedure for WordPress theme development step by step
- Automated – develop WP themes with WordPress Theme Builder
- Manual – develop WP themes through coding
- All work performed in wp_content directory for WP theme. You can create a fresh theme subfolder in wp_content – Themes folder. Name the subfolder as “mytheme”
- In this tutorial, you will see the basic layout files. These are Header, Sidebar, Main area, and Footer
- WordPress requires just two files namely index.php & style.css
- But you will need these files for this particular layout
- index.php – This is the major file of a theme where you find the code
- bootstrap.css – This is highly responsive without the need of detached code
- header.php – Here you find the code for the theme’s header section
- bootstrap.js – Offers its own js for tabs and navigation bars
- sidebar.php – This comprises information regarding sidebar
- style.css – This is accountable for the theme styling
- footer.php – This is responsible for the footer section of the theme
It is important to download the Bootstrap package. Bootstrap.cs & Bootstrap.js file must be copied to the theme folder.
Steps to Build WordPress Themes
This WordPress theme development tutorial for beginners is an informative one. Creating WP themes with coding or with Template Toaster is possible.
Now we will learn about the files with which you can get started.
1. header.php – The code is as follows
<html>
<head>
<title>Tutorial theme</title>
<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri().’/js/jquery.js’; ?>”>
</script>
<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri().’/js/jquery-ui.min.js’; ?>”>
</script>
<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri().’/js/bootstrap.js’; ?>”>
</script>
<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri().’/css/bootstrap.css’; ?>”>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
</head>
<body>
<div id=”ttr_header” class=”jumbotron”>
<h1>HEADER</h1>
</div>
<div class=”container”>
This file comprises the header part’s code where you will find the connection of style & js file. This showcases the page’s header.
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
As you add this line after your title, WP will load the style.css file. This will manage the website’s styling.
This is one kind of a WordPress function that heaps the stylesheet
<?php bloginfo(‘stylesheet_url’); ?>
<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri().’/css/bootstrap.css’; ?>”>
Bootstrap is one of the finest frameworks for WordPress theme development. This framework offers inbuilt CSS files for styling a website.
The chief container of your website will now be added. This will be a ‘div’ along with class ttr_header. Now you will set the class for it. This is important for modifying it through style.css file.
Following this, simply add a label HEADER. You need to add in ‘div id’ along with the class “ttr_header”. This will receive specification later on in class ‘jumbotron’.
2. index.php – The code is as follows
<?php get_header(); ?>
<div id=”ttr_main” class=”row”>
<div id=”ttr_content” class=”col-lg-8 col-sm-8 col-md-8 col-xs-12″>
<div class=”row”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”col-lg-6 col-sm-6 col-md-6 col-xs-12″>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time(‘F jS, Y’) ?></h4>
<p><?php the_content(__(‘(more…)’)); ?></p>
</div>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
The first line of the code in the file
<?php get_header(); ?>
This will incorporate code & header.php file
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”col-lg-6 col-sm-6 col-md-6 col-xs-12″>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time(‘F jS, Y’) ?></h4>
<p><?php the_content(__(‘(more…)’)); ?></p>
</div>
<?php endwhile; else: ?>
Next you add sidebar.php file as shown beneath
<?php get_sidebar(); ?>
In this particular file, you can showcase recent archives and posts
Following this line, you will insert a vacant ‘div’ that will detach the main sidebar & area from footer
At last, add the last line:
<?php get_footer(); ?>
This will incorporate the footer.php file.
3. Sidebar.php – The code is as follows
<div id=”ttr_sidebar” class=”col-lg-4 col-md-4 col-sm-4 col-xs-12″>
<h2 ><?php _e(‘Categories’); ?></h2>
<ul > <?php wp_list_cats(‘sort_column=namonthly’); ?> </ul>
<h2 ><?php _e(‘Archives’); ?></h2>
<ul > <?php wp_get_archives(); ?> </ul>
</div>
In this specific file, interior WordPress functions are regarded for showcasing various categories and archives of posts. The WP function revisits the list items. This calls for wrapping up actual functions in the unsorted lists – (the <ul> tags).
4. footer.php – The code is as follows
<div id= “ttr_footer”>
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
By doing this, you will be adding a normal FOOTER label. But you can even add links and copyright information for the theme in the position of the normal Footer text.
5. style.css file – The coding is as follows
body
{
text-align: left;
}
#ttr_sidebar
{
border-left: 1px solid black;
}
#ttr_footer
{
width: 100%;
border-top: 1px #a2a2a2 solid;
text-align: center;
}
.title
{
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}
The CSS file will set the fundamental appearance of the theme. Also, this will position the page background & add borders as per the requisites.
You can further alter the CSS file as you add animations, content, and images to the theme for making the website look eye-catching.
Final Say
A modern WordPress theme development process looks like the one you find in this content.
You can also use WordPress theme development software. The software will help you to engage in perfect WordPress theme development.
Also with theme generators, you can create themes without learning to code. The arena of WP development is intriguing. If done correctly, it can work in favor of your business. Are you interested to know more about WordPress theme development? Or, what particular aspect of WordPress theme development do you need help with?