Basic WordPress Theme Development
In this article, we are going to create a Basic WordPress Theme Development. In this tutorial, we create a WordPress theme from scratch. So this article is all about developing a WordPress theme. If you want to learn about how to use and apply themes then review this WordPress article. This topic differs from how to use the theme and apply the theme. So we will only discuss the technical aspect of writing a code and build your own theme.
We will create a few articles on WordPress theme development tutorial. Must read this all article to understand how WordPress theme work. we will link bootstrap classes to this WordPress Theme. WordPress themes are files that work together to create the design and functionality. If you want to be WordPress developer then you need to know few things about WordPress development. so we will learn WordPress theme development step by step.
the WordPress theme typically consists of two main files.
The other WordPress template files are optional. it typically contains WordPress template hierarchy. following is the list of Wordpress theme template list files.
These files are used to replace WordPress index.php file when available. it depends on your theme type how functional theme you wanted to do. These files are used to create more functionality to your WordPress theme. The most important part is that WordPress have there default file or function to perform a certain task. For example, if you want to show header you just need to add <?php get_header(); ?>
There are some custome templete files for that.
Make sure when creating this WordPress template files all file name are exactly match with the WordPress template file name. we will discuss creating own template file in future articles.
First of all, we need to create the style.css file in the root folder of WordPress theme. Do not add the style.css file in any subdirectory. WordPress probably look for template files with specific names in the current theme directory. hence, if you place this file in the subdirectory then WordPress did not find it and you will not able to view theme in the WordPress theme appearance.
WordPress uses the comment header section of the style.css file to display information about your theme. especially, it contains Theme Name, Theme URI, Author, Description and much more.
Theme Name: Daily
Theme URI: http://www.dailywebtuition.com
Author URI: http://www.dailywebtuition.com
Description: The them is created for demo purpose and used in dailywebtuition.com website.
This is most generic template file in the WordPress and one of the two required files for the theme. It is specially used to display a page when nothing matches template file are not there. if other template files are there as a result index.php file will replace with that file.
To Include the header in your theme just add <?php get_header(); ?> and <?php get_footer(); ?> to insert footer section in your theme.
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Furthermore, we will add a loop. The loop is the mechanism WordPress uses for outputting posts through a theme template files. The loop extracts the data for each post from the WordPress database and inserts the appropriate information in place of each template tag.
You can use the loop to display post titles and excerpts, display content and comment on the single post, the display content of the individual page and display data from the custom post type. Following is the code to create the loop.
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
... Display post content here
<?php endwhile; ?>
<?php endif; ?>
Finally, we want to show our post title and content on index.php page. So we will insert code in the loop to show post title and content on the page.
After inserting it your index.php file would look like this.
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<p><?php the_content(); ?></p>
<h5><?php echo "No Content Found"; ?></h5>
<?php endif; ?>
<?php get_footer(); ?>
Now your basic WordPress theme is ready to live. But there are lots of things to do. In the next article, we will show you how to create further theme function. So don’t forget to visit next article.
That all in this lesson.