Create a WordPress Theme

Create a WordPress ThemeIn 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 I really appreciate it 🙂

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
<?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 &#8216;<?php single_cat_title(); ?>&#8217; Category</h2>

			<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
				<h2 class="pagetitle">Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</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 &raquo;</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 />
			&copy;<?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 &quot;"); echo '&quot; - '; }
		      elseif (is_archive()) {
		         wp_title(''); echo ' Archive - '; }
		      elseif (is_search()) {
		         echo 'Search for &quot;'.wp_specialchars($s).'&quot; - '; }
		      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('&laquo; Older Entries') ?></div>
	<div class="prev-posts"><?php previous_posts_link('Newer Entries &raquo;') ?></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”

  1. supprof1 says:

    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

  2. Menno says:

    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.

    • admin says:

      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

  3. Menno says:

    This code realy solved the problem thank you verry much.

    • admin says:

      You’re very welcome. I have about 40 more WordPress Development Videos here as well. I hope they help

      • Menno says:

        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.

  4. gnjin0447 says:

    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 🙂

  5. Travis says:

    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.

    • admin says:

      It’s looking for the style.css file. It has to be in your theme folder inside of wp-content.

      • Travis says:

        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.

  6. Travis says:

    is there any way that I could send you my CSS coding.. My dumb menu wont change, to what it should look like.

  7. Travis says:

    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.

  8. Travis says:

    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.

  9. Charlie says:

    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!

  10. Charlie says:

    Awesome! thanks for the response

  11. aamer says:

    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

  12. Gerald Ford says:

    This is exactly what i’ve been looking for. thanks

  13. Shu says:

    Hi,

    Its wonderful tutorial. So how can we make the theme responsive? Any details on that?

    Thanks

  14. anon says:

    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!

  15. errors says:

    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.

    • admin says:

      Search for automatic_feed_links(); in function.php and replace it with add_theme_support('automatic-feed-links');

      To get rid of the second error replace wp_enqueue_script('jquery'); with
      function thematic_enqueue_scripts() {
      wp_enqueue_script('jquery');
      }
      add_action('wp_enqueue_scripts', 'thematic_enqueue_scripts');

      That should fix it

      • errors says:

        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
        ...

  16. Porfirio says:

    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

  17. Sam says:

    Where can i find the blank theme?

  18. 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!!

  19. Tom says:

    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.

  20. Tom says:

    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.

    • Tom says:

      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.

  21. amir says:

    Derek you are great!

  22. Rihtam says:

    great tutorials, thank you..

  23. krish says:

    Hi.. I have downloaded the correct one from digwp.com. Please ignore my question about it please.

  24. Howardas100 says:

    Can i change colors in wordpress my sefl theme?

  25. Hello, this weekend is nice for me, because this moment
    i am reading this great educational article here at my home.

  26. Britt says:

    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!!!

Trackbacks/Pingbacks

  1. Wordpress Programming | Bryan E Patrick - [...] on his channel on YouTube. He will show you how to lay out a website using HTML and CSS,…
  2. 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…
  3. 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 [...]
  4. 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…
  5. Wordpress Top 160 Tutoriais | Blog do Dinheiro Brazil - […] 104. Crie um tema wordpress […]

Leave a Reply

Your email address will not be published.

Google+