Creating a WordPress Theme

Creating a WordPress ThemeHere I’ll show you what goes into Creating a WordPress Theme.

I previously showed you the HTML of a WordPress Theme and the CSS of a WordPress Theme. Now you’ll learn how to turn that website into a real working theme.

Here is a link to a zipped version of this sample theme. It is about 95% complete. You can use it in anyway you’d like, but I guarantee nothing.

Specifically in this WordPress Video Tutorial I’ll cover how to:

  • Set up a Blank Theme
  • Place a Search Form Where you Want
  • Create a WordPress 3.0 Horizontal Menu
  • Place a Featured Banner Where you Want
  • Create 2 Sidebars
  • Display Recent Posts with Excerpts
  • Pull Articles from RSS Feeds Dynamically
  • Create Subscription Links to your Feed, Twitter and Facebook
  • Set up a Dynamic Footer

And, much, much more…

Creating a WordPress Theme From Scratch

This is the first video tutorial on how to make a WordPress theme from scratch. I hope you enjoy it. All of the code follows the video.

In the next part of this video I’ll finish up the CSS required and then you’ll be an expert. Leave questions and comments below.

Code From the Video

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’ => ‘Sidebar Widgets’,

‘id’ => ‘sidebar-widgets’,

‘description’ => ‘These are widgets for the sidebar.’,

‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,

‘after_widget’ => ‘</div>’,

‘before_title’ => ‘<h2>’,

‘after_title’ => ‘</h2>’

));

}

 

if (function_exists(‘register_nav_menus’)) {

register_nav_menus(array(‘main-menu’ => ‘Main Navigation’));

}

 

?>

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 rel=”StyleSheet” href=”<?php bloginfo(‘template_directory’); ?>/css/home.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”>

<img src=”<?php bloginfo(‘template_directory’); ?>/images/logo2.png” height=”60px” width=”60px” alt=”Key Care Logo” id=”logo” />

 

<h1 id=”blogTitle”><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

 

<p id=”blogSlogan”><?php bloginfo(‘description’); ?></p>

 

<span id=”searchBox”><?php get_search_form(); ?></span>

</div>

 

<div id=”featuredBanner”>

<img src=”<?php bloginfo(‘template_directory’); ?>/images/nursebanner.png” alt=”Nurse Banner” height=”250px” width=”1000px” id=”featuredImage” />

</div>

 

<?php wp_nav_menu(array(

‘theme_location’ => ‘main-menu’,

‘menu_class’ => ‘dropdown’,

‘container_id’ => ‘navigation’,

‘fallback_cb’ => ‘wp_page_menu’

)); ?>

SIDEBAR-FIRST.PHP

<div id=”firstSidebar”>

 

<?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘Sidebar Widgets’)) : else : ?>

 

<!– All this stuff in here only shows up if you DON’T have any widgets active in this zone –>

 

<?php /* wp_list_pages(‘title_li=<h2 class=”sidebarTitle”>Pages</h2>’ ); */ ?>

 

<h2>Recent Posts</h2>

 

<div>

<?php query_posts( ‘posts_per_page=3’ ); ?>

 

<?php while ( have_posts() ) : the_post();

echo ‘<a href=”‘;

the_permalink();

echo ‘”>’;

the_title();

echo ‘</a>’;

echo ‘<p>’;

the_excerpt();

echo ‘</p>’;

endwhile; ?>

 

<!– Reset the query so query_posts() can be used again –>

<?php wp_reset_query(); ?>

 

</div>

 

 

 

<h2>Great Articles</h2>

 

<?php if (function_exists(‘fetch_feed’)) { ?>

 

<?php include_once(ABSPATH . WPINC . ‘/feed.php’);

$feed = fetch_feed(‘http://www.newthinktank.com/feed/’);

 

$limit = $feed->get_item_quantity(3);

 

$items = $feed->get_items(0, $limit);

 

if (!$items) {

echo “Feed Not Available”;

} else {

 

foreach ($items as $item) {

 

echo ‘<div>’;

echo ‘<a href=”‘;

echo $item->get_permalink();

echo ‘”>’;

echo $item->get_title();

echo ‘</a>’; ?>

<p><?php echo $item->get_content(); ?></p>

</div>

<?php }

 

}

} ?>

 

 

 

<h2>Subscribe</h2>

<ul>

<li><a href=”<?php bloginfo(‘rss2_url’); ?>”>Entries (RSS)</a></li>

<li><a href=”<?php bloginfo(‘comments_rss2_url’); ?>”>Comments (RSS)</a></li>

</ul>

 

<?php endif; ?>

 

</div>

SIDEBAR-SECOND.PHP

<div id=”secondSidebar”>

 

<?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘Sidebar Widgets’)) : else : ?>

 

