you're who you choose to be…

Self Employed Web Designer and Web Developer. Still learn to be a great Web Designer…

How to Create a WordPress Theme from Scratch: Part 2

Sep 18th in WordPress by Sam Parkinson

It’s time for the good stuff now. We’ll be adding the comments system, a sidebar with widgets and an archive for all the old posts. This will cover all that you need for a simple but well functioning WordPress theme, and hopefully you be able to apply this to all sorts of theming projects.

Author: Sam Parkinson

I live in London, the capital city of England. I enjoy it, there is always something to do. As to what I’ve done web related, I’ve created a proxy site, a blog and a club site, I’ve also havd the pleasure of creating several web designs for a few lucky people. I’ve almost learn’t PHP, HTML and CSS are my area of expertise though I’m also a good guy to have when it comes to hardware.

Overview Of The Extras

Following on from the previous article on How to Create a WordPress Theme from Scratch, we are now going to add that oh so missing sidebar, the comments system and lastly an archive page. This should get you well introduced into WordPress theming, however you could always improve so I’ll also give you a bit of recommended reading.

I hope to show you how to setup a widget ready sidebar, which should also give you an idea of how to add widgets to other areas of a template. The comments system is fairly simple, but we always like our site to look good so there will be a bit of styling involved. Lastly the archive, this is one of WordPress’s standard template files, however custom pages are very similar, killing two birds with one stone…

Step 1 – The Sidebar

Always best to tackle the hard parts first right? Well lets get started then. Create a new file in your theme’s directory called functions.php and open it up for editing. Paste in the following:

  1. <?php
  2. if ( function_exists(‘register_sidebar’) )
  3. register_sidebar(array(
  4. ‘before_widget’ => ,
  5. ‘after_widget’ => ,
  6. ‘before_title’ => ‘<h2>’,
  7. ‘after_title’ => ‘</h2>’,
  8. ));
  9. ?>

What this does is tell WordPress that there is a widget ready sidebar in our theme. This code can be expanded on to include themes with several widget ready areas. We also state that our theme’s sidebar needs different HTML from what WordPress normally outputs. What this does is stop the sidebar widgets getting wrapped in <li> tags, which wouldn’t look so good for us.

Now, lets design that sidebar, create yet another file, called sidebar.php and paste in the following.

  1. <div id=“sidebar”>
  2. <?php if ( !function_exists(‘dynamic_sidebar’)
  3. || !dynamic_sidebar() ) : ?>
  4. <h2>About</h2>
  5. <p>This is the deafult sidebar, add some widgets to change it.</p>
  6. <?php endif; ?>
  7. </div>

What this does is simply tell WordPress where the sidebar is meant to be. There’s a little default text in there in case you don’t have any widgets on the sidebar.

Finally we need to include the sidebar file in index.php, so open that up and add the following just before the <div id="content"> tag, make sure the header include tag is still at the top of the file though.

  1. <?php get_sidebar(); ?>

Congrats, you’ve just added a dynamic sidebar to the theme.

Step 2 – Comments

The WordPress comment system can be as easy or as complicated as you wish, however because this is a simple tutorial that is building a simple theme, we’re going to use the simple method of adding comments to our posts.

WordPress makes it easy by having a standard commenting system design that comes with every copy of WordPress, and it can be used by any theme. So that’s what we’ll do. Open up index.php and put the following after line 13 (I’m talking about right after the line with all the post details like the_time(), etc.)

  1. <?php comments_template(); // Get wp-comments.php template ?>

As you can see, this includes a file that we do not have in our theme folder, but actually from somewhere within the confusing depths of WordPress. Joking aside, this makes our life a whole lot easier.

Test out your theme now, you’ll notice that it’s smart enough to not show the form and all the comments on the homepage, but when you click on a post it all renders as you want. Well… except for the fact that the textarea is way to big. To fix this we do not want to go and edit the core of WordPress but simply add a line of CSS, and make it somewhat easier to read in the process. So add the following to the bottom of style.css.

  1. textarea#comment { width: 400px; padding: 5px; }
  2. .commentmetadata { font-size: 10px; }

