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.

    Visit

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

    Visit


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 : http://nettuts.com/tutorials/wordpress/how-to-create-a-wordpress-theme-from-scratch-part-2/

About these ads

Filed under: Blog, Komputer,

About me…

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

MacManiac

MacManiac

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

smashingmagazine.com webdesignerdepot.com www.davidairey.com

Freebies

iconspedia.com iconarchive.com Desktop wallpaper- www.vladstudio.com

Belajar Design di sini

http://www.smashingmagazine.com http://www.designer-daily.com

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. debian.org ubuntu.com

My File

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

RSS smashingmagazine.com

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

RSS DailyDesignerNews

  • 3D ice cubes on the rock
    Some 3D milled ice cubes created for an advertising campaign for Suntori. These are real pieces of art designed to last only a few minutes. The post 3D ice cubes on the rock appeared first on Design daily news. Download the Designers essentials package now!
  • Truth facts infography
    Truth facts are a series of infographies that give you a humorous look at some neglected facts. The post Truth facts infography appeared first on Design daily news. Download the Designers essentials package now!
  • Featured illustrator: Eric Chow
    Eric Chow, a London-based illustrator from Hong Kong. After graduated from London College of Communication in 2012, he has been working as a graphic designer in London and building up his illustration collection at the same time. The post Featured illustrator: Eric Chow appeared first on Design daily news. Download the Designers essentials package now!
  • The 2Face backpack on Kickstarter
    With a project already backed on Kickstarter earlier this year, Andrew and Alex are already experienced in successfully launching products that please people. I have no doubt that their new project will be just as successful, if not more. The 2Face backpack‘s concept is already great to begin with, and they showed enough sketches and […] The post The 2Face b […]
  • Typographic projects by Lo Siento
    Spanish design studio Lo Siento can do typography with anything: bubble wrap, paper or plastic. We give you an overview in this post, but you’ll find more on their site. The post Typographic projects by Lo Siento appeared first on Design daily news. Download the Designers essentials package now!

RSS lifehacker

  • Wholesome Tracks Your Nutrition, not Just Calories
    iOS/WP: Most nutrition trackers focus on giving you an easy way to track calories consumed towards a daily goal. Wholesome takes a different approach, and helps you make sure you're getting the vitamins and nutrients you need every day, and serves as a guide to what nutrients are in what foods.Read more...
  • These DIY Lighted Bookshelves Look Great, are Easy to Build
    Leaning bookshelves can be great space-savers that look great in even small spaces. This set of good looking hand-built bookshelves also pack under-shelf lights to highlight whatever's on the shelf below, whether it's books, collectibles, or something else. Plus, they were pretty easy to make.Read more...
  • The Best, Actually Useful, Phone Accessories
    It seems like pretty much everyone makes a smartphone accessory of some kind. Most of them are terrible and don't work. But some of them are actually awesome. Let's cut through the junk and make a list of the best.Read more...
  • The Expand Home Screen
    Android: Themer has a ton of neat home screen themes , and Expand is no exception. This design features four collapsible sections with all the links, shortcuts, and widgets you'll ever need.Read more...
  • Deckset Creates Great Looking Presentations from Any Markdown File
    Mac: PowerPoint and Keynote have been the main presentation tools for most people for a long while, but if you're looking for a simpler alternative, Deckset makes things a bit simpler by building presentations based on Markdown files. Read more...