<!– All this stuff in here only shows up if you DON’T have any widgets active in this zone –>

 

<h2>Subscribe</h2>

<ul>

<li><a href=”<?php bloginfo(‘rss2_url’); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/rss_logo.png” height=”50px” width=”50px”</a>

<a href=”http://www.twitter.com/newthinktank”><img src=”<?php bloginfo(‘template_directory’); ?>/images/twitter_logo.png” height=”50px” width=”50px”</a>

<a href=”http://www.facebook.com/dbanas2″><img src=”<?php bloginfo(‘template_directory’); ?>/images/facebook_logo.png” height=”50px” width=”50px”</a>

</li>

</ul>

 

<?php wp_list_pages(‘title_li=<h2>Pages</h2>’ ); ?>

 

<h2>Archives</h2>

<ul>

<?php wp_get_archives(‘type=monthly’); ?>

</ul>

 

<h2>Categories</h2>

<ul>

<?php wp_list_categories(‘show_count=1&title_li=’); ?>

</ul>

 

<?php wp_list_bookmarks(); ?>

 

<h2>Meta</h2>

<ul>

<?php wp_register(); ?>

<li><?php wp_loginout(); ?></li>

<li><a href=”http://wordpress.org/” title=”Powered by WordPress, state-of-the-art semantic personal publishing platform.”>WordPress</a></li>

<?php wp_meta(); ?>

</ul>

 

<?php endif; ?>

 

</div>

INDEX.PHP

<?php get_header(); ?>

 

<?php get_sidebar(‘first’); ?>

<?php get_sidebar(‘second’); ?>

 

<div id=”mainContent”>

 

<div id=”introTitle”><h2>Welcome to My Website</h2></div>

 

<p id=”introParagraph”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

 

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

 

<div id=”postLists”>

<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>

 

<h2 class=”postTitle”><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2>

 

<?php include (TEMPLATEPATH . ‘/inc/meta.php’ ); ?>

 

<p class=”postExcerpt”>

<?php the_content(); ?>

</p>

 

<div class=”postmetadata”>

<?php the_tags(‘Tags: ‘, ‘, ‘, ‘<br />’); ?>

Posted in <?php the_category(‘, ‘) ?> |

<?php comments_popup_link(‘No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?>

</div>

 

</div>

 

</div> <!– Ends postLists –>

 

<?php endwhile; ?>

 

</div> <!– Ends Main Content –>

 

<?php include (TEMPLATEPATH . ‘/inc/nav.php’ ); ?>

 

<?php else : ?>

 

<h2>Not Found</h2>

 

<?php endif; ?>

 

<?php get_footer(); ?>

FOOTER.PHP

<div id=”footer”>

 

<?php

$pages = get_pages();

foreach ($pages as $page) {

echo ‘<a href=”‘;

echo get_page_link($page->ID);

echo ‘”>’;

echo $page->post_title;

echo ‘</a>&nbsp;&nbsp;’;

} ?><br /><br />

 

&copy;<?php echo date(“Y”); echo ” “; bloginfo(‘name’); ?>

</div>

 

</div>

 

<?php wp_footer(); ?>

 

<!– Don’t forget analytics –>

 

</body>

 

</html>

STYLE.CSS

/*

Theme Name: New Think Tank Theme 1

Theme URI: http://www.newthinktank.com

Description: My first theme that was built by scratch

Author: Derek Banas

Author URI: http://www.newthinktank.com

Version: 1

*/

 

html {

background: #EEE1C2;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#EEE1C2′, endColorstr=’#FFFFFF’); /* for IE */

background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE1C2), to(#FFFFFF)); /* for webkit browsers */

background-image: -moz-linear-gradient(top, #EEE1C2, #FFFFFF); /* for firefox 3.6+ */

}

 

body {

background-color: #EEE1C2;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#EEE1C2′, endColorstr=’#FFFFFF’); /* for IE */

background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE1C2), to(#FFFFFF)); /* for webkit browsers */

background-image: -moz-linear-gradient(top, #EEE1C2, #FFFFFF); /* for firefox 3.6+ */

font: 14px/1.4 Georgia, serif;

}

 

 

#header, #footer, #firstSidebar, #secondSidebar {

display: block;

}

 

#pageWrapper {

width:1000px;

background-color: #FFFFFF;

margin-left: auto;

margin-right: auto;

}

 

/* All Header CSS Styling */

#header {

position: relative;

background-color: #A11C46;

height: 55px;

padding: 20px;

}

 