The first line will limit the textarea’s with to a sensible size and also add a bit of padding to make it that bit easier to read. You now have a simple but ever so functional commenting system in your theme.

The meta data was also a bit small, so thats what the second line covers.

Step 3 – The Archive

Most WordPress sites have an ‘archive’, the place to look for old posts. The commonly display two lists, one with links to all the posts in the sites categories, and one with all the posts by month. This keeps the archive quick to browse through and makes it a better user experience.

archives.php is seen by WordPress as one of their standard files, you do not need to add any special header to get it seen. However if you wish to make another page template that is not standard, take a read here.

So create the new file and put in the following, and all will be explained.

  1. <?php get_header(); ?>
  2. <?php get_sidebar(); ?>
  3. <div id=“content”>
  4. <h2 class=“entry-title”><?php the_title() ?></h2>
  5. <?php the_content() ?>
  6. <ul id=“archives-page” class=“xoxo”>
  7. <li id=“category-archives”>
  8. <h3>Archives by Category</h3>
  9. <ul>
  10. <?php wp_list_categories(‘optioncount=1&title_li=&show_count=1′) ?>
  11. </ul>
  12. </li>
  13. <li id=“monthly-archives”>
  14. <h3>Archives by Month</h3>
  15. <ul>
  16. <?php wp_get_archives(‘type=monthly&show_post_count=1′) ?>
  17. </ul>
  18. </li>
  19. </ul>
  20. </div>
  21. <?php get_footer(); ?>

This may look fairly similar to index.php however you may notice that there is no WordPress loop. This is because we’re creating a page, with only one item in it. We can still use functions such as the_title() to get and display information about the page.

There is also the the_content() function, so that if you did put a little text on this page it would still display. Now the next stuff is fairly simple, its a standard list (well two actually…) with two functions in it, wp_list_categories() and wp_get_archives(). Both functions output a standard list, the first list all the sites categories and gives each a link which go to display all posts in that category. The second does just the same except it displays months not categories.

The parameters in the functions make them display the category/month with a post count for added dynamic site factor, hehe. To add this cool archive page to your site you need to create a new page and change the “Page Template” option to the new “Archives Page” one. Check it out, a cool archive page for everyone to see how much you have written.

Review – Does it work?

Yes it does, the sidebar does its job. Same goes for the comment system and the archive page. I hope this has shown you the basics of how to make a WordPress theme, even if in the simplest of forms. Check out the links below to get started with the more advanced themeing available for WordPress.

Further Reading

  • The WordPress Codex

    The WordPress Codex

    Theme development, the codex is clear and well written documentation. Coming from the creators of WordPress, you can’t go wrong following its instructions.


  • CSS Tricks Screencast

    There was a lot of mention about CSS Tricks 3 part guide to WordPress themeing, so I though I’d put it up on this one. It goes through how to build a nice site, a fair bit more complicated that this one but should improve on those themeing skills.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

sumber dari :

About these ads

Filed under: Blog, Komputer,

About me…

Quick Facts
- 24 tahun.
- Muslim, mengikuti jejak para pendahulu yang sholeh.
- Suami dari 1 orang istri.Ayah satu orang putra
- Bekerja sebagai Technical Support Computer di percetakan Rotogravure.
- Mahasiswa Kelas Karyawan Universitas Mercubuana, Jurusan Desain Grafis dan Multimedia.

Yahoo status



Social Networking

Klik untuk mengenal lebih jauh Erwin di Facebook Klik untuk mengenal lebih jauh Erwin di Twitter Klik untuk melihat image yang disimpan di Picasa RSS feed

Reference 4 Design

Freebies Desktop wallpaper-

Belajar Design di sini

Fave Linux

