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

  • Why You Should Include Your Developer In The Design Process
      Should designers be able to code? This topic never seems to die, with its endless blog posts, Twitter discussions and conference talks. But the developer’s involvement in the design process seems to be addressed very little. This is a shame, because developers have a huge amount to add to discussions about design. The unfortunate truth is that many designe […]
  • Refining Your Mobile Onboarding Experience Using Visual Analytics
      In the wonderful world of millions of mobile apps, many users suffer from ADD (app deluge disorder), and no aphorism looms larger for developers than “You only get one chance to make a first impression.” Once a large group of people are downloading your app, you’ve already won half the battle and have accomplished your primary goal. Now, keeping them engag […]
  • The State Of Animation 2014
      The post-Flash era is hardly free of animation. CSS animation is quickly becoming a cornerstone of user-friendly interfaces on mobile and desktop, and JavaScript libraries already exist to handle complex interactive animations. In the wake of so much “CSS versus JavaScript animation” infighting, a new API specifically for web animation is coming out that m […]
  • Creating A “Save For Later” Chrome Extension With Modern Web Tools
      Creating an extension for the Chrome browser is a great way to take a small and useful idea and distribute it to millions of people through the Chrome Web Store. This article walks you through the development process of a Chrome extension with modern web tools and libraries. It all begins with an idea. Mine was formed while reading an interesting (and long […]
  • How A Designer Can Find A Job They Will Truly Love
      There comes a time in nearly everyone’s career when changing jobs is the natural next step. As a designer, you might start looking for a new job when you feel you have hit a wall with your current employer or when greater opportunities are present at other companies. After taking the necessary steps to prepare for a job search, like updating your resume an […]

RSS DailyDesignerNews

  • 30 free and beautiful HTML5 templates
    The new version of HTML; HTML5 is being very popular today for building remarkable websites. Many developers modify the pre-existing HTML template for a quick result as starting from scratch is really time consuming and repetitive task to carry. There are a lot of web designers that produce free HTML5 templates which you can use […] The post 30 free and beau […]
  • Funny illustrations by Shanghai Tango
    It’s hard to find anything about Shanghai Tango on his (or her) Tumblr site, but the work speaks for itself. Most drawings are funny, some a little less but they are always clever. The post Funny illustrations by Shanghai Tango appeared first on Design daily news. Download the free transport icons package now!
  • The best cheatsheets web designers will need
    Despite of years of practice and coding, it’s impossible for any designers to remember and know absolutely everything required for their work. The technology and trend is never constant. Whether it’s a programming language, CMS or any other framework, they need to refer the official document and a handy cheatsheet for best outcome in any […] The post The bes […]
  • Design deals for the week
    Every week, we’ll give you an overview of the best deals for designers, make sure you don’t miss any by subscribing to our deals feed. Wood Type Font Collection This Wood Type Font Collection created by Mateusz Machalski, feates 6,000+ glyphs, 6 different families in 2 styles each with support for 40 different languages. $9 instead […] The post Design deals […]
  • 12 corporate fonts that won’t let you down
    Are you looking for corporate fonts in order to design your company’s brochure, magazine, pamphlets, logo, website or for advertising/packaging purpose? Then here are the lists of 12 corporate fonts that won’t let you down. Check it out below! 1. Helvetica Designed by Max Miedinger, the Helvetica font was initially named as Neue Haas Grotesk. […] The post 12 […]

RSS lifehacker

  • Manage Someone You Don’t Like By Working Closely With Them
    If you've been in a management position, you've possibly had to supervise someone who just rubs you the wrong way. Instead of avoiding them, try working with that person directly and they might annoy you less.Read more...
  • Skipping COBRA for Health Insurance Can Save You Money, But Not Always
    When you leave your job, federal law requires your employer to let you stay on your existing health insurance. You'll pay full price for that insurance without an employer subsidy. You might consider buying your own insurance on the marketplace instead.Read more...
  • Here Are Your Once-A-Year Sonos Discounts
    Amazon has kicked off their now-annual SONOS promotion, no need to wait for Black Friday.Read more...
  • Check Out the Best From This Week's Open Thread
    How can I open up a striped screw on an Apple Trackpad? Where can I find a good lock screen widget for Android Lollipop? What advice can you give someone trying a completely new career field? How can I run Orange Box on a Hackintosh? Read more...
  • Make a Crispy Pie Crust With a Hot Baking Sheet
    Pie tastes great any time of year, but the holiday season is prime time for pies of all flavors. A soggy pie crust can ruin an otherwise great pie, If you preheat your baking sheet, you'll end up with a better crust.Read more...

RSS vector tutsplus

  • Create Beautiful Wedding Invitations Using Adobe InDesign and Typekit
    What You'll Be CreatingAdobe has recently released a new update for its InDesign CC software. With continued enhancements being made to Typekit, namely making the syncing of fonts in Creative Cloud more slick and seamless while you work, it’s a great time to try out CC if you haven’t already. You can make good use of the fantastic typography features av […]
  • How to Create Custom Smoke Brushes in Adobe Photoshop
    What You'll Be CreatingSmoke trails are elegant, beautiful, and amazing to watch. Thin wisps of smoke dancing through the air reveal just how fluid our atmosphere really is. The effect is deceptively simple, and the dynamics of it are dizzyingly complex. Recreating believable smoke in a digital environment is no easy task. However, capturing the practic […]
  • Defining and Valuing Art
    When we first started drawing, there was no intention to it. There was a tool, and there was an effect of using it, but it didn't matter—the process itself was fun! Then, either you were told your pictures were beautiful and felt great because of it, or you heard someone else being told it—and felt jealous. Another value has been added to this process—t […]
  • Quick Tip: Perfect Your Designs With the Measure Tool in Adobe InDesign
    What You'll Be CreatingThe Measure Tool is an often overlooked Adobe InDesign feature, which can be really useful for documents where you need to keep a close eye on dimensions. It can save you from making measurement errors that often show up, disastrously, only after you’ve sent something to print (or even worse, once the item has already been printed […]
  • How to Make Your Own Watercolor Brushes in Adobe Photoshop
    What You'll Be CreatingCreating custom watercolor brushes is as easy as dripping ink or watercolor paint onto paper. You will have custom, ready-to-paint brushes in no time thanks to this simple tutorial. Download the attached watercolor scans and follow the steps below to create your own set of drippy, splashy, and splattered brushes.1. Editing Scanned […]
  • How to Draw Animals: Small Rodents and Their Anatomy
    What You'll Be CreatingIn this part of the series we're going to learn how to draw small rodents like mice, rats, squirrels and others. First we'll learn about the general traits of rodents and then about all the features of actual species.1. General Rodent AnatomyThough very different, small rodents share some body features you can use to lea […]
  • $3 Tuts+ Courses this Cyber Monday
    This Cyber Monday (December 1st) we're reducing the prices of all individual Tuts+ Courses to just $3 (normally $15)! Discover your new skills in everything from web design and code to photography and design & illustration with our step by step video courses. With expert instructors delivering easy to digest practical lessons, our 430+ courses inclu […]
  • Tell Us What You Think & Win Prizes: Tuts+ Annual Survey 2014
    It’s back! The Tuts+ annual survey for 2014 is here and we want to know what you think. In having your say you could also win from a fantastic prize pool worth a total of more than $20,000! Plus there’s a special offer from Shopify and New Relic for everyone that completes the survey.This is your opportunity to tell us what you like, dislike and love about T […]
  • How to Create an Isometric Pixel Art Vehicle in Adobe Photoshop
    What You'll Be CreatingIn this tutorial you'll learn to make an isometric pixel art car. Have your character ready; it's going for a ride.We'll be creating a relatively generic sedan. It won't be too flashy, which is ideal for recycling many times over on the same illustration (useful if you're making a city scene!). But even th […]
  • How to Use the Text Tool in CorelDRAW
    What You'll Be CreatingIn this tutorial you'll get a proper introduction to the features of the Text Tool and Text Properties docker in CorelDRAW, through the creation of a label design for food products. Get to know how to alter horizontal type, type and edit on a curved path, and type within various shapes. I'll also give you an overview of […]
  • How to Create a Detailed MacBook Illustration in iDraw
    What You'll Be CreatingIn this tutorial you will learn how to create a detailed MacBook illustration in iDraw. For starters you will learn how to set up a grid and how to create the shape that will make up the screen frame. We'll continue with the screen and you'll learn how to easily add an image inside your iDraw document. Moving on, you wil […]
  • A Talky-Talk with JS Chen (陈佳生) From G’Day
    I recently sat down for an interview with the Creative Lead at one of China’s new-wave design firms.Design MattersI have a friend from the Czech Republic who told me a great story about going shopping after the country won independence from the USSR. Through the entirety of her childhood, there had only ever been one brand of yogurt in the supermarket. Then […]
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

