Many people think creating a wordpress theme from scratch is quite hard, but guess what, its very easy to do it. Few years ago i posted a tutorial about easiest way to create a wordpress plugin, and i got so many responses. Today its time for a theme.
I am going to show you the easiest way to create a minimalistic wordpress theme from the scratch. Lets do it in just few steps and later we will connect all nuts and bolts!
We create a HelloWorld theme with 1 sidebar, index page and single post page. You can upload the logo or header background from admin dashboard > theme options > custom header.
We will keep it very damn simple. This tutorial only covers minimalistic wordpress theme. I am not going to go detailed code on styling and designs. I will leave that to you. Just the coding fundamentals here.
Lets get started…folks!!
Step 1:
First create basic 5 files in your theme folder
- styles.css (stylesheet)
- header.php (header part)
- footer.php (footer part)
- index.php (main home page)
- single.php (view single post )
- functions.php (heart of wordpress theme)
- sidebar.php (to show sidebar)
- comments.php (to show comments)
- page.php (needed to show page content)
- category.php (to show category pages)
- archive.php (to show archive posts)
I will be intentionally leaving the rest of pages, as we are only going to create a minimalistic wordpress theme. We won’t be creating any widgets, menus.
Step 2:
open styles.css and paste this code on the top. Make changes to the below content (don’t leave anything blank)
/* Theme Name: HelloWorld Theme URI: https://corpocrat.com/2014/03/03/thinlines-free-wordpress-theme-for-personal-blogs/ Author: Prabhu Balakrishnan Author URI: https://corpocrat.com Description: Glossy wordpress theme with full width content layout. Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, one-column,right-sidebar,threaded-comments,full-width-template Text Domain: thinlines This theme is licensed under the GPL. Please spread the word by means. Thank you */
Include all the styles here in styles.css. Use Firebug to point out the styles and style it accordingly. I am not going to go detailed code on styling and designs. I will leave that to you.
Step 3:
Open header.php and paste this code
/** * The Header template for our theme */ ?><!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php wp_title( '-', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="wrapper"> <div id="header"> <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" /> <div id="searchform"><?php get_search_form(); ?></div> </div><!--end header-->
Step 4:
Open index.php and paste this code
<?php get_header(); ?>
<div id="content">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if(has_post_thumbnail()): ?> <div class="thumb"><?php the_post_thumbnail(array('300','200')); ?></div><?php endif; ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div class="entry">
<p><?php the_excerpt(); ?>
<p class="date"><?php echo get_the_date(); ?> <?php echo get_the_time(); ?></p>
<p class="commentcount">
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
</p>
</div>
</div> <!--end post -->
<?php endwhile; ?>
<?php endif; ?>
</div> <!--end content-->
<?php get_footer(); ?>
Step 5:
Open single.php and paste this code…
<?php get_header(); ?>
<div id="content">
<?php get_sidebar(); ?>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="title"><?php the_title(); ?></h1>
<div class="entry">
<p class="postmetadata">
Written by <?php the_author_posts_link(); ?>
on <?php echo get_the_date(); ?> in
<?php the_category('/ ') ?> with
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
<?php edit_post_link('Edit', ' | ', ''); ?>
</p>
<div class="thecontent"><?php the_content(); ?></div>
<?php if(has_tag()): ?><p class="tags"><?php the_tags(); ?> </p> <?php endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_link_pages(); ?>
</div> <!--end content-->
<div style="clear:both;"></div>
<?php comments_template(); ?>
</div> <!--end main-->
<?php get_footer(); ?>
Step 5:
Open functions.php and paste these lines of code..
<?php
/************************ Theme Setup ***********************************/
add_action ('after_setup_theme','helloworld_theme_setup');
function helloworld_theme_setup () {
add_theme_support('post-thumbnails');
set_post_thumbnail_size(150, 150, true);
add_theme_support( 'automatic-feed-links' );
add_theme_support('custom-header');
if ( ! isset( $content_width ) )
$content_width = 600;
}
/********************************* Right Sidebar Widget Setup **********************************/
add_action( 'widgets_init', 'thinlines_widgets_init' );
function thinlines_widgets_init() {
register_sidebar(array(
'name' => 'Right Sidebar',
'id' => 'right-sidebar',
'description' => 'Widgets in this area will be shown on the right-hand side.',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
?>
Step 6:
Open comments.php and paste the following code.
<div id="comments">
<h1> <?php comments_number( '', '1 Comment', '% Comments' ); ?></h1>
<?php wp_list_comments(array('avatar_size' => '128')); ?>
<?php comment_form(); ?>
</div>
Step 7:
Open sidebar.php and paste the following code
<?php if(is_active_sidebar('right-sidebar')): ?>
<div id="right-sidebar">
<?php dynamic_sidebar('right-sidebar'); ?>
</div>
<?php endif; ?>
Thats it our wordpress theme is almost ready! Rest of the parts of the theme, like category.php, archive.php – you can copy the index.php code and modify them accordingly. To create page.php you can copy the code from single.php and modify accordingly.
To write clean wordpress themes, be sure to follow the core guidelines. There are some excellent links below:
https://make.wordpress.org/themes/guidelines/
http://www.chipbennett.net/2011/02/17/incorporating-the-settings-api-in-wordpress-themes/
