WordPress Theme Development
In WordPress, themes drive a website and determine what it contains, how it behaves and what it looks like. The theme is separate from the content, which is held in the database. This means you can use the same theme on more than one website, regardless of the content of the websites — which you might already be doing if you’ve downloaded themes from WordPress’ theme repository.
A theme consists of a number of template files, all stored in the theme folder, which you’ll find in
wp-content/themes in your WordPress installation. Every WordPress theme has to include at least two files: index.php and style.css. The index file defines what content is displayed by the theme, and the style sheet (you guessed it) styles it, as well as contains meta information about the theme that WordPress uses to make the theme work correctly.
wordpress theme development wordpress codex
Essential WordPress Theme Development Tutorial Help You To Make Perfect WordPress Theme. In this tutorial i will show you and must give reference about wordpress theme development. WordPress Theme Development Codex was Wrote by WordPress Administrator. New wordpress theme developer can’t make a featured wordpress theme before read and knowing about wordpress theme development codex. Today i will teach you how you can make a wordpress theme for your blog.this is a special trick about wordpress theme development because of i will share a wordpress theme code that look like trickbd.com trickbd wordpress theme design. hope the theme design and codex will help you to make a perfect wordpress blog theme. before start a theme coding you need to know about basic wordpress codex from official wordpress codex. WordPress theme development have instructions about wordpress codex that wordpress administrator was coded by php sql and others. newly you don’t need to have sufficient codex knowladge of wordpress theme development. this tutorial will fully help you to make a wordpress theme and which code you need to put and how to you can.now we are going to make a wordpress theme by wordpress codex.basically you need to make two folders. 1.includes 2.images
now make a file into includes folder. go to include folder and make a file by this name “post-related.php“. before start wordpress theme development you need to make some of files by below list.
header.php
footer.php
index.php
sidebar.php
function.php
style.css
comments.php
404.php
archive.php
author.php
single.php
page.php
after you was created the above list of files,then you can start wordpress theme development now.
Theme Development: Your Options
A few options are available for developing your theme or themes, and investigating them before you roll your sleeves up and start coding would be worthwhile. Picking the right approach will result in a better theme, with more robust code, and it will minimize the amount of revisions you’ll have to do later. It will also help you to build the theme more efficiently.
The options we’ll look at here are:
- Build a theme from scratch,
- Edit (or “hack,” some might say) an existing theme,
- Use the theme customizer to tweak an existing theme,
- Create a child theme to make changes to an existing theme,
- Create your own parent theme (using one of the approaches above) and child themes,
- Use a theme framework.
1. Build A Theme From Scratch
This approach is the most difficult if you’re inexperienced. But if you’re a seasoned WordPress developer, it will give you the most control. It might be the most appropriate method if you’re importing HTML from an existing static website that is being upgraded to WordPress with no other changes.
However, when transferring a website to WordPress, conducting a review of it as part of the process, rather than simply copying the code across, is a good idea. If you are copying a static website, you’ll need to keep a close eye on your code to ensure that it’s clean, efficient and valid.
2. Edit (or Hack) an Existing Theme
This is how most people start with WordPress theme development: in working on a theme that they’ve downloaded, they see that some styling isn’t quite right, so they delve into the style sheet and make some edits. Starting like this is tempting because it feels like a quick and easy way to achieve the effect you want. But there are some dangers:
- If you ever switch themes, that update will override any changes you’ve made.
- It’s easy to add repetitive code by adding new styles lower down in the style sheet that override styles higher up, rather than removing what you don’t need.
- The website could end up with a lot more code than it needs.
- If the theme isn’t well coded or commented to begin with, you could get yourself into a bigger mess and find that you have to make a lot of fixes.
However, hacking a theme can work if you go into it with your eyes open. It may be an option if the following are true:
- The theme you’re using is well written, valid and commented (e.g., the default WP theme, Twenty Eleven);
- The changes you’re making are so drastic that you wouldn’t need to update the original theme;
- You understand the PHP and CSS contained in the theme and are comfortable editing, adding to and removing it without breaking the theme.
If you do decide to go down this route, keeping a backup of the original theme and commenting your code thoroughly are important. I would also advise commenting out any code that you don’t want and then testing to see what happens before deleting anything.
style.css wordpress theme development
first open style.css file and copy the below code and replace into style.css file and hit save.
/*
Theme Name: WordPress Theme Development Demo
Theme URI: http://howtrick.com
Author: Liton
Author URI: https://facebook.com/hacku2day/
Description: WordPress Theme
Version: 1.0
*/
*{margin: 0;padding: 0;}
body{ width: 100%; font-family:Verdana,Arial,sans-serif; font-size: 14px; background: #dcdee3}
a{text-decoration: none; color: blue}
a:visited {text-decoration: none; color: blue }
a:hover {text-decoration: underline; color: blue }
.pad4{padding: 4px;}
.block_header{background: #F5F5F5;}
.header_logo{background: #eee;}
.header_logo img{width:170px;; padding: 3px}
.header_logo h1{color: #000;padding: 5px}
.header_logo a:hover{color: #000;text-decoration: none;}
.block_top_menu{clear: both; background: #23282D; }
.block_top_menu ul{list-style: none; background: #23282D; }
.block_top_menu ul li{text-align: center; width: 32%; text-align: center; background: #23282D; display: inline-block}
.block_top_menu ul li:hover{background: #333; }
.block_top_menu ul li a{padding: 5px 0px; color: #bdc1c9; display: inline-block; width: 100%; font-family: verdana;}
.block_top_menu ul li a:hover{text-decoration: none}
.block_fotter {padding: 5px; border-top: 1px solid #ddd; text-align: center; padding-top: 8px;}
div.block_fotter, div.footer_left, div.footer_left { background: #333;}
.block_fotter ul{list-style: none; text-align: left}
.block_fotter ul li{display: block; color: #ddd;}
.block_fotter ul li a{text-align: center; font-size: small; color: #bdc1c9; padding: 2px 2px; display: inline-block}
.switch_pc {margin-top: 15px; }
.switch_pc a{color: #ddd; border: 1px solid #ddd; padding: 2px 0px; display: block }
.switch_pc a:hover{text-decoration: none }
.footer_left{float: left; width: 48%; }
.footer_right{width: 100%; }
.login_box{border: 1px solid #ddd; padding: 2px ; font-size: 12px; text-align:center; padding: 5px;}
.say_hi{font-size: 12px}
.block_notice{border: 1px solid #ddd;}
.block_general{border: 1px solid #ddd;}
.block_general p{padding: 5px;}
.block_notice p{padding: 5px; font-family:'Trebuchet MS'}
.block_posts{border: 1px solid #ddd;}
.block_single{border: 1px solid #ddd; overflow: hidden; }
.block_404{border: 1px solid #ddd; overflow: hidden;}
.post_paragraph {padding: 5px}
.post_paragraph li{}
div.post_paragraph {padding: 5px}
div.post_paragraph img{margin: 2px 0px}
div.post_paragraph p{padding: 5px 0px}
.author_single {padding: 2px; border-bottom: 1px solid #ddd;}
.author_single td{vertical-align: top;}
.author_single .avatar{padding: 2px; border: 1px solid #ddd}
td.avata_post{ width: 65px;}
td.author_name {padding: 5px; float: left;}
td.right_post_info{float: right; font-size: 13px}
div.user_role {font-size: 12px; color: #333}
div.user_role:first-letter {text-transform: uppercase}
.post_rate {margin-top: 5px; font-size: 13px}
.post_rate a{margin-top: 5px; font-size: 13px; color: #000}
.post_rate a:hover {text-decoration: none; color: #444}
.post_options{padding: 5px; font-size: 14px; background: #f5f5f5; border-top: 1px solid #eee; }
.rpul {}
ul.rpul li{padding: 5px; border-bottom: 1px solid #ddd; display: block; min-height: 65px;}
ul.rpul li:last-child{padding: 5px; border-bottom: 0px}
ul.rpul img{float: left; padding: 1px; border: 1px solid #f4f4f4; margin-right: 3px; width: 60px; height: 60px;}
ul.rpul p{ display: block; font-size: 13px}
ul.rpul p a{display: inline-block; font-size: 13px; color: #000}
ul.rpul a{font-size: 15px;}
.spu{padding: 5px}
.block_category{border: 1px solid #ddd; }
.block_404 p{padding: 5px}
.block_404 h1{padding: 5px}
.block_category ul li{padding: 5px; border-bottom: 1px solid #ddd}
.block_category ul li:before{content: " › "}
.block_category ul li:last-child{padding: 5px; border-bottom: 0px}
.block_notice, .block_category, .block_posts, .block_404, .block_general, .block_single, .author_block, .block_comment, .related_post{margin:4px; background: #fff}
.block_notice h2, .block_posts h2, .block_category h2, .block_single > h1, .block_404 h2, .block_general h2, .related_post h3, .author_block h2{font-size: 15px;
background: #f5f5f5; padding: 5px; border-bottom: 1px solid #ddd}
.main_nav {display: block; overflow: hidden; background: #333; border-bottom: 2px solid #FF2F2F;}
.main_nav ul{list-style: none; margin: 0; padding: 0;}
.main_nav ul li{float: left; padding: 5px 5px; border-right: 1px solid #222; font-family: "Trebuchet MS"; transition: .5s; }
.main_nav ul li:hover{background: #FF2F2F}
.main_nav a{color: #bdc1c9}
.main_nav a:hover{text-decoration: none; color: #fff}
.breadcumbs{background: none repeat scroll 0 0 #f4f4f4;border-bottom: 1px solid #eee;font-size: 12px;padding: 5px;}
.breadcumbs_single{padding: 5px; margin: 4px; font-size: 12px; background: #f5f5f5; border: 1px solid #ddd;}
.wp-pagenavi { clear: both;margin: 10px 4px;}
.wp-pagenavi a, .wp-pagenavi span {
background: #fff;
}
.wp-pagenavi span.current {
background: #e5e5e5 none repeat scroll 0 0;
border: 1px solid #999;
font-weight: normal;
}
.related_post{border: 1px solid #ddd; margin: 4px}
div.related_post ul li {border-bottom: 1px solid #f5f5f5; padding: 4px; min-height: 65px}
div.related_post ul li:last-child {border-bottom: none; padding: 4px}
div.related_post ul li p {font-size: 12px}
div.related_post ul li img { border: 1px solid #f4f4f4; float: left;height: 60px;margin-right: 3px; padding: 1px; width: 60px;}
.author_block{border: 1px solid #ddd;}
.author_block img{border: 1px solid #ddd;border: 1px solid #f4f4f4; padding: 1px;}
.author_block td{vertical-align: top;}
.author_info{padding: 4px;border-top: 1px solid #ddd; }
.author_info span{color: #333;}
.ad_block{border: 1px solid #ddd; background: #f5f5f5; }
.ad_block > h2 { border-bottom: 1px solid #ddd; display: inline-block; font-size: 10px; font-weight: normal;}
.ad_block ul{list-style: none; margin: 0; padding: 0;}
.block_comment{border: 1px solid #ddd;}
.block_comment h3{font-size: 15px; background: #f5f5f5; padding: 5px; border-bottom: 1px solid #ddd; margin-bottom: 4px; margin-top: }
.commentlist ul, .commentlist ol {list-style: none}
.commentlist .children {margin-left: 15px; border-left: 1px solid #e1e1e1;}
.comment-body {display: block;padding: 10px; border-bottom: 1px solid #ddd;min-height: 65px; position: relative; }
.comment-body p{margin-left: 40px;}
.commentlist .avatar {border: 1px solid #e1e1e1;float: left;padding: 1px;}
.commentmetadata { margin-top: 3px; display: inline; float: right; position: absolute; right: 0;}
.commentmetadata a{color: #757575; font-size: 12px; vertical-align: top; }
.reply {min-height: 15px;}
.commentlist .reply a { position: absolute; bottom: 0px; right: 0px; background: #E7E7E7; padding: 3px 10px; font-size: 11px; color: #000}
.commentlist .reply a:hover { background: #f5f5f5; color: #000; text-decoration: none;}
.says{display: none}
.fn {font-family: sans-serif;font-style: normal;font-weight: bold;margin-left: 7px;}
.comment-author.vcard { margin-left: 5px;}
.commentlist p{ font-size: 14px; display: block; overflow: hidden; position: relative; padding: 4px;}
#respond > div { background: none repeat scroll 0 0 #e7e7e7;display: inline-block; float: right;margin-top: -4px; padding: 3px 10px; text-align: right;}
#cancel-comment-reply a {color: #000;}
#cancel-comment-reply a:hover {color: #000; text-decoration: none; background: #f4f4f4}
div.block_comment div#respond h3{margin-top: 0px;}
div#respond form#commentform{padding: 5px;}
div.block_comment textarea#comment{ max-width: 90%}
div.block_comment form#commentform p {padding: 4px}
.post_paragraph img {max-width: 100%; height: auto;}
.post_paragraph ul {margin: 0 0 10px 5px}
.post_paragraph h1 {font-weight: normal; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0;}
.post_paragraph h2 {font-weight: normal; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0;}
.post_paragraph h3 {font-weight: normal; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0;}
.post_paragraph h4 {font-weight: normal; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0;}
.post_paragraph h5 {font-weight: normal; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0;}
.post_paragraph h6 {font-weight: normal; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0;}
.post_paragraph ul li{margin: 0px 0px 0px 25px}
.post_paragraph ol li{margin: 0px 0px 0px 25px}
.post_paragraph a {color: blue;}
.commentmetadata {top: 20px; margin-top: 5px}
.commentlist p{margin-top: 20px;}
.comment-body {padding: 5px;}
.comment-author.vcard { margin-left: 0;}
.hot_img{height: 75px;}
ul.hot_list{list-style: none; display: inline-block; overflow: hidden;}
ul.hot_list li{float: left; height: 125px; width: 49%; text-align: center; margin-right: 1%}
ul.hot_list li:last-child{border-bottom: none}
ul.hot_list img{border: 1px solid #f4f4f4; display: block; margin: 0 auto; padding: 1px; width: 100%; height: 100%;}
ul.hot_list a{font-size: 14px;}
ul.hot_list a:hover{text-decoration: none}
@media only screen and (min-width:480px) and (max-width: 767px)
{
.commentmetadata {top: 0px;}
.commentlist p{margin-top: 0px; }
ul.hot_list li{width: 32%;}
}
@media only screen and (min-width: 767px) {
ul.hot_list li{width: 24%;}
.adplay_floating-bottom {
height: auto !important;
width: auto !important;
}
}
label{display: block; margin-bottom: 3px;}
textarea{display: block;}
input[type=text],textarea,select,input[type=file]{
width: 70%;
background: #fff;
border: 1px solid #dbdbdb;
border-radius: 4px;
color: #2f3432;
padding:5px;
display: block;
}
textarea{height: 300px; width: 90%}
input,textarea,select {margin-bottom: 5px; font-family: "Open Sans", sans-serif;}
form span {
color: grey;
display: block;
font-size: small;
margin-bottom: 5px;
margin-top: -4px;
}
.list-image {padding: 5px; }
.list-image input{width: 100px;border-radius: 0px; margin-bottom: 8px; }
.list-image img{display: block; border: 1px solid #dbdbdb; border-bottom: none; margin-bottom: 5px;}
.list-image .single_image{ display: block; width: 120px; float: left; }
.media_upload {clear: both; }
.ugc-inner-wrapper .ugc-input-wrapper input[type="text"], .ugc-inner-wrapper .ugc-input-wrapper textarea {width: 80% !important;}
.ugc-inner-wrapper h2{padding: 0 !important;}
.ugc-notice {
border: none !important;
border-radius: 0px !important;
padding: 5px;
}
.nav_dasboard {
background: #f5f5f5 none repeat scroll 0 0;
border-bottom: 1px solid #e1e1e1;
padding: 0px 5px;
font-size: 13px;
}
.nav_dasboard a {
display: inline-block;
padding: 5px 2px;
font-size: 14px;
}
b.draft {
color: #555;
font-family: "Open Sans",sans-serif;
}
ul.rpul p a {color: blue}
a.current {color: #000}
.notify, .error {margin: 5px; padding: 5px; background: #FCF8E3; color: #8a6d3b: ; border: 1px solid #FAEBCC; position: relative}
.notify.success {background: #dff0d8; border-color: #d6e9c6; color: #3c763d;}
.error li {
list-style: none;
}
.notify li, , .error li {
margin-left: 20px;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 5px !important;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.btn-primary {
background-color: #337ab7;
border-color: #2e6da4;
color: #fff;
}
.btn-default {
background-color: #fff;
border-color: #ccc;
color: #333;
}
.btn-danger {
background-color: #d9534f;
border-color: #d43f3a;
color: #fff;
}
.btn-info {
background-color: #5bc0de;
border-color: #46b8da;
color: #fff;
}
.btn-success {
background-color: #5cb85c;
border-color: #4cae4c;
color: #fff;
}
.btn-warning {
background-color: #f0ad4e;
border-color: #eea236;
color: #fff;
}
.btn-small {
padding: 3px 5px;
font-size: 13px;
}
a.btn {color: #fff;}
a.white-btn{color: #fff;}
a.btn.btn-primary {
color: #fff;
}
a.btn.btn-default,a.black-btn {
color: #333;
}
a.btn:hover,a.white-btn, a.black-btn{
text-decoration: none;
}
.margin_top{
margin-top: 10px;
}
.margin_bottom{
margin-bottom: 10px;
}
.mar5{margin: 5px;}
pre {
background-color: rgba(0, 0, 0, 0.01);
border: 1px solid rgba(51, 51, 51, 0.1);
margin-bottom: 5px;
max-width: 100%;
overflow: auto;
padding: 0.5em;
white-space: pre-wrap;
word-wrap: break-word;
}
.notify.success img {
height: 20px;
position: absolute;
right: 0;
top: -10px;
width: 20px;
}
.post_paragraph img {
display: block;
}
remember, this is a demo of wordpress theme development.you can change the theme style by editing style.css file your own.
index.php template wordpress theme file
now open index.php file and copy past the below code.
<?php get_header(); ?>
<div class="block_posts">
<h2>Featured post</h2>
<ul class="rpul">
<?php $cat_id = 3;
$latest_cat_post = new WP_Query( array('posts_per_page' => 1, 'category__in' => array($cat_id)));
if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post(); ?>
<li>
<?php
// Feature post thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
else {
echo '<img width="60" height="60" src="' . get_bloginfo( 'template_url' ) . '/images/no-thumbnail-60x60.png" class="attachment-thumbnail wp-post-image" alt="No image" />';
} ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <p><?php the_time( get_option( 'date_format' ) ) ?> - <?php the_time( get_option( 'time_format' ) ) ?> <a href="<?php the_permalink(); ?>#comments"><?php comments_number( 'No Comment', '1 Comment', '% Comments' ); ?></a></p>
</li>
<?php endwhile; endif; ?>
</ul>
</div>
<div class="block_posts">
<h2>Hot post</h2>
<ul class="rpul">
<?php $cat_id = 4;
$latest_cat_post = new WP_Query( array('posts_per_page' => 4, 'category__in' => array($cat_id)));
if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post(); ?>
<li>
<?php
// Feature post thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
else {
echo '<img width="60" height="60" src="' . get_bloginfo( 'template_url' ) . '/images/no-thumbnail-60x60.png" class="attachment-thumbnail wp-post-image" alt="No image" />';
} ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <p><?php the_time( get_option( 'date_format' ) ) ?> - <?php the_time( get_option( 'time_format' ) ) ?> <a href="<?php the_permalink(); ?>#comments"><?php comments_number( 'No Comment', '1 Comment', '% Comments' ); ?></a></p>
</li>
<?php endwhile; endif; ?>
</ul>
</div>
<div class="block_posts">
<h2>Recent Posts</h2>
<ul class="rpul">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<?php
// Recent post thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
else {
echo '<img width="60" height="60" src="' . get_bloginfo( 'template_url' ) . '/images/no-thumbnail-60x60.png" class="attachment-thumbnail wp-post-image" alt="No image" />';
} ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <p><?php echo human_time(); ?> <a href="<?php the_permalink(); ?>#comments"><?php comments_number( 'No Comment', '1 Comment', '% Comments' ); ?></a></p>
</li>
<?php endwhile; else: ?>
<?php endif; ?>
</ul>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
change the category id by edit above code. you can show your specify post by manual category id.and you can modify or change the recent post function by read more….. get_header(); calling header.php file, get_sidebar(); calling sidebar.php file and get_footer(); calling the footer.php file.
you should read the reference by official wordpress theme development codex. after you get ideas about the index.php file.
you should read the reference by official wordpress theme development codex. after you get ideas about the index.php file.
header.php wp theme development
open header.php file and copy past the below code and save.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="<?php bloginfo('charset'); ?>"/>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?ver=1.3" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo( 'template_url' ); ?>/favicon.ico" />
<title><?php wp_title(); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
<style type="text/css" title="dynamic-css" class="options-output">.ad_block{border-top:1px solid #ddd;border-bottom:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #ddd;}.ad_block{margin-top:4px;margin-right:4px;margin-bottom:4px;margin-left:4px;}.ad_block{padding-top:4px;padding-right:4px;padding-bottom:4px;padding-left:4px;}.ad_block_pc{border-top:0px solid #ddd;border-bottom:0px solid #ddd;border-left:0px solid #ddd;border-right:0px solid #ddd;}.ad_block_pc{margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;}.ad_block_pc{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0; }</style></head>
<body>
<?php if ( is_user_logged_in() ) { $current_user = wp_get_current_user(); echo '<div class="block_top_menu">
<div class="menu-top-mobile-logged-container">
<ul class="menu" id="menu-top-mobile-logged">
<li><a href="/wp-admin"> Dashboard </a></li>
<li><a href="/author/'.$current_user->user_nicename.'"> Profile </a></li>
<li><a href="/post?action=add"> New Post </a></li>
</ul>
</div>
</div>'; } ?>
<div class="block_header">
<table class="header_logo" width="100%">
<tbody><tr><td>
<a href="/">
<img src="<?php bloginfo( 'template_url' ); ?>/images/logo.png"></a>
</td>
<?php if ( is_user_logged_in() ) { $current_user = wp_get_current_user(); echo '<td width="100px" align="right">
<span class="say_hi"> Hi, '.$current_user->display_name.'</span></td>'; } else { echo '<td width="50px" align="right">
<a class="login_box" href="/wp-login.php"> Login </a>
</td>
<td width="50px" align="right">
<a class="login_box" href="/wp-login.php?action=register"> Signup </a>
</td>'; } ?></tr></tbody></table>
<div class="main_nav">
<div class="menu-mobile-nav-container">
<ul class="menu" id="menu-mobile-nav">
<li id="menu-item-41"><a href="/"> Home </a></li>
</ul>
</div>
</div>
</div>
footer.php wordpress development
open footer.php file and copy the below code.
<div class="block_fotter">
<div class="footer_left"><div class="menu-footer-mobile-left-container"><ul id="menu-footer-mobile-left" class="menu">
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="/about">About Us</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="/advertise">Advertise</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="/contact">Contact Us</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="/terms">Terms of Use</a></li>
</ul></div></div>
<div class="footer_right"><div class="menu-footer-mobile-right-container"><ul id="menu-footer-mobile-right" class="menu">
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="/rights">User Rights</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="/privacy">Privacy Policy</a></li>
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="/faq">FAQ</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="/copyright">Copyright issues</a></li>
<?php
if ( is_user_logged_in() ) {
$current_user = wp_get_current_user();
echo '<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="/wp-login.php?action=logout">Logout</a> ('.$current_user->display_name.')</li>';
}
?></ul></div></div>
</div>
</body>
</html>
now we have a special and hard file called function.php
function.php wordpress functions file
open the function.php file and copy past the below code.
<?php
/* Wordpres admin bar remove */
show_admin_bar( false );
/* Enable support for Post Thumbnails */
add_theme_support( 'post-thumbnails' );
/* Custom login page logo */
function custom_login_logo() {
echo '<style type="text/css">h1 a { background-image: url('.get_bloginfo('template_directory').'/images/login-logo.png) !important; background-size: 80% auto !important; background-position: center top !important; width: 90% !important; height: 75px !important; background-repeat: no-repeat !important; }</style>'; }
add_action('login_head','custom_login_logo');
/* Custom login logo url */
function loginpage_custom_link() {
return '/';
}
add_filter('login_headerurl','loginpage_custom_link');
/* Count posts views */
function getPostViews($postID){
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
return "0 View";
}
return $count.' Views';
}
function setPostViews($postID) {
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
}else{
$count++;
update_post_meta($postID, $count_key, $count);
}
}
/* Human time diff */
function human_time( $type = 'post' ) {
$d = 'comment' == $type ? 'get_comment_time' : 'get_post_time';
return human_time_diff($d('U'), current_time('timestamp')) . " " . __('ago');
}
/* Show user role */
function get_user_role($id) {
$user = new WP_User($id);
return array_shift($user->roles);
}
?>
i was wrote before the functions.it’s big timeable to full text,so it on summer. don’t run your theme now,run it after successfully finished the the theme development.
sidebar.php wordpress category template
open sidebar.php file and replace the below code.
<div class="block_category">
<h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('<li>orderby=name&show_count=1</li>'); ?>
</ul>
</div>
sidebar.php file calling the category list by wordpress admin dashboard.you can read the sidebar.php form official wordpress codex.
comments template wordpress theme development
open comments.php fille and replace the below code.
<?php
// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?>
<p class="nocomments">Password protected.</p>
<?php
return;
}
?>
<div class="block_comment">
<!-- You can start editing here. -->
<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number('No responses', '1 responses', '% responses');?> to “<?php the_title(); ?>”</h3>
<div class="navigation">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>
<div class="navigation">
<div class="previous">
<?php previous_comments_link() ?>
</div>
<div class="next">
<?php next_comments_link() ?>
</div>
</div>
<ol class="commentlist">
<?php wp_list_comments('avatar_size=32'); ?>
</ol>
<div class="navigation">
<div class="previous">
<?php previous_comments_link() ?>
</div>
<div class="previous">
<?php next_comments_link() ?>
</div>
</div>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p>comment closed</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<div class="navigation">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>
<div id="respond">
<h3>Leave a Reply</h3>
<div class="cancel-comment-reply"><small>
<?php cancel_comment_reply_link(); ?>
</small></div>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p><?php print 'You must be'; ?> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>"><?php print 'Logged in'; ?></a> <?php print 'to post comment'; ?>.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>
<?php print 'Logged in as'; ?> <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account"><?php print 'Log out'; ?> »</a>
</p>
<?php else : ?>
<p>
<input class="author" type="text" value="Enter your name..." onclick="this.value='';" name="author" id="author" size="22" tabindex="1"/><label for="author"><small><?php if ($req) echo "(Required)"; ?></small></label>
</p>
<p>
<input class="email" type="text" value="Enter your email..." onclick="this.value='';" name="email" id="email" size="22" tabindex="2"/><label for="email"><small>(Will not be published)<?php if ($req) echo " (Required)"; ?></small></label>
</p>
<p>
<input class="url" type="text" value="Enter your website..." onclick="this.value='';" name="url" id="url" size="22" tabindex="3"/><label for="email"><small>(Optional)</small></label>
</p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
<p>
<textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea>
</p>
<p>
<input class="submit" name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
</div>
<?php endif; // if you delete this the sky will fall on your head ?>
</div>
you can read more about comments.php functions and codex.when you finish the comments.php file works.
wordpress category posts wordpress theme development
open archive.php file and copy past the below code.
<?php get_header(); ?>
<div class="block_posts">
<h2><div class="breadcumbs">
<div id="crumbs"><a href="/">Home</a> › <span class="current">Archive by category '<?php single_cat_title(); ?>'</span></div></div></h2>
<ul class="rpul">
<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>
<li>
<?php
// Archive post thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
else {
echo '<img width="60" height="60" src="' . get_bloginfo( 'template_url' ) . '/images/no-thumbnail-60x60.png" class="attachment-thumbnail wp-post-image" alt="No image" />';
} ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <p><?php echo human_time(); ?> <a href="<?php the_permalink(); ?>#comments"><?php comments_number( 'No Comment', '1 Comment', '% Comments' ); ?></a></p>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
archive.php file calling all of the posts get form current category. you can read more about archive.php wordpress category post.after we replaced the archive page code.
Author Template WordPress Theme Design
now open author.php file and replace the below code and save.
<?php get_header(); ?>
<!– This sets the $curauth variable –>
<?php
if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif; ?>
<?php if ( is_user_logged_in() ) {
$current_user = wp_get_current_user();
echo '<a href="/wp-admin/profile.php">Edit My Profile</a>';} ?>
<div class="author_block">
<h2><?php the_author(); ?></h2>
<table width="100%"><tr>
<td width="75px"><?php echo get_avatar( get_the_author_meta('email'), '75' ); ?></td>
<td><h3><?php the_author(); ?></h3>
<div class="user_role"><?php $aid = get_the_author_meta('ID');
echo get_user_role($aid); ?></div>
<p><?php echo $curauth->user_description; ?></p>
</td>
</tr></table>
<div class="author_info">
<p><span>Registered:</span> <?php echo $curauth->user_registered; ?></p>
<p><span>Website:</span> <?php echo $curauth->user_url; ?></p>
<p><span>User Posts:</span> <?php the_author_posts(); ?></p>
<p><span>User ID:</span> <?php the_author_id(); ?></p>
</div>
</div>
<div class="block_posts">
<h2><div class="breadcumbs"><div id="crumbs"><a href="/">Home</a> › <span class="current">Articles posted by <?php the_author(); ?></span></div></div></h2>
<ul class="rpul">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<?php
// Author post thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
else {
echo '<img width="60" height="60" src="' . get_bloginfo( 'template_url' ) . '/images/no-thumbnail-60x60.png" class="attachment-thumbnail wp-post-image" alt="No image" />';
} ?> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <p><?php echo human_time(); ?> <a href="<?php the_permalink(); ?>#comments"><?php comments_number( 'No Comment', '1 Comment', '% Comments' ); ?></a></p>
</li>
<?php endwhile; else: ?>
<p><?php _e('No posts by this author.'); ?></p>
<?php endif; ?>
</ul></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
you can change or modify author.php style and functions by reading wordpress author.php file instructions and codex.
Not Found Error Page WordPress Theme Design
open the 404.php file and copy past the below code.
<?php get_header(); ?>
<div class="block_404">
<h2>Not Found</h2>
<h1>Error 404</h1>
<p>Sorry the content you are looking for, it's unavailable.</p>
</div>
<div class="block_posts">
<h2>You may check your latest posts..</h2>
<ul class="rpul">
<?php query_posts('posts_per_page=10'); if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<?php
// 404 post thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
else {
echo '<img width="60" height="60" src="' . get_bloginfo( 'template_url' ) . '/images/no-thumbnail-60x60.png" class="attachment-thumbnail wp-post-image" alt="No image" />';
} ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <p><?php echo human_time(); ?></p>
</li>
<?php endwhile; else: ?>
<?php endif; ?>
</ul>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
single.php wordpress theme development
after that we need to make readable single.php file for articles corner.open single.php file and replace the below code.
<?php get_header(); ?>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="breadcumbs_single">
<div id="crumbs"><a href="/">Home</a> › <?php the_category( ' › ' ) ?> › <span class="current"><?php the_title(); ?></span></div>
</div>
<div class="block_single">
<h1><?php the_title(); ?></h1>
<div class="post_paragraph">
<center><?php
// Feature post thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'large' );
}
else {
echo '<img width="140" height="140" src="' . get_bloginfo( 'template_url' ) . '/images/no-thumbnail-310x165.png" class="attachment-thumbnail wp-post-image" alt="No thumbnail" />';
} ?></center>
<?php the_content(); ?>
</div>
<div class="post_options">
<div class="post_rate">
<table width="100%"><td style="float: left;"><?php echo human_time(); ?> <span>(<?php the_time( get_option( 'date_format' ) ) ?>)</span></td>
<td style="float: right; text-align: right"><?php wpfp_link(); ?></td>
</table>
</div>
</div>
</div>
<?php edit_post_link('Edit', '<p>', '</p>'); ?>
<div class="author_block">
<h2><table width="100%"><td style="float: left;">About Author (<?php the_author_posts(); ?>) <?php setPostViews(get_the_ID()); ?></td><td style="float: right; text-align: right"><?php echo getPostViews(get_the_ID()); ?></td></table></h2>
<div class="author_single">
<table width="100%"><td class="avata_post"><?php echo get_avatar( get_the_author_meta('email'), '65' ); ?></td>
<td class="author_name"><?php the_author_posts_link(); ?>
<div class="user_role"><?php $aid = get_the_author_meta('ID');
echo get_user_role($aid); ?></div>
<p><?php the_author_meta('description'); if(!get_the_author_meta('description')) _e('This user may not interusted to share anything with others','LiveTipsBD'); ?></p></td>
</table>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php comments_template( '', true ); ?>
<?php get_template_part( 'includes/post-related' ); ?>
<?php get_footer(); ?>
single.php is a criticle page and you can customize your single.php page by reading wordpress codex.but there have designed theme that i was designed for you but it’s mobile version wordpress theme demo.
Page template WordPress Development
open the page.php file and place the below code.
<?php get_header(); ?> <div class="breadcumbs_single"> <div id="crumbs"><a href="/">Home</a> › <span class="current"><?php the_title(); ?></span> </div> </div> <div class="block_single"> <h1><?php the_title(); ?></h1> <?php if ( isset( $_GET['postcomment'] ) ) : if ( have_posts() ) : while ( have_posts() ): the_post(); comments_template( '/postcomment.php' ); endwhile; endif; else : ?> <?php if ( have_posts() ): while ( have_posts() ): the_post(); ?> <div class="post_paragraph"> <?php the_content(); ?> </div> <?php endwhile; ?> <?php endif;?> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
the page.php template call the created pages and output by page.php template.
Tagged Post Template WP theme development
finally open the tag.php file and replace the below code.
<?php get_header(); ?>
<div class="block_posts">
<h2><div class="breadcumbs"><div id="crumbs"><a href="/">Home</a> › <span class="current">Post tagged '<?php single_tag_title(); ?>'</span></div></div></h2>
<ul class="rpul">
<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>
<li>
<?php
// tag post thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
else {
echo '<img width="60" height="60" src="' . get_bloginfo( 'template_url' ) . '/images/no-thumbnail-60x60.png" class="attachment-thumbnail wp-post-image" alt="No image" />';
} ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <p><?php echo human_time(); ?> <a href="<?php the_permalink(); ?>#comments"><?php comments_number( 'No Comment', '1 Comment', '% Comments' ); ?></a></p>
</li>
<?php endwhile; else: ?>
<?php endif; ?>
</ul>
</div>
<?php get_footer(); ?>
tag.php file is a special page seo friendly created by wordpress administrator.you can edit and modify tag.php file by your own.
What To Consider When Developing A WordPress Theme?
Before deciding which approach to take to develop your theme, identify your constraints. These likely include the following:
- Time
How much time do you have to develop your theme, or to learn how to do it? - Budget
This is related to time but also has to do with whether you can afford to pay for a premium theme or a theme framework. - Capability
How familiar are you with theme development, with CSS and PHP and with how themes work? If you’re not familiar, how much do you want to learn? - Future-proofing
Will your theme need to be updated in future? Will other developers be working on it in addition to you? If so, then your approach will need to be as robust as possible. - Repetition
Do you see yourself developing a number of similar themes in future? If so, your approach will have to allow for code to be reused.
We’ll revisit these considerations at the end of the article and identify which development options are most suitable for various situations.
Post a Comment