Wordpress Tutorials

Wordpress setting

Wordpress Function

wordpress top 10 problems

Important Links

Home » wordpress » wordpress themes

How to create wordpress themes.

steps to create a WordPress theme.

1. Create new theme folder.

2. Create WordPress theme-specific files like header, footer and stylesheets.

3. Add styles to the new theme.

Create New Theme Folder

First, we have to create new folder for the theme. When you install the theme in WordPress, this folder should be located at

/wp-content/themes/

Create WordPress Theme-Specific Files

For a minimal WordPress theme, the following files will be sufficient.

header.php – to add title, client side script, styles and etc.

footer.php – to add footer menu if any, copyright information, feeds and etc.

index.php – home page to post list of articles.

styles.php – to add styles for the theme

File name : header.php

<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo('name'); ?><?php wp_title( '|', true, 'left' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body>
<div align="center">
<div id="inner">
<header>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo bloginfo('name'); ?>" rel="home">
<h1><?php bloginfo( 'name' ); ?></h1>
</a>
</header>

File name : footer.php

<footer>
<div id="footer">© <?php date('Y'); ?> <?php bloginfo('name'); ?> Theme is copyrighted to Vincy.</div>
</footer>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

File name : index.php

<?php
get_header(); ?>
<div id="contentArea">
<div id="mainContent">
<?php while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title() ?></a></h2>
<?php the_content() ?>
<?php endwhile; ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

style.css :-

/*
Theme Name: SharpEdge
Theme URI: http://localhost:85/wordpress/themes/sharpEdge
Version: 0.1
Author: Vincy
Author URI: http://phppot.com/
Description: A Minimal Wordpress Theme.
Tags: minimal, simple, responsive, light-weight
Text Domain: sharpEdge
*/
a {
color: #A0A0A0;
text-decoration: none;
}
#inner {
width: 778px;
text-align: left;
}
#contentArea {
border-top: #CCCCCC 2px solid;
overflow:hidden
}
#mainContent {
float:left;
width: 70%;
}
#sidebar {
float: right;
width: 28%;
padding-left: 3px;
padding-bottom:100%;
margin-bottom:-100%;
background-color: #DDDDDD;
}
#footer {
clear:both;
padding: 2px;
color: #DDDDDD;
background-color: #000000;
}

File name : page.php

File name : sidebar.php

<div id="sidebar">
<h2>Categories</h2>
<ul >
<?php wp_list_cats(); ?>
</ul>
</div>

File name : single.php

For themes screenshort :-

capture the screenshot of demo theme. which name is screenshot.
copy and paste the screenshot images in theme directory.
screenshot.jpg