SLAX is a Linux Live CD operating system based on Slackware. It does not need to be installed on a computer system's hard drive; it boots and runs from either a CD or USB drive. There is also an option to run SLAX from RAM. SLAX was developed by Tomáš Matějíček in Czech republic using the Linux Live scripts.

My File

Klik untuk melihat file saya di 4shared Klik untuk melihat file saya di mediafire


  • Essential Visual Feedback Tools For Web Designers
      The creative process takes a lot of time, and web designers know it. When you factor in feedback from clients, the process takes even longer: numerous emails, revision notes, chats and meetings — that's what it normally takes to find out precisely what the client wants. Fortunately, today's web provides various solutions to optimize the communica […]
  • Making Modal Windows Better For Everyone
      To you, modal windows might be a blessing of additional screen real estate, providing a way to deliver contextual information, notifications and other actions relevant to the current screen. On the other hand, modals might feel like a hack that you’ve been forced to commit in order to cram extra content on the screen. These are the extreme ends of the spec […]
  • Are Your Internal Systems Damaging Your Business?
      The internal systems of many organizations have shocking user interfaces. This costs companies in productivity, training and even the customer experience. Fortunately, we can fix this. "How come I can download an app on my phone and instantly know how to use it, yet need training to use our content management system? Shouldn’t our system be intuitive? […]
  • Dropbox’s Carousel Design Deconstructed (Part 2)
      Many of today’s hottest technology companies, both large and small, are increasingly using the concept of the minimum viable product (MVP) as way to iteratively learn about their customers and develop their product ideas. This two-part series, looks into the product design process of Dropbox’s Carousel. Part 1 covered the core user, their needs and Dropbox […]
  • Creating Clickthrough Prototypes With Blueprint
      In a previous article, I discussed using POP to create sketch-based clickthrough prototypes in participatory design exercises. These prototypes capture well the flow and overall layout of early design alternatives.

RSS DailyDesignerNews

  • Watch post-it notes
    Created by Doriane Favre, these post-it notes can be fixed to your wrist. Their design that looks like a watch is perfect to keep the post-it note and have it available with you all the time. The post Watch post-it notes appeared first on Design daily news. Download the free transport icons package now!
  • 10 cool designs made with pallets
    If you want to decorate your room with cost effective yet classy and elegant look then you should try pallets. Pallets are cheap, easy to find and applicable to any type of furniture. Whether you are willing to design a coffee table, shoe rack, sofa or charming box, with pallets, you can easily design anything […] The post 10 cool designs made with pallets a […]
  • How 3D printing is rescuing Frank Lloyd Wright’s Annie Pfeiffer chapel
    Frank Lloyd Wright is one of the most admired architects of the 20th century, and one of his masterpieces is on a Florida campus. The problem with architecture that pays attention to details is that some of those details can be very costly to repair. Creating bricks that require a lot of manpower is time […] The post How 3D printing is rescuing Frank Lloyd W […]
  • 12 great design freebies for your resources library
    Design freebies are a blessing sent to us by the Internet and kind designers who are willing to share some of their work for free. Like other templates and downloadable items, these files allow you to save plenty of time designing, but they don’t cost a dime. Here is a selection of awesome recent freebies. […] The post 12 great design freebies for your resou […]
  • 7 jQuery plugins for better typography on screen
    jQuery with a motto of write less, do more has made the life of programmers and developers much easier and time efficient with its several plugins. Web typography has never been an easy job unless we were introduced to the wide spread adoption of web fonts with helpful typography tools and several useful jQuery plugins. […] The post 7 jQuery plugins for bett […]