RSS vector tutsplus

  • ‘Envato Live’ Pop-Up Coworking Space - Chicago, June 7 2014
    Traditionally the Envato meetups have taken place over a few hours and a few drinks. This year our CEO Collis wanted to craft a meetup that captures what Envato represents. So we’ve created Envato Live, a full day event with a focus on creativity and skill sharing. We’ve rented out rooms at a very fun and creative space called Catalyst Ranch in Chicago for J […]
  • How to Draw Animals: Wolverines, Badgers, Otters and Martens
    What You'll Be CreatingMustelidae is a family of ferocious predators... with cute dark eyes. It contain both fearless honey badgers, agile ferrets and brisk otters. This time we'll talk about bigger members of the family only, but don't worry - weasels will have their tutorial too! Keep on reading if you want to learn something about these unc […]
  • How to Create a Colorful Fashion Illustration in Adobe Illustrator - Part 3
    What You'll Be CreatingIn the following tutorial, we'll pick up from the last tutorial on creating a fashion illustration in Adobe Illustrator. If you need you familiarize yourself with the previous tutorials, check out part one and part two before you begin. 1. Create the Sunglasses Step 1 Now it’s time to draw the accessories!  And I will begin w […]
  • Create a Drum Kit Illustration in Adobe Illustrator
    What You'll Be CreatingFor starters you will learn how to setup a simple grid and how to create a set of pixel perfect shapes that will be used a simple guide. Next, you will learn how to create the first drum using basic blending and vector shape building techniques along with some basic Transform effects. Moving on you will learn how to create the dru […]
  • Technical Drawing for Beginners: Three Point Perspective
    What You'll Be CreatingThree point perspective is great when you wish to render objects or scenes from an abnormally high or low point of view. The distortions that the third vanishing point brings into your composition often has a very artistic effect and makes even the most simple concept more interesting. Some Points to Consider There are some points […]
  • Repeating Patterns Made Easy in Inkscape
    In this quick tip, we're going to go over a tool called Create Tiled Clones. It's a very useful menu with tons of options for creating large amounts of identical, yet dynamic objects, such as patterns. It can be used for so many things, but let's just dive right in!1. Create Tiled ClonesStep 1So where is this beautiful tool? Head up to Edit […]
  • Create a Fabulous Nail Polish Text Effect in Adobe Illustrator
    What You'll Be CreatingFor starters you will learn how to create the nail polish bottle cap using basic blending and vector shape building techniques along with some complex linear gradient and the Live Corners feature. Next, you will learn how to create a pink art brush, a simple background and smooth piece of text. Taking full advantage of the Appeara […]
  • Interview With Mobile Interface Designer, Alan Power
    I recently had some time to chat with Alan Power, a mobile interface designer, and Tuts+ author, that is based in Dublin, Ireland. In our conversation, we talked a bit about how he got his start in the industry, what pushed him to become a better designer, as well as what tools he could not live without. Let's take a look!Hi Alan, thanks so much for tak […]
  • Human Anatomy Fundamentals: Basics of The Face
    What You'll Be CreatingHaving thoroughly explored the human body, it is time to start looking more closely at its details, starting with the face. The very first thing the eye looks for, in any setting, is the human face, and this applies also to art: a viewer will first look at the face of your character. Mastering the face, particularly the drawing of […]
  • Vector Battle: Round One - Diamonds (Start)
    Over the past two days we published two diamond themed tutorials. This is because two Instructors stepped forward to take part in our first Vector Battle. They were given a theme to work with to create fun, educational and quality tutorials for our awesome readers.Round One: DiamondsThe theme for the first Vector Battle was Diamonds. This was because the bir […]
  • Create a Set of Flat Precious Gems Icons in Adobe Illustrator
    What You'll Be CreatingIn this tutorial we will learn how to create a set of simple yet trendy flat-style gems icons in Adobe Illustrator! Using basic shapes and Blending Modes, we will make our precious gems shine and sparkle. You don’t need any special drawing skills or devices, so let’s get started! 1. Form a Perfect Shiny Diamond Step 1 Launch Adobe […]
  • Mastering Calligraphy: Making Your Own Font
    In this last "Mastering Calligraphy" lesson, we're going to apply all that we've learned to create our own font. No more following the rules! It's all up to you! I'll walk you through the basic questions you need to answer before you start and then show you how to make an alphabet that feels cohesive. What You'll Need Penci […]
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

Friendfeed

View my FriendFeed
buattoko.com - 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

  • Defraggler Portable 2.18.945
    Defrag the files you want to, without having to process the whole drive. 2014-04-16
  • Defraggler 2.18.945
    Defrag the files you want to, without having to process the whole drive. 2014-04-16
  • NetworkTrafficView 1.82
    A network monitoring tool that displays general statistics about your network traffic. 2014-04-16
  • QuickTextPaste 2.41
    Insert (paste) quickly pre-defined text in any Windows applications via keyboard shortcut. 2014-04-16
  • Cash And The City 1.4.2
    A simple and handy program for planning and tracking personal or family finances. 2014-04-16

RSS Top ten Freeware…

RSS Techrepublic…

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

RSS Gizmo…

  • Get A Top-Of-The-Range $59.95 DVD Ripper For Free If You're Quick
    Digiarty are running one of their regular software giveaways for the next 10 days. Not for the first time, the subject of the giveaway is their WinX DVD Ripper, which lets you copy your DVD movies to your phone, iPad, smartphone or PC as a simple, playable, unprotected file that doesn't require custom DVD player software. Unusually, however, the current […]
  • Compose Music Directly On Your PC. No Paper Required
    Once upon a time, writing music involved the use of music notation paper (with those familiar 5 lines), and lots of pencils and erasers. Nowadays, you can do it much more easily on a computer, using software that's really just a musical version of a word processor. Start with an empty sheet of notation paper, then drag notes onto the page at the appropr […]
  • Create Stand-alone, Portable, and Virtualized Versions of Just About any Program.
    Cameyo is a program designed to create standalone, independent and portable application containers from a software installation. Cameyo works as follows. You fire up the program, and based on your set of features, you run an installation, capturing the changes to your system, including files, folders, registry, and other items. Once this step is complete, Ca […]
  • Select Your Mood. Get The Soundtrack. Brilliant!
    Listening to music can often help with whatever you're doing. But some jobs are best suited to a specific type of music. If you're studying, for example, you want instrumental tracks that help you concentrate. If you're playing sport, you'll want something else. 8tracks is a brilliant way to listen to music. Just click on a couple of butt […]
  • How to Check if a Website has been Affected by Heartbleed
    A very severe security problem with widespread implications for the entire web has been revealed. Here are sites with information about Heartbleed and ways to check if websites that you use might have been vulnerable. http://www.techsupportalert.com/content/how-check-if-website-has-been-affected-heartbleed.htm

Blog Stats

  • 118,615 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: