Create a WordPress Theme
In this tutorial I’ll show you how to Create a WordPress Theme from scratch. I made all of the HTML and CSS code in this video tutorial How to Layout a Website.
You should definitely watch that tutorial before you try this one unless you are very experienced using HTML and CSS.
The theme is available in this zipped archive. This is a newer version of this theme. Everything is available under the GNU License.
After the video I provide all of the code used in the entire tutorial. Leave any questions below and if you find this theme useful feel free to share it
If you like videos like this, tell Google
Code From the Video
Here are all of the files needed for a WordPress theme. Click on the link to see that code.
- 404.php
- archive.php
- comments.php
- footer.php
- functions.php
- header.php
- index.php
- meta.php
- nav.php
- page.php
- search.php
- searchform.php
- sidebar-first.php
- sidebar-second.php
- single.php
- style.css
<?php get_header(); ?>
<?php get_sidebar('first'); ?>
<div class="contentColumn">
<div class="contentContainer">
<div style="font-size: 20px;"><?php _e("<br />Sorry I can't find that page?","WhosWho"); ?></div>
<h2><?php $numposts = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish'");
if (0 < $numposts) $numposts = number_format($numposts); ?>
<h2><?php echo 'Check Out the ' .$numposts.' articles below'; ?>
</h2>
<ul id="archive-list">
<?php
$myposts = get_posts('numberposts=-1&');
foreach($myposts as $post) : ?>
<li><?php the_time('m/d/y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php get_sidebar('second'); ?>
<?php get_footer(); ?>archive.php
<?php get_header(); ?>
<?php get_sidebar('first'); ?>
<div class="archiveColumn">
<div class="archiveContainer">
<div class="archiveTitle"><h4>ARCHIVES</h4></div>
<?php if (have_posts()) : ?>
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2 class="pagetitle">Archive for the ‘<?php single_cat_title(); ?>’ Category</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2 class="pagetitle">Posts Tagged ‘<?php single_tag_title(); ?>’</h2>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2 class="pagetitle">Archive for <?php the_time('F jS, Y'); ?></h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2 class="pagetitle">Archive for <?php the_time('F, Y'); ?></h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2 class="pagetitle">Archive for <?php the_time('Y'); ?></h2>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2 class="pagetitle">Author Archive</h2>
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2 class="pagetitle">Blog Archives</h2>
<?php } ?>
<?php while (have_posts()) : the_post(); ?>
<div class="middleContainer">
<?php if ( in_category('87') ) { ?>
<div class="middleTitle"><h4>VIDEO</h4></div>
<?php } else { ?>
<div class="middleTitle"><h4>ARTICLE</h4></div>
<?php } ?>
<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="260px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b><b><a href="<?php the_permalink(); ?>"><?php $ntt_the_title = $post->post_title; echo substr($ntt_the_title, 0, 50); ?></a></b></div>
<div class="middleArtDate"><b><?php the_time('F jS, Y') ?></b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt"><?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 194); ?>
<a href="<?php the_permalink(); ?>" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
<?php endwhile; ?>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
</div> <!-- End of contentContainer -->
</div> <!-- End of contentColumn -->
<?php else : ?>
<h2>Nothing found</h2>
<?php endif; ?>
</div> <!-- End of contentWrapper -->
<?php get_footer(); ?>comments.php
<?php
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?>
This post is password protected. Enter the password to view comments.
<?php
return;
}
?>
<?php if ( have_comments() ) : ?>
<h2 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?></h2>
<div class="navigation">
<div class="next-posts"><?php previous_comments_link() ?></div>
<div class="prev-posts"><?php next_comments_link() ?></div>
</div>
<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>
<div class="navigation">
<div class="next-posts"><?php previous_comments_link() ?></div>
<div class="prev-posts"><?php next_comments_link() ?></div>
</div>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ( comments_open() ) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<p>Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
<?php if ( comments_open() ) : ?>
<div id="respond">
<h2><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h2>
<div class="cancel-comment-reply">
<?php cancel_comment_reply_link(); ?>
</div>
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( is_user_logged_in() ) : ?>
<p>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">Log out »</a></p>
<?php else : ?>
<div>
<input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author">Name <?php if ($req) echo "(required)"; ?></label>
</div>
<div>
<input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email">Mail (will not be published) <?php if ($req) echo "(required)"; ?></label>
</div>
<div>
<input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url">Website</label>
</div>
<?php endif; ?>
<!--<p>You can use these tags: <code><?php echo allowed_tags(); ?></code></p>-->
<div>
<textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea>
</div>
<div>
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
</div>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
</div>
<?php endif; ?>footer.php
<div id="footer">
<br /><br />
©<?php echo date("Y"); echo " "; bloginfo('name'); ?>
<br /><br />
<a href="http://www.newthinktank.com" alt="Think Tank">New Think Tank</a>
</div>
<?php wp_footer(); ?>
</div> <!-- End of pageWrapper -->
<!-- Don't forget analytics -->
</body>
</html>functions.php
<?php
// Add RSS links to <head> section
automatic_feed_links();
// Load jQuery
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}
// Clean up the <head>
function removeHeadLinks() {
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
}
add_action('init', 'removeHeadLinks');
remove_action('wp_head', 'wp_generator');
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Right Widgets',
'id' => 'right-sidebar-widgets',
'description' => 'These are widgets for the sidebar.',
'before_widget' => '<div class="rightContainer">',
'after_widget' => '</div>',
'before_title' => '<div class="bannerTitle"><h4>',
'after_title' => '</h4></div>'
));
}
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Left Widgets',
'id' => 'left-sidebar-widgets',
'description' => 'These are widgets for the sidebar.',
'before_widget' => '<div class="rightContainer">',
'after_widget' => '</div>',
'before_title' => '<div class="bannerTitle"><h4>',
'after_title' => '</h4></div>'
));
}
if (function_exists('register_nav_menus')) {
register_nav_menus(array('main-menu' => 'Main Navigation'));
}
// Function that grabs first image in a post
/* Source:wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it
*/
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = bloginfo('template_directory');
$first_img .= "/images/default.png";
}
return $first_img;
}
?>header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<?php if (is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<title>
<?php
if (function_exists('is_tag') && is_tag()) {
single_tag_title("Tag Archive for ""); echo '" - '; }
elseif (is_archive()) {
wp_title(''); echo ' Archive - '; }
elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - '; }
elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - '; }
elseif (is_404()) {
echo 'Not Found - '; }
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description'); }
else {
bloginfo('name'); }
if ($paged>1) {
echo ' - page '. $paged; }
?>
</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Michroma' rel='stylesheet' type='text/css'>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="pageWrapper">
<div id="header">
<a href="http://socialvoicemarketing.com/"><img src="<?php bloginfo('template_directory'); ?>/images/Logo2.png" alt="Social Voice Logo" width="167px" height="109px" id="logo" /></a>
<img src="<?php bloginfo('template_directory'); ?>/images/cindy-swirl.png" alt="Cindy Swirl" width="544px" height="61px" id="swirl" />
<p id="blogSlogan"><?php bloginfo('description'); ?></p>
<div id="searchBox"><?php get_search_form(); ?></div>
</div>
<?php wp_nav_menu(array(
'theme_location' => 'main-menu',
'menu_class' => 'dropdown',
'container_id' => 'navigation',
'fallback_cb' => 'wp_page_menu'
)); ?>
<div id="contentWrapper">index.php
<?php get_header(); ?>
<?php get_sidebar('first'); ?>
<div class="middleColumn">
<!-- To issue queries I need to hijack $wp_query. So, I can use it later
on the page I'm saving it to a temporary variable -->
<?php
$tempWPQuery = $wp_query;
$wp_query = null;
// Create a new WP_Query Object
$wp_query = new WP_Query();
// Issue a query that returns 4 posts
$wp_query->query('posts_per_page=4&category_name=Article');
// Cycle through all of the posts
while ($wp_query->have_posts()):
$wp_query->the_post();
?>
<div class="middleContainer">
<div class="middleTitle"><h4>ARTICLE</h4></div>
<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="262px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b><b><a href="<?php the_permalink(); ?>"><?php $ntt_the_title = $post->post_title; echo substr($ntt_the_title, 0, 45); ?></a></b></div>
<div class="middleArtDate"><b><?php the_time('F jS, Y') ?></b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt"><?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 157); ?>
<a href="<?php the_permalink(); ?>" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
<?php
endwhile;
// Reset wp_query to the default
$wp_query = null;
$wp_query = $tempWPQuery;
?>
</div> <!-- End of middleColumn -->
<!-- Define the second middleColumn -->
<div class="middleColumn">
<!-- To issue queries I need to hijack $wp_query. So, I can use it later
on the page I'm saving it to a temporary variable -->
<?php
$tempWPQuery = $wp_query;
$wp_query = null;
// Create a new WP_Query Object
$wp_query = new WP_Query();
// Issue a query that returns 4 posts
$wp_query->query('posts_per_page=4&category_name=Video');
// Cycle through all of the posts
while ($wp_query->have_posts()):
$wp_query->the_post();
?>
<div class="middleContainer">
<div class="middleTitle"><h4>VIDEO</h4></div>
<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="262px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b><b><a href="<?php the_permalink(); ?>"><?php $ntt_the_title = $post->post_title; echo substr($ntt_the_title, 0, 45); ?></a></b></div>
<div class="middleArtDate"><b><?php the_time('F jS, Y') ?></b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt"><?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 157); ?>
<a href="<?php the_permalink(); ?>" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
<?php
endwhile;
// Reset wp_query to the default
$wp_query = null;
$wp_query = $tempWPQuery;
?>
</div> <!-- End of middleColumn -->
<?php get_sidebar('second'); ?>
</div> <!-- End of contentWrapper -->
<?php get_footer(); ?>meta.php
<div class="meta">
<em>Posted on:</em> <?php the_time('F jS, Y') ?>
<em>by</em> <?php the_author() ?>
<?php comments_popup_link('No Comments', '1 Comment', '% Comments', 'comments-link', ''); ?>
</div>nav.php
<div class="navigation">
<div class="next-posts"><?php next_posts_link('« Older Entries') ?></div>
<div class="prev-posts"><?php previous_posts_link('Newer Entries »') ?></div>
</div>page.php
<?php get_header(); ?>
<?php get_sidebar('first'); ?>
<div class="contentColumn">
<div class="contentContainer">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ( in_category('87') ) { ?>
<div class="contentTitle"><h4>VIDEO</h4></div>
<?php } else { ?>
<div class="contentTitle"><h4>ARTICLE</h4></div>
<?php } ?>
<div class="contentArtTitle"><b><?php the_title(); ?></b></div>
<div class="contentArtDate"><b>POSTED BY <?php the_author(); ?> <?php the_time('F jS, Y') ?> : <?php $numComments = get_comments_number(); echo $numComments;?> COMMENTS</b></div>
<div class="horzcontentRule"></div>
<p class="contentExcerpt">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => 'Pages: ', 'next_or_number' => 'number')); ?>
<?php comments_template(); ?>
</p>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div> <!-- End of contentContainer -->
</div> <!-- End of contentColumn -->
<?php endwhile; endif; ?>
<?php get_sidebar('second'); ?>
</div> <!-- End of contentWrapper -->
<?php get_footer(); ?>search.php
<?php get_header(); ?>
<?php get_sidebar('first'); ?>
<div class="contentColumn">
<div class="contentContainer">
<div class="contentTitle"><h4>SEARCH RESULTS</h4></div>
<?php if (have_posts()) : ?>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
<div class="entry">
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
</div> <!-- End of contentContainer -->
</div> <!-- End of contentColumn -->
<?php else : ?>
<h2>No posts found.</h2>
<?php endif; ?>
<?php get_sidebar('second'); ?>
</div> <!-- End of contentWrapper -->
<?php get_footer(); ?>searchform.php
<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<div>
<label for="s" class="screen-reader-text">Search for:</label>
<input type="text" id="s" name="s" value="" />
<input type="submit" value="Search" id="searchsubmit" />
</div>
</form>sidebar-first.php
<div id="firstSidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Left Widgets')) : else : ?>
<!-- All this stuff in here only shows up if you DON'T have any widgets active in this zone -->
<div class="leftContainer">
<div class="bannerTitle"> <h4>WHO WE ARE</h4></div>
<p class="sidebarExcerpt"><img src="<?php bloginfo('template_directory'); ?>/images/cindy.png" alt="Cindy" width="73px" height="73px" id="cindy" /><br /><br />Our mission is to increase our client’s presence in the market place by implementing the latest trends and technologies in Local / Social / Mobile marketing.<br /><br />Check out our blogs, videos and our select affiliate products and be sure to contact us to get help navigating all of the new trends and technologies that are emerging in the world of marketing. <a href="http://socialvoicemarketing.com/contact-us/" class="clickForMore"> Contact Me</a></p><br />
</div> <!-- End of leftContainer -->
<div class="featured">
<div class="bannerTitle"><h4>VIDEOS</h4></div>
<!-- To issue queries I need to hijack $wp_query. So, I can use it later
on the page I'm saving it to a temporary variable -->
<?php
$tempWPQuery = $wp_query;
$wp_query = null;
// Create a new WP_Query Object
$wp_query = new WP_Query();
// Issue a query that returns 4 posts
$wp_query->query('posts_per_page=4&offset=4&category_name=Video');
// Cycle through all of the posts
while ($wp_query->have_posts()):
$wp_query->the_post();
?>
<div class="eachArticle">
<div class="articleTitle"><b><a href="<?php the_permalink(); ?>"><?php $ntt_the_title = $post->post_title; echo substr($ntt_the_title, 0, 30); ?></a></b></div>
<p class="articleExcerpt"><?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 60); ?>
<a href="<?php the_permalink(); ?>" class="clickForMore">More</a></p>
<div class="horzRule"></div>
</div> <!-- End of eachArticle -->
<?php
endwhile;
// Reset wp_query to the default
$wp_query = null;
$wp_query = $tempWPQuery;
?>
</div> <!-- End of featured -->
<!-- Create the Article part of the left sidebar -->
<div class="featured">
<div class="bannerTitle"><h4>ARTICLES</h4></div>
<!-- To issue queries I need to hijack $wp_query. So, I can use it later
on the page I'm saving it to a temporary variable -->
<?php
$tempWPQuery = $wp_query;
$wp_query = null;
// Create a new WP_Query Object
$wp_query = new WP_Query();
// Issue a query that returns 4 posts
$wp_query->query('posts_per_page=4&offset=4&category_name=Article');
// Cycle through all of the posts
while ($wp_query->have_posts()):
$wp_query->the_post();
?>
<div class="eachArticle">
<div class="articleTitle"><b><a href="<?php the_permalink(); ?>"><?php $ntt_the_title = $post->post_title; echo substr($ntt_the_title, 0, 30); ?></a></b></div>
<p class="articleExcerpt"><?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 60); ?>
<a href="<?php the_permalink(); ?>" class="clickForMore">More</a></p>
<div class="horzRule"></div>
</div> <!-- End of eachArticle -->
<?php
endwhile;
// Reset wp_query to the default
$wp_query = null;
$wp_query = $tempWPQuery;
?>
<?php endif; ?>
</div> <!-- End of featured -->
</div> <!-- End of firstSidebar -->sidebar-second.php
<div id="secondSidebar">
<div class="socialIcons">
<a href="http://socialvoicemarketing.com/feed/"><img src="<?php bloginfo('template_directory'); ?>/images/rss_logo.png" alt="RSS Feed" width="30px" height="30px" class="socialNetwork" /></a>
<a href="http://facebook.com/socialvoicemarketing"><img src="<?php bloginfo('template_directory'); ?>/images/facebook_logo.png" alt="Facebook" width="30px" height="30px" class="socialNetwork" /></a>
<a href="http://twitter.com/socialvoicemrkt"><img src="<?php bloginfo('template_directory'); ?>/images/twitter_logo.png" alt="Twitter" width="30px" height="30px" class="socialNetwork" /></a>
<a href="http://www.linkedin.com/in/cindyrack"><img src="<?php bloginfo('template_directory'); ?>/images/linkedin_logo.png" alt="Linkedin" width="30px" height="30px" class="socialNetwork" /></a>
<a href="http://www.youtube.com/socialvoicemarketing"><img src="<?php bloginfo('template_directory'); ?>/images/youtube_logo.png" alt="YouTube" width="30px" height="30px" class="socialNetwork" /></a>
</div> <!-- End of socialIcons -->
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Right Widgets')) : else : ?>
<!-- All this stuff in here only shows up if you DON'T have any widgets active in this zone -->
<?php endif; ?>
</div> <!-- End of secondSidebar -->single.php
<?php get_header(); ?>
<?php get_sidebar('first'); ?>
<div class="contentColumn">
<div class="contentContainer">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ( in_category('87') ) { ?>
<div class="contentTitle"><h4>VIDEO</h4></div>
<?php } else { ?>
<div class="contentTitle"><h4>ARTICLE</h4></div>
<?php } ?>
<div class="contentArtTitle"><b><?php the_title(); ?></b></div>
<div class="contentArtDate"><b>POSTED BY <?php the_author(); ?> <?php the_time('F jS, Y') ?> IN <?php $category = get_the_category();
echo $category[0]->cat_name;?> : <?php $numComments = get_comments_number(); echo $numComments;?> COMMENTS</b></div>
<div class="horzcontentRule"></div>
<p class="contentExcerpt">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => 'Pages: ', 'next_or_number' => 'number')); ?>
<?php the_tags( 'Tags: ', ', ', ''); ?>
<?php comments_template(); ?>
</p>
<?php edit_post_link('Edit this entry','','.'); ?>
</div> <!-- End of contentContainer -->
</div> <!-- End of contentColumn -->
<?php endwhile; endif; ?>
<?php get_sidebar('second'); ?>
</div> <!-- End of contentWrapper -->
<?php get_footer(); ?>style.css
/*
Theme Name: NTT Cindy Theme
Theme URI: http://www.newthinktank.com/create-a-wordpress-theme/
Description: This is a custom theme from New Think Tank -- WordPress v3.2.1
Author: Derek Banas
Author URI: http://www.newthinktank.com
Version: 1
*/
/* pageWrapper wraps and centers all of the content on the page */
#pageWrapper {
font: 14px/1.4 'PT Sans Narrow', sans-serif;
width: 1000px;
background-color: #FFF;
margin-left: auto;
margin-right: auto;
}
/* All of the header styling */
#header {
height: 127px;
width: 1000px;
}
#logo {
position: relative;
left: 15px;
}
#blogSlogan {
font: 14px/1.4 'Michroma', sans-serif;
position: relative;
width: 240px;
left: 735px;
top: -124px;
text-align: right;
color: #471F37;
}
#searchBox {
position: relative;
left: 700px;
top: -100px;
width: 290px;
}
#swirl {
position: relative;
top: -50px;
}
/* The contentWrapper surrounds all of the content after the menu */
#contentWrapper {
background-color: #471F37;
float: left;
width: 1000px;
}
/* Menu Styling */
#navigation {
float:left;
width:100%;
background: #471F37;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f2c4b', endColorstr='#471F37'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#5f2c4b), to(#471F37)); /* for webkit browsers */
background-image: -moz-linear-gradient(top, #5f2c4b, #471F37); /* for firefox 3.6+ */
font: bold 14px/.5 'PT Sans Narrow', sans-serif;
border: 0px;
}
/* Menu Bar List */
ul.dropdown {
list-style:none;
float:left;
width:100%;
padding: 0px;
}
ul.dropdown li{
float:left;
position:relative;
z-index:100;
}
ul.dropdown a {
padding:12px;
color:#FFFFFF;
text-decoration:none;
text-shadow:1px 1px 0 #000000;
z-index:100;
}
/* Link Hovering Style */
ul.dropdown li:hover a {
color: #fff;
background: #471F37;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f2c4b', endColorstr='#471F37'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#5f2c4b), to(#471F37)); /* for webkit browsers */
background-image: -moz-linear-gradient(top, #5f2c4b, #471F37); /* for firefox 3.6+ */
border-right:1px solid #5f2c4b;
border-left: 1px solid #471F37;
text-shadow:1px 1px 0 #000000;
}
/* Displays Links as Blocks */
ul.dropdown li ul a {
display:block;
}
/* The Sub Menus */
ul.dropdown ul {
list-style: none;
margin:0;
padding:0;
width:200px; /* Width of the Drop Down Box */
position:absolute;
}
ul.dropdown li ul {
top:24px; /* Drop the Drop Down Box 24px */
}
ul.dropdown ul ul {
top:0;
left:100%;
}
ul.dropdown ul li {
float:none;
}
ul.dropdown ul,
ul.dropdown li:hover ul ul,
ul.dropdown ul li:hover ul ul
{ display: none; }
ul.dropdown li:hover ul,
ul.dropdown ul li:hover ul ,
ul.dropdown ul li ul li:hover ul
{ display: block;}
ul.dropdown li * a:hover {
color: #FFF;
background: #471F37;
border-bottom: 1px solid ##471F37;
border-top: 1px solid #5f2c4b;
text-shadow:1px 1px 0 #000000;
}
/* All of the leftSidebar styling */
#firstSidebar {
float: left;
}
.leftContainer {
background-color: #fff;
border: 3px solid #000;
margin: 10px;
margin-right: 3px;
width: 177px;
height: 271px;
padding: 2px;
}
.bannerTitle {
font: 14px/1.4 'PT Sans Narrow', sans-serif;
background-color: #471F37;
color: #FFF;
width: 96px;
height: 26px;
text-align: right;
padding-right: 6px;
position: relative;
left: 78px;
top: -21px;
}
#cindy {
float: left;
padding-right: 4px;
padding-bottom: 4px;
padding-top: 5px;
padding-left: 2px;
}
.sidebarExcerpt {
position: relative;
left 0px;
top: -62px;
color: #244f4f;
font-size: 10pt;
}
.featured {
background-color: #fff;
border: 3px solid #000;
margin: 10px;
margin-right: 3px;
width: 177px;
height: 350px;
padding: 2px;
}
.eachArticle {
position: relative;
top: -18px;
}
.articleTitle a {
text-decoration: none;
color: #000;
}
.articleExcerpt {
color: #244f4f;
font-size: 10pt;
position: relative;
top: -10px;
}
.horzRule {
background-color: #471f37;
height: 2px;
width: 170px;
margin-left: 3px;
position: relative;
top: -10px;
}
/* BEGINNING OF ARTICLE STYLING */
.contentColumn {
width: 570px;
float: left;
margin-right: 3px;
margin-left: 3px;
min-height: 1005px;
}
.contentContainer {
background-color: #FFF;
border: 3px solid #000;
margin: 10px;
margin-right: 3px;
margin-left: 3px;
width: 570px;
height: auto;
padding: 5px;
min-height: 1005px;
}
.contentTitle {
font: 14px/1.4 'PT Sans Narrow', sans-serif;
background-color: #471F37;
color: #FFF;
width: 188px;
height: 26px;
text-align: right;
padding-right: 7px;
position: relative;
left: 377px;
top: -20px;
z-index: 20;
}
.contentArtTitle {
font: 28px/1.8 'PT Sans Narrow', sans-serif;
padding-left: 4px;
}
.contentArtDate {
padding-left: 4px;
position: relative;
top: -10px;
}
.contentImage {
float: left;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 2px;
padding-top: 5px;
}
.horzcontentRule {
background-color: #471f37;
height: 2px;
width: 562px;
margin-left: 3px;
}
.contentExcerpt {
color: #244f4f;
font-size: 10pt;
margin-left: 3px;
}
/* All of the middleContent styling */
.middleColumn {
width: 260px;
margin-right: 15px;
margin-left: 10px;
float: left;
}
.middleContainer {
background-color: #FFF;
border: 3px solid #000;
margin: 10px;
width: 264px;
height: 270px;
padding: 2px;
display: inline-block;
}
.middleTitle {
font: 14px/1.4 'PT Sans Narrow', sans-serif;
background-color: #471F37;
color: #FFF;
width: 188px;
height: 26px;
text-align: right;
padding-right: 7px;
position: relative;
left: 72px;
top: -20px;
z-index: 20;
}
.featuredImage {
position: relative;
left: 1px;
top: -45px;
}
.middleArtTitle {
position: relative;
top: -45px;
padding-left: 4px;
}
.middleArtTitle a {
text-decoration: none;
color: #000;
}
.middleArtDate {
position: relative;
top: -45px;
padding-left: 4px;
}
.horzMidRule {
background-color: #471f37;
height: 2px;
width: 256px;
margin-left: 3px;
position: relative;
top: -45px;
}
.middleExcerpt {
color: #244f4f;
font-size: 10pt;
margin-left: 3px;
position: relative;
top: -50px;
}
/* All of the rightSidebar styling */
#secondSidebar {
float: left;
margin-left: 12px;
margin-right: 0px;
}
.rightContainer {
background-color: #FFF;
font: 14px/1.4 'PT Sans Narrow', sans-serif;
border: 3px solid #000;
margin: 10px;
margin-right: 0px;
margin-left: 15px;
width: 177px;
padding: 2px;
padding-left: 5px;
}
.socialIcons {
width: 177px;
margin-left: 25px;
padding: 2px;
padding-top: 10px;
}
.rightContainer ul li{
border-bottom: 1px dashed #DCDCDC;
padding-bottom: 3px;
padding-top: 3px;
margin-left: -30px;
text-decoration: none;
}
.rightContainer li a{
text-decoration: none;
text-transform: uppercase;
color: #666;
}
.rightContainer li{
text-transform: uppercase;
list-style-type: none;
border-bottom: 1px dashed #DCDCDC;
padding-bottom: 3px;
padding-top: 3px;
margin-left: 0px;
text-decoration: none;
}
/* All of the footer styling */
#footer {
background: #471F37;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f2c4b', endColorstr='#471F37'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#5f2c4b), to(#471F37)); /* for webkit browsers */
background-image: -moz-linear-gradient(top, #5f2c4b, #471F37); /* for firefox 3.6+ */
float: left;
width: 1000px;
height: 100px;
text-align: center;
color: #fff;
}
#footer a {
text-decoration: none;
color: #FFF;
}
/* Styling used for archive page */
.archiveColumn {
width: 620px;
float: left;
margin-right: 3px;
margin-left: 3px;
}
.archiveContainer {
background-color: #FFF;
border: 3px solid #000;
margin: 10px;
margin-right: 3px;
margin-left: 3px;
width: 620px;
height: auto;
padding: 5px;
}
.archiveTitle {
font: 14px/1.4 'PT Sans Narrow', sans-serif;
background-color: #471F37;
color: #FFF;
width: 188px;
height: 26px;
text-align: right;
padding-right: 7px;
position: relative;
left: 427px;
top: -20px;
z-index: 20;
}
.pagetitle {
padding-left: 12px;
}
/* Make all the images position properly in articles */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.aligncenter{
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
img {
border-style: none;
}
69 Responses to “Create a WordPress Theme”
Trackbacks/Pingbacks
- Wordpress Programming | Bryan E Patrick - [...] on his channel on YouTube. He will show you how to lay out a website using HTML and CSS,…
- Theme Variations « Web Design & Layout - [...] Designing a Theme from Scratch (video and downloads) – this one is very step-by-step. Good stuff. Share this:TwitterFacebookLike this:LikeBe…
- Top 100 WordPress Resources, Tips, Tricks, and Tutorials | HalifaxWebSolutions.com - [...] a WordPress Theme: This 24-minute video tutorial from New Think Tank shows how to create a custom WordPress theme from [...]
- E-Commerce Made Easy - How To Build, Manage & Market Your Website - […] you don’t already know how to create a WordPress theme, then Derek Banas did a pretty cool video on…
- Wordpress Top 160 Tutoriais | Blog do Dinheiro Brazil - […] 104. Crie um tema wordpress […]
thank you very mutch for all your tutorials derek
a ctually i’m watching your php tutorials. all amazing like this one.
your last title Every Article helped to better navigate in your wevsite so now now i spend more time on it.
you’ve always been excelent. awesome
Hi there,
First off all i realy like your vieo tuturials a lot.
Im building my own wordpress time right now whit the help of this Tuturials.
But im stuck a little.
To show my post i used your code.
Like this one.
$wp_query->query(‘posts_per_page=6&category_name=Blog’);
But actualy i want to show all post except the post from the catagory Video.
Can you plz help me out, i cant find how to change the code to let it work.
Thnx a lot.
Here is your answer! If you want to Exclude Posts Belonging to Category prefixing its id with a ‘-‘ (minus) sign.
$query = new WP_Query( ‘cat=-12,-34,-56’ ); This excludes those posts in category 12, 34 and 56
Hope that helps
This code realy solved the problem thank you verry much.
You’re very welcome. I have about 40 more WordPress Development Videos here as well. I hope they help
I know, i’ve almost seen them all.
They help a lot.
But maby there is one little issue you can help me with.
When i come on my single page of a post and i have a image in that post. How do i delete the link on the image from the content.
I don’t want that poeple be linkt to the original image.
I hope you understand what i mean, because my englisch is not to good because im dutch.
If I’m understanding, you would just have to delete the anchor tags that would surround the image. Does that answer the question?
Yes thats what i mean, i want to delete the a href of the image in the content on the single page. There is the php for the content that gets the image and al of the text but the image is a link to the original i want to delete that link so they cant click the image at all
There is no way to keep people from getting your image. You could create stumbling blocks, but a screen grab is impossible to stop. The only way to keep people from using your images is to copyright them
WOW!
This is very nice…
Thank you 🙂
For getting the article information, how would the php code be if I am trying to pull the latest posts not specified by the categories? What I am refering is the lines 10 – 22 of index.php. Let’s say I am trying to get the recent 8 posts (in two columns (2×4) regardless of their categories and I have more than 2 categories, how would the code be like?
Anyways, thanks for the great tutorials 🙂
Check out my first WordPress Theme Tutorial instead for those answers. I cover how to pull in posts in every way you can imagine. And, thank you for taking the time to show your appreciation. Thank you 🙂
I’m having a problem WordPress is telling me Broken
Themes
The following themes are installed but incomplete. Themes must have a stylesheet and a template.
Name Description
RedBox/style.css File not readable.
I’m not sure whats it is wanting.. I tried writing my own it didn’t work so I copied and paste yours and it still is saying that.
It’s looking for the style.css file. It has to be in your theme folder inside of wp-content.
I found out what it was my permissions were turned off. Thank you for your help.. I’m just starting coding and all your videos are a big help.. I watch a lot of other ones and your by far the easiest and best for the help..
Once I get up and running I would like to make an ad for your Website on all my sites.
So now that I have it to be able to preview or activate, when I click on preview it comes up as a blank screen nothing but white.
What happens when you click activate? Don’t worry you can easily re-activate your old theme
Thank you. I’m glad you like the videos. Creating WordPress themes is pretty advanced. Very few people know how to do that. Keep at it
is there any way that I could send you my CSS coding.. My dumb menu wont change, to what it should look like.
I’m sorry, but I can’t correct large blocks of code. I just don’t have time to do that as well as continue to make tutorials.
I understand that, I’ve been looking at your source code, and mine to see where my mess up is.
I have this code right after the HorcontentRule just like you did in the Index.php folder.
p class=”contentExcerpt”>post_excerpt; echo substr($ntt_the_excerpt, 0, 157); ?> <a href="” class=”clickForMore”>More</p
I did discard the at the beginning and end of the code.
but I can’t get my text to show up. I copy and pasted your code and it still didn’t work, what could be the issue.
Do you have excerpts in your posts?
Yes, I do its about 93 words in the excerpt.
When I put in ?php the_content();? it brings all the content but when I put in ?php $the_content = $post->post_content; echo substr($the_content, 0, 200); ? nothing comes up… I just want like part of it to come not all of it and not none of it.. anything you can think of?
Here is the code I used
< ?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 157); ?>
One thing I thought I should say to help is that it works for my Title. the code for my excerpt isn’t working in my sidebar either and all the Articles on my sidebar have over 200 words.
Great tutorial. I have two questions..
My drop down menu items work fine in firefox/safari but do not work in IE.. is there a fix somewhere i can use?
Also, is there anyway to set the drop down items side to side rather then on top of each other?
Thanks!
I’ve got you covered cross browser wise. These work on every browser back to IE 5.5
MAKE A WORDPRESS VERTICAL MENU
CROSS BROWSER HORIZONTAL MENU
CROSS BROWSER MENU TUTORIAL
Awesome! thanks for the response
Hi admin,
You are really a brilliant teacher.. the way you taught is really easy to understand, thanks for such helpful tutorials, I request you to add some more tutorials about wordpress designing and coding..
Best wishesBes:amir
Thank you very much 🙂 I’m glad you find them useful. I’ll make more WordPress themes in the future. Here is about 80 WordPress Development Tutorials if you missed them. I hope you like them
This is exactly what i’ve been looking for. thanks
You’re very welcome. I gathered about 80 tutorials here WordPress How To. I cover pretty much everything you’d ever want to know about WordPress 🙂
Hi,
Its wonderful tutorial. So how can we make the theme responsive? Any details on that?
Thanks
Thank you 🙂 checkout http://www.newthinktank.com/videos/web-programming/wordpress-how-to/ I have over 80 tutorials on WordPress theme, plugin development
you are great!
great explanations. everything is big and clear.
you even interact with the viewer, calming him down.
great!
all the best to you and thank you very much!
Thank you for the kind words 🙂 I do my best
Hi,
I’ve downloaded the theme and activated it. an error is showing on the top of my dashboard: “Notice: automatic_feed_links is deprecated since version 3.0! Use add_theme_support( ‘automatic-feed-links’ ) instead”.
there is another error showing on my site: “Notice: wp_deregister_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or init hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.)”.
both printed by: \wp-includes\functions.php
what should I do?
many thanks to you.
Search for
automatic_feed_links();in function.php and replace it withadd_theme_support('automatic-feed-links');To get rid of the second error replace
wp_enqueue_script('jquery');withfunction thematic_enqueue_scripts() {wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'thematic_enqueue_scripts');
That should fix it
the first error is gone, thank you!
the second one is still bugging us. just in case, here is the code for functions.php:
<?php
// Add RSS links to section
add_theme_support('automatic-feed-links');
// Load jQuery
function thematic_enqueue_scripts() {
wp_enqueue_script('jquery');
}
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"), false);
add_action('wp_enqueue_scripts', 'thematic_enqueue_scripts');
}
// Clean up the
...
I appreciate, lead to I found just what I used to be taking a
look for. You have ended my four day lengthy hunt! God
Bless you man. Have a nice day. Bye
You’re very welcome 🙂 I’m very happy to have helped you
Where can i find the blank theme?
I have a link to the Blank theme on this page WordPress How To
Hi Derek,
I like the series of your tutorial, it is not boring and very energetic. Thank you, by the way,
What is the best tutorial about the responsive website using wordpress?
Thanks and have a great day!!
You’re very welcome 🙂 What exactly are you trying to do in regards to a responsive website?
The problem is that only one box each for the articles and the videos show up and there appear to be in the first sidebar. They also don’t have anything in them, just the title and container.
Do I need to do something with the dashboard to make this work? I’m very new to WP; where do the article and videos come from?
Any help would be greatly appreciated.
P.S. I really like you edited style; I like not having to listen to someone umming and ahhing.
Hi Derek, I’m really enjoying your tutorials; thanks a lot for putting them up.
I’m having trouble getting the middle container to work (the Articles and the Videos.) I thought at first it was my coding but I used your NTT-Cindy-Theme straight from the zipped file on your website and got the same problem.
The problem is that only one box each for the articles and the videos show up and there appear to be in the first sidebar. They also don’t have anything in them, just the title and container.
Do I need to do something with the dashboard to make this work? I’m very new to WP; where do the article and videos come from?
Any help would be greatly appreciated.
P.S. I really like you edited style; I like not having to listen to someone umming and ahhing.
Hi Derek
I’ve managed to work out that I didn’t have any articles or video; or the categories for them (told you I was new to WP.) I figured this out watching the next video.
I’m still having trouble with the menu system, it’s just showing up as a normal list with bullet points.
I’m glad you got it working. For the menu to work, make sure that you define your menu under appearances in the WP dashboard. I bet you that is the problem
That’s fixed it,
Thanks a lot Derek!
Useful. I agree.
Thank you 🙂
Derek you are great!
Thank you 🙂
great tutorials, thank you..
You’re very welcome and thank you 🙂
Hi.. I have downloaded the correct one from digwp.com. Please ignore my question about it please.
Great! Sorry I couldn’t get to your question quicker
Can i change colors in wordpress my sefl theme?
Yes you can do anything in WP that you can do with any other website.
Hello, this weekend is nice for me, because this moment
i am reading this great educational article here at my home.
Thank you 🙂 I’m glad you are enjoying it.
hi there! im in LOVE with your tuts!!! very clear and presented in a way that my brain just gets! THANK YOU!!! However, I was wondering where the “blank theme” is for download? I’m not seeing it aywhere?
Thanks!!!
Thank you very much 🙂 The blank theme is available on this page.
Thanks so much! youre amazing!!!
Thank you 🙂 I try to do my best.