#blogTitle {

position: absolute;

left: 86px;

top: -15px;

color: #FFFFFF;

font: bold 40px/1.4 Georgia, serif;

text-shadow: #000000 2px 2px 1px;

}

 

#blogTitle a {

text-decoration: none;

color: #FFFFFF;

}

 

#blogSlogan {

position: absolute;

left: 86px;

top: 48px;

color: #FFFFFF;

font: bold 15px/1.4 Georgia, serif;

text-shadow: #000000 2px 2px 1px;

}

 

#searchBox {

position: absolute;

left: 675px;

top: 65px;

color: #FFFFFF;

font: bold 15px/1.4 Georgia, serif;

text-shadow: #000000 2px 2px 1px;

}

 

/* All Sidebar CSS Styling */

 

#firstSidebar a {

color: #A11C46;

text-decoration: none;

font: bold 11.5px/1.4 Arial, sans-serif;

}

 

#secondSidebar a {

color: #A11C46;

text-decoration: none;

font: 12px/1.4 Arial, sans-serif;

}

 

#firstSidebar {

font: 13px/1.4 Georgia, serif;

color: #666;

padding 5px;

padding-bottom: 15px;

padding-left: 10px;

border-left: 2px solid #A11C46;

background-color: #FFFFFF;

width: 175px;

text-align: left;

float: right;

margin-left: 5px;

margin-right: 5px;

margin-top: 5px;

list-style-type: none;

}

 

#secondSidebar {

font: 13px/1.4 Georgia, serif;

color: #666;

padding 5px;

padding-bottom: 15px;

padding-left: 10px;

border-left: 2px solid #A11C46;

background-color: #FFFFFF;

width: 175px;

text-align: left;

float: right;

margin-left: 5px;

margin-right: 5px;

margin-top: 5px;

list-style-type: none;

list-style-position: inside;

}

 

#firstSidebar h2 {

font: bold 15px/1.0 Arial, sans-serif;

color: #A11C46;

}

 

#secondSidebar h2 {

font: bold 15px/1.0 Arial, sans-serif;

color: #A11C46;

}

 

#firstSidebar ul li {

margin-left: -30px;

list-style-type: none;

}

 

#secondSidebar ul li {

margin-left: -30px;

list-style-type: none;

}

 

#footer {

background-color: #A11C46;

text-align: center;

color: #FFF;

padding: 20px;

}

 

#footer a{

text-align: center;

color: #FFF;

padding: 20px;

}

 

 

/* The Container for the Drop Down Menu*/

#navigation {

float:left;

width:100%;

background: #A11C46;

font: bold 14px/.5 Arial, sans-serif;

border-top:1px solid #FFFFFF;

border-bottom:5px solid #FFFFFF;

}

 

/* Menu Bar List */

ul.dropdown {

list-style:none;

float:left;

width:100%;

padding: 0 5px;

}

 

ul.dropdown li{

float:left;

position:relative;

}

 

ul.dropdown a {

padding:12px;

color:#FFFFFF;

text-decoration:none;

text-shadow:1px 1px 0 #000000;

}

 

/* Link Hovering Style */

ul.dropdown li:hover a {

background: #666;

color: #FFFFFF;

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; /* Eliminate the Float */

}

 

/* Drop Down Menu */

 

/* Hide the Drop Downs */

ul.dropdown ul,

ul.dropdown li:hover ul ul,

ul.dropdown ul li:hover ul ul

{ display: none; }

 

/* Display Submenus */

ul.dropdown li:hover ul,

ul.dropdown ul li:hover ul ,

ul.dropdown ul li ul li:hover ul

{ display: block;}

 

/* Change Color of Links on Hover */

ul.dropdown li * a:hover {

background: #A11C46;

color: #FFFFFF;

text-shadow:1px 1px 0 #000000;

}