RSS Top ten Freeware…

RSS Techrepublic…

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

RSS Gizmo…

  • Print A Digital Image As Separate Tiles For Maximum Clarity
    With modern digital cameras and scanners now able to produce image files at a very high resolution, not to mention the widespread availability of some gorgeous images for free download, sometimes it's nice to be able to print out your own large-format posters. But if your printer is limited to A4 or letter size paper, which is around 8 by 12 inches, you […]
  • How to Harden Your Browser Against Malware and Privacy Concerns
    Yesterday we looked at using the free Sandboxie utility to prevent your computer becoming infected with malware. Here are some other excellent options: http://www.techsupportalert.com/content/how-harden-your-browser-against-malware-and-privacy-concerns.htm
  • A Simple Guide to Keeping Youself Safe on Internet Using the Free Sandboxie Utility
    We are all aware of the dangers of malware infection from the Internet these days. The danger has always been there, but this has increased a lot more because people with malicious intents are constantly devising new methods to infect the systems, and the inexperienced, naive, general-users/elderly/teens are the most affected by it. Malware infection from th […]
  • Control Your Music Players with Hand Gestures (Android only)
    Similar to great ideas of controlling smart TVs with hand gestures, this smart app BrainWave works with hand gestures too in a way to control music players without touching the screen of your smart phones or tablets. Three simple hand gestures are currently recognized by this app—Hold your open palm above the screen to play or pause a song, swipe right to ad […]
  • User-Friendly Bandwidth Detective Gets A Welcome Update
    Glasswire is one of my favourite finds of the year. It shows you how much internet traffic your computer is producing, both inbound and outbound, and it shows you precisely which programs or services are generating it. It's great for tracking down slow connections, and very useful if you suspect that a certain program is sending or receiving more data t […]

Blog Stats

  • 123,275 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d blogger menyukai ini: