How to Build a Custom WordPress Theme from Scratch


If you’re expert in  CSS and HTML, it’s very simple to create wordpress theme scratch. This overview shows the process of how to create custom WordPress theme  from scratch. Before getting stuck into the build process, it’s important to know how WordPress themes work. If you’ve looked at any prebuilt theme, you’ll notice that it’s all contained in a folder, and there’s around 12 core files. Some themes, including the Default WordPress theme, include more files which allow extra cucustomization but aren’t mandatory additions. Here’s an overview of the main files you’ll be working with:

  • header.php – Contains everything you’d want to appear at the top of your site.
  • index.php – The core file that loads your theme, also acts as the homepage (unless you set your blog to display a static page).
  • sidebar.php – Contains everything you’d want to appear in a sidebar.
  • footer.php – Contains everything you’d want to appear at the bottom of your site.
  • archive.php – The template file used when viewing categories, dates, posts by author, etc.
  • single.php – The template file that’s used when viewing an individual post.
  • comments.php – Called at the bottom of the single.php file to enable the comments section.
  • page.php – Similar to single.php, but used for WordPress pages.
  • search.php – The template file used to display search results.
  • 404.php – The template file that displays when a 404 error occurs.
  • style.css – All the styling for your theme goes here.
  • functions.php – A file that can be used to configure the WordPress core, without editing core files

1). go to  wordpress theme folder (“C:\xampp\htdocs\wordpress\wp-content\themes”) here am created a folder demo Capture 2).  then create all the above mentioned php files and css files in the theme ( “demo” ) folder. Capture 3).  Configuring the stylesheet open style.css and paste the below code /* Theme Name: Demo Theme URI: http://www.codersfort.com Description: Sticky WordPress theme Version: 1 Author: Ananthu krishna Author URI: http://www.codersfort.com */ 4). now we can activate our theme from appearance go to appearance-> activate our theme Capture

5). header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta name=”viewport” content=”width=device-width” />
<title><?php wp_title( ‘ | ‘, true, ‘right’ ); ?></title>
<link rel=”stylesheet” type=”text/css” href=”<?php echo get_stylesheet_uri(); ?>” />
<?php wp_head(); ?>
</head>

<body>
<div id=”mainwrap”>
<div id=”logodiv”></div>
<div id=”menudiv”><?php wp_nav_menu( array(‘theme_location’ => ‘top-nav’ , ‘container_class’ => ‘menu’)); ?></div>
<div id=”innerwrap”>

6). index.php (you can use the same code for page.php,single.php)

<?php get_header(); ?>
<div id=”leftwrap”>
<?php if(have_posts()): ?>
<?php while (have_posts()):the_post(); ?>
<?php the_title(”);?>
<?php the_content(”)?>
<?php endwhile ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

7). functions.php

<?php
add_action( ‘wp_enqueue_scripts’, ‘demo_load_scripts’ );
function demo_load_scripts()
{
wp_enqueue_script( ‘jquery’ );
}
// Register menus

if ( function_exists( ‘register_nav_menus’ ) ) {
register_nav_menus( array(
‘primary’ => __( ‘Primary Navigation’ ),
‘secondary’ => __( ‘Secondary Navigation’ )
));
}

function register_my_menus() {
register_nav_menus( array(
‘top-nav’ => __( ‘Top Nav’ )
)
);
}

register_sidebar(
array( ‘name’ => __( ‘Right Hand Sidebar’ ),
‘id’ => ‘right-sidebar’,
‘description’ => __( ‘right-hand side.’ ),
‘before_title’ => ‘<div>’,
‘after_title’ => ‘</div>’
));

?>
8). style.css

/*
Theme Name: Demo
Theme URI: http://www.codersfort.com
Description: Sticky WordPress theme
Version: 1
Author: Ananthu krishna
Author URI: http://www.codersfort.com
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:”;content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
body{
background:#CCC;
margin-top:0px;

}
#mainwrap{
width:900px;
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
overflow:hidden;
}
#menudiv{
width:900px;
height:42px;
}
#logodiv{
width:900px;
height:100px;
}
.menu {
background-color:#CCC;
display: block;
float: left;
margin: 0 auto;
width: 100%;
height: 42px;
}
.menu ul,
div.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu li,
div.menu li {
float: left;
position: relative;
}
.menu ul ul {

display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}

.menu a {
color: #000;
display: block;
line-height: 42px;
padding: 0 10px;
text-decoration: none;
font-weight: normal;
}
.menu ul li:hover > ul {
display: block;
}
.menu li:hover > a,
.menu ul ul :hover > a {
background: #333;
color: #fff;
}

.menu ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}

.menu ul li.current_page_item > a,
.menu ul li.current-menu-ancestor > a,
.menu ul li.current-menu-item > a,
.menu ul li.current-menu-parent > a {
color: #fff;
}
#innerwrap{
width:900px;
height:auto;
overflow:hidden;
}
#leftwrap{
width:600px;
height:auto;
float:left;
}
#sidewrap{
width:250px;
height:auto;
float:left;
}
#footerwrap{
width:900px;
height:100px;
background:#333;
}

9). Final Out Put

 

 

Capture

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s