15 Responses to “Creating a WordPress Theme”

  1. Rick says:

    I have narrowed it down to this error so far…

    Parse error: syntax error, unexpected ‘:’ in /home/digiadul/public_html/wp-content/themes/newTheme/index.php on line 51

    Here is my current fuction.php code:

    < ?php // Add RSS links to 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 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' => __( ‘Sidebar Widgets’ ),
    ‘id’ => ‘sidebar-widgets’,
    ‘description’ => __( ‘These are widgets for the sidebar’ ),
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );

    }
    if (function_exists(‘register_nav_menus’)) {

    register_nav_menus( array(
    ‘main-menu’ =>__(‘Main Navigation’ ),
    ) );

    }
    ?>

    • admin says:

      I’d need to see the index.php code to find the error. If you download the code from the site it is error free. Send me the code and I’ll see if I can help further. Thanks

      • Rick says:

        The downloaded zip version fixed the errors… i was cutting and pasting from the web page here.

        Working now… =)

        • admin says:

          Good to hear that. I triple check the code so I know it works. It’s a shame that I have to use security that messes up the code in the article, but that’s the way it is.

          I hope you like the theme. It is super stripped down and pretty easy to understand and edit.

  2. Abz says:

    this is perfect.. im going to go through this tutorial tomorrow 🙂 Appreciate it! 🙂

    • admin says:

      You’re welcome 🙂 Stick in there. It starts out with me explaining how twenty ten works, then the database, but I create a theme from scratch in part 4 and then onward.

  3. bobby says:

    Hi Sir Derek, I’ve been following your wordpress theme tutorial and I’m wordpress theme tutorial 7 but it will appear on the wordpress featured content. I need the continuation the wordpress theme tutorial 7. Thanks and I really appreciate your tutorial, helps me a lot bcoz I’m a beginner.

  4. Titi says:

    Hello Derek, thank you for your tuts. Right now i learn step by step this video. But i got problem when i get into sidebar-first.php. When i wrote this code: $limit = $feed->get_item_quantity(3);

    after i saved and reloaded the browser (chrome) i got this message:

    Fatal error: Call to undefined method WP_Error::get_item_quantity() in C:\xampp\htdocs\wordpress\wp-content\themes\Pembelajar\sidebar-first.php on line 31

    please help me. Thanks before

    • admin says:

      More than likely you have a typo. Just check the lines of code around that error. The theme works perfectly on my end. It could however have something to do with the xampp setup? I never use that because of the strange errors I’ve seen xampp cause

  5. salim says:

    hai DEREK

    I have tried your tutorial. I’m facing a prblem in my menu system it doesnt apear the subcategory as a drop down menu any fixes

    • admin says:

      Make sure you set up your menu under Appearance in your WordPress dashboard. Make sure you give it the same name that you set up in your code

  6. Monkey says:

    Thanks so much for your great videos.
    I followed through all the videos “How to layout a website” and was sailing along coding my website on my local host line by line with you. I did have to pause the video quite often, but it was the best learning experience. I did really well building my wordpress theme. I installed wp loaded my theme, created some content and everything worked perfectly except for one thing.
    I can not for the life of me figure out why no post excerpt is being displayed.
    Post title displays,image displays,date displays and even more, but no excerpt.
    I followed the NTT-Cindy theme. Have I messed something up? Any help would be greatly appreciated.
    Here is “my” version of your code.

    <img src="” alt=”” width=”262px” height=”142px” class=”featuredImage” />

    <a href="”>post_title; echo substr($ntt_the_title, 0, 60); ?>

    post_excerpt; echo substr($ntt_the_excerpt, 0, 140); ?>

    <a href="” class=”clickForMore”>More

    • Derek Banas says:

      Thank you 🙂 I’m happy that you were enjoying the videos. On thing you need to do is to put the excerpts in the excerpt box for each post. That is an easy thing to have missed. Did you do that?

  7. Abbas says:

    Thanks for such a great tutorial …
    but there is an error that i can’t fix it .. plzz help me
    there is no nav.php and meta.php file…

Trackbacks/Pingbacks

  1. 10 Most Asked Questions About WordPress | eSpiral Wordpress | Só mais um site WordPress - [...] helpful tutorials for you to familiarize: 1. How To Create Your Own Custom WordPress Theme 2. Creating A WordPress Theme 3. WordPress…

Leave a Reply

Your email address will not be published.

Google+