RSS lifehacker

  • Make an MP3 Player Out of an Old Cassette
    Mp3 players aren't nearly as popular as they used to be, but Instructables user BrittLiv's MP3 player-inside-of-a-cassette is cool enough that it might be worth making regardless. Read more...
  • Make a Raspberry Pi Model B+ Case from a Manila Folder
    Raspberry Pi cases are a dime a dozen , but we all know making your own is usually the best way to go. The recently released Model B+ changes the form factor of the Pi enough that old cases don't work. Thankfully, Imgur user quantumCity shares a B+ case made from a Manila folder.Read more...
  • Do You Still Jailbreak Your iPhone?
    Jailbreaking iPhones has been a popular route for people trying to get more out of their iOS devices for a long while, but Apple keeps slowly adding a lot of jailbreak features to their operating system. So, we want to know, do you still care about jailbreaking?Read more...
  • Protect Your ATM PIN or Lock Combo from Thieves with This Quick Trick
    There's a new way for thieves to steal your ATM PIN code or find out which numbers you pressed on many keypads (like number door locks): All they need is an iPhone case that shows infrared. You can prevent it with a simple trick, though.Read more...
  • What's Your Favorite Mechanical Keyboard Switch?
    We talk a lot about mechanical keyboards around here, and with good reason. They're the kind of life/work upgrade you never look back from , and a joy to type and game on. Today we want to know what your favorite mechanical switch is, and why.Read more...

RSS vector tutsplus

  • Create a Retro Gold Leather Text Effect in Adobe Photoshop
    What You'll Be CreatingCreating 3D text effect does not always require using the 3D tools. This tutorial will show you a simple way of using the shape attributes in Adobe Photoshop CC, along with a couple of layer styles, to create a retro, leather-like, 3D text effect pretty easily and quickly. Let's get started! Tutorial Assets The following asse […]
  • Create a Set of Art Brushes You Can Use to Make a Linocut-style Illustration
    What You'll Be CreatingLearn how to create a completely vector illustration that has the look of a handmade linocut or woodcut, in Adobe Illustrator.To find out even more about brushes in Adobe Illustrator, check out my course Mastering Brushes in Illustrator, here on Tuts+. 1. Create the Art BrushesWhen creating a linocut print, artists use special too […]
  • How to Crosshatch a Landscape from a Photograph
    What You'll Be CreatingBreak out your pens and pencils and learn how to crosshatch a landscape. You'll start by making a value scale to learn how to use lines to create depth and then you'll ink your own landscape from a photo reference.Crosshatching was in the height of fashion in the mid-1800s during the Golden Age of Illustration. Artists a […]
  • How to Create a Pixel Game UI in Adobe Photoshop
    What You'll Be CreatingThere's a lot you can do when creating a menu or one f the numerous interfaces that exist within a video game. In the case of this tutorial, we'll take the time to play with pixel art once again to make something RPG-inspired that harkens back to 16-bit menu screens.1. Set Up Your Document and BackgroundStep 1Pixel art i […]
  • Vector Community Project: Show Us Your Wire Frames!
    Everyone loves a taste of the behind the scenes magic of creating incredible art. And in this quick Tuts+ project, we want the vector community to give us a little peek into your process by showing your own vector wire frames.What is a Vector Wire Frame?When working in Adobe Illustrator, you can always choose to view your art in the outline mode. These outli […]
  • Get Under the Hood with Vector Wire Frames: All About Outline Mode
    What You'll Be CreatingTypically, when working in Adobe Illustrator, artwork is created and edited in Preview Mode (Control-Y), where full color, gradients, effects, and more are not only in full view but are repeatedly rendered every time changes or additions are made. The alternative to Preview Mode is a handy method of viewing artwork known as Outlin […]
  • How to Use Web Fonts With Adobe Muse
    In this tutorial I will show you how to use web fonts in your Adobe Muse projects. We'll cover font options offered within the web font catalogue, including Google Web Fonts and fonts hosted yourself.We'll also look at how Adobe Muse handles type which can't be rendered with web fonts, so let's get started!Watch Screencast Download the vi […]
  • How to Design a Weathered Illustrative Logo Set in Adobe Illustrator
    What You'll Be CreatingIn this tutorial, I'll show you a potential process for approaching a simple illustrative logo design project. We'll go through the steps you can take to develop ideas, refine your logo work, and experiment with different looks for a logo. I'll give you a few tips along the way about some techniques you can take adv […]
  • Lifelong Education is for Everyone
    No matter who you are, today is the day to learn something new.Have you found yourself spinning your wheels with a sense of frustration or lack of passion for what you are doing? If you're reading this, you have the power to forge a path for yourself.Are you tired of feeling like you can never catch up, or like the work you produce is less-than-spectacu […]
  • Back to School Special: 30 Easy Adobe Photoshop Tutorials
    With summer quickly drawing to a close, what better way to celebrate the new school year than with a little back to school lesson? Today we're bringing you a selection of incredible Adobe Photoshop tutorials to inspire the budding designer within you. Back to the Basics: Learn Basic Learning the basics of Adobe Photoshop is fundamental to your learning […]
  • Create a Candy Gumball Machine Illustration in Adobe Illustrator
    What You'll Be CreatingThe look and simplicity of a gumball machine is ubiquitous in design. It's no doubt you've grown up around them at stores, restaurants, or shopping malls. While globe-like machines tend to be the most iconic, we're going to focus on the box-like design that's often seen to house more than just gumballs. Fire up […]
  • Create Unique Rust and Distress Effects in Adobe Photoshop
    What You'll Be CreatingThis tutorial is an excerpt from a larger set of instruction found in the Tuts+ course Advanced Photo Manipulation: Movie Poster Effects. This tutorial will deal with one aspect of that larger project, creating custom rust and distress effects. Because when you are stomping around a city in your giant robot suit beating up enormou […]
Klik untuk mengenal lebih jauh Erwin

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Bergabunglah dengan 25 pengikut lainnya.

Erwin berkata….

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

erwin @twitter


View my FriendFeed - memiliki toko online itu mudah

Forum Mac User

Komunitas Pengguna Apple Macintosh Indonesia
Free open source Mac software

RSS Udaramaya…

  • Sebuah galat telah terjadi; umpan tersebut kemungkinan sedang anjlok. Coba lagi nanti.

RSS New-Freeware

RSS Top ten Freeware…

RSS Techrepublic…

  • Sebuah galat telah terjadi; umpan tersebut kemungkinan sedang anjlok. Coba lagi nanti.

RSS Gizmo…

  • Do we Really Need Windows Registry Cleaners? An Important Question Finally Answered.
    Have you ever wondered whether registry cleaners do anything useful? Some people say yes others the opposite. Senior Editor Remah got sick of the endless speculation and conducted a massive series of quantitative tests to find the real answer and what he found will surprise many. […]
  • Get Automatic Notification If A Website Changes Its Privacy Policy
    Every major website has a privacy policy which sets out what they do, and don't do, with the data you provide. And with information about your visits to the site. As technology, and the needs of the business, progress, privacy policies get updated. So information that was previously private may not be so private any longer. Trouble is, not all websites […]
  • 600 Free e-Books, Including a Physics Classic
    Senior Editor Robert Schifreen says "Apologies for my absence over the past few days. I've been unwell (nothing serious), but am now pretty much recovered and ready to resume posting some new hot finds. Today, I have some great free ebook resources to share with you, courtesy of subscriber Anna Merikin. In 1964, Richard Feynman delivered a series o […]
  • Wallpaper of the Week: Rusted Old Lock with Mystery Background
    This weeks wallpaper is a rusted old lock. It's attached to a bank of old looking, numbered metal objects. The overall tone of the image is rust, sepia brown and silver. I don't have any idea what those objects are (handles or ?) but I like the way they look. If you know what these are please let us know in the comments - I'm terribly curious […]
  • A Travel App Worth Traveling With (Apple iOS and Android)
    When you are around a place and have no idea where to go or what to eat, checking out some travel apps can always be helpful. Trover, sounds a bit like “travel”, is one of such handy and superb apps designed for on-the-go discovery. Besides the web version that you can try in a browser, Trover has a mobile app for Android and Apple iOS devices. It’s excellen […]

Blog Stats

  • 121,770 hits
web stats

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: