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

  • Dropbox’s Carousel Design Deconstructed (Part 1)
      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. By focusing on an integral set of core functionality and corresponding features for product development, these companies can efficiently […]
  • How I Built The One Page Scroll Plugin
      Scrolling effects have been around in web design for years now, and while many plugins are available to choose from, only a few have the simplicity and light weight that most developers and designers are looking for. Most plugins I’ve seen try to do too many things, which makes it difficult for designers and developers to integrate them in their projects. […]
  • Ways To Avoid Overwhelming Users: Lessons Learned From My High-School Teachers
      High school. I won’t lie: I did not have the highest grades in my graduating class. Some classes and lessons were so poorly designed and delivered that I would frequently become frustrated and fatigued and would ultimately shut down. The contents of the lessons would just wash over me. The experience wasn’t pleasant, and the results were obvious from my tr […]
  • What 22 Billion Newsletters Tell Us About Designing For Mobile Email
      Do you know which platforms and email clients to focus on when creating an email newsletter for yourself or a client? Using the data from over 22 billion email subscribers, we determined what designers should prioritize, both this year and beyond. In this article, we’ll interpret the numbers from our “Email Marketing Trends” report to help designers like y […]
  • Off To The Races: Getting Started With Design Sprints
      Many modern software development best practices draw on influences from the industrial era and concepts like specialization, where individuals with specialized skills worked in an assembly line to mass-produce physical products. These practices from the world of manufacturing have come to influence how things are done when designing and building software p […]

RSS DailyDesignerNews

  • 12 websites that use big typography beautifully
    Big typography for web design has been very popular and trendy for a few years already. Its main advantage is the powerful impact it can have on the readers, and the efficiency in getting simple messages accross. In this post we showcase some of the best examples of big typography in web design, an inspiration […] The post 12 websites that use big typography […]
  • For our Swiss readers: 3D printing at the Contraste Gallery
    If you are in Switzerland and not too far from the city of Fribourg, you may be interested in joining us on September 6, 2014. The Contraste Gallery, in which I contribute actively, will be hosting Fribourg’s Fablab to demonstrate how 3D printing works and answer any question you may have on the topic. Some […] The post For our Swiss readers: 3D printing at […]
  • Minimalist posters on design vocabulary
    10 posters from the 10 keywords taken from Philippe Daverio’s history of design lectures at Politecnico di Milano. A collaborative project by Matteo Morelli and Giovanni Manzini. The post Minimalist posters on design vocabulary appeared first on Design daily news. Download the free transport icons package now!
  • 8 free corporate identity mockup templates
    When you are a graphic designer, doing a great job at creating visual identities is actually only half of the work. If you are a real professional, you will want to add it to your portfolio and make it look good. Taking good photos of your work is difficult, and laying it out flat would […] The post 8 free corporate identity mockup templates appeared first o […]
  • Pro Wildlife: a campaign to save endangered species
    Hunting endangered species is unfortunatly still a widely popular activity, whether it’s for rare parts of the animal or just as a hobby. To raise awareness on this crucial issue, Pro Wildlife hired German studio Guertlerbachmann. The campaign uses stamps that illustrate visually the effects of hunting endangered species. The post Pro Wildlife: a campaign to […]

RSS lifehacker

  • The Road to Redemption Desktop
    Reader Amitabh put together this good-looking Linux desktop with a few simple add-ons for his system, and the end result offers just a few useful widgets and plenty of room to work, not to mention a personalized experience. Here's how he set it up. Read more...
  • Quickly Open a USB Drive in Windows with a Keyboard Shortcut
    If you need quick access to files on a USB flash drive regularly—or use an application located on one—you can create a keyboard shortcut to save yourself some time.Read more...
  • Make an Easy Peel Away Wrapper for Your Sandwich with Paper Towels
    If you don't want to use a plastic container or sandwich baggies, this method of folding two paper towels around your sandwich both protects and gives no-mess eating access.Read more...
  • Why You Should Get the Big Things Done First
    It's common to reach the end of the day and realize you've hardly accomplished anything. This object demonstration shows why you should tackle the big tasks first thing in the morning.Read more...
  • Six Rookie Portfolio Mistakes Even Seasoned Investors Make
    Even if you've held a brokerage account for decades or have made it a point to stay up-to-date on your daily stock market news, one thing is clear: there's only one Warren Buffett —and you're not him. And that's okay. There are lessons we could all stand to learn.Read more...

RSS vector tutsplus

  • How to Render Short, Detailed Hair in Adobe Illustrator
    What You'll Be CreatingYou'd think that long hair was the hardest hair to render... well that and curly hair, however I have news for you. From my experience from vectoring hundreds of vector portraits, short hair has always been more time consuming and required more precision. The reason being is that long hair benefits from the weight of gravity […]
  • Design a Crazy Retro Poster with Quirky Lettering in Adobe Illustrator
    What You'll Be CreatingIn this tutorial we will create a crazy poster, illustrating a famous quote by Oscar Wilde – “Be yourself; everyone else is already taken”. We’ll apply various Warp Effects to create the elements easily. Learn to make a gentle grain effect to give our poster a vintage look and do some freehand lettering. Let’s get started!1. Creat […]
  • How to Write in the Sand in Adobe Photoshop
    What You'll Be CreatingAdobe Photoshop's Layer Styles are one of the quickest, yet most effective ways of achieving many different effects. This tutorial will show you how to combine the power of Layer Styles along with a couple of textures, brushes, and selection options to create a realistic-looking sand writing text effect. Tutorial Assets The f […]
  • Don't Take It Personally: How to Make Critique Work for You
    As an artist, you're under constant critique. It doesn't always feel good, actually, it's mostly hurtful and gives away all the pleasure of creation. The pressure to meet the standards and not to be critiqued negatively is so strong that it may easily stop one from drawing. But... where does this pressure come from? Does every drawing have a v […]
  • Community Project Showcase: Creative Selfies - Part Three
    Looking for the other amazing entries we received? Then check out Part One and Part Two of our Creative Selfie Showcase.Community Project Showcase: Creative Selfies - Part ThreeToday we bring you the long awaited part three of our Creative Selfie Community Project here on Tuts+. We first started this project back in May, where we asked you to show us a creat […]
  • Understanding Auto, Optical and Metrics Kerning in Adobe Illustrator
    What is Kerning?Kerning is the process of adjusting the space between pairs of letters to give them a more pleasing visual flow. Typically, kerning is used in large text such as headlines or titles though it can be used in body text. As font size increases, gaps between letters become more obvious. These gaps are especially noticeable around letters with an […]
  • Design an Eye-Catching Voucher in Photoshop
    What You'll Be CreatingWelcome to another Photoshop print design tutorial. In this tutorial, we'll learn how to create a nice clean looking design for a present voucher. Follow along to learn some new techniques and basic knowledge when designing artworks for print.Tutorial Assets This tutorial uses images from the Envato Resource Pack and some cus […]
  • How to Create a Vintage Floral Arrangement Painting in Adobe Illustrator
    What You'll Be CreatingIn this tutorial, you will learn how to create vintage floral arrangement painting in Adobe Illustrator. You will learn how to create your own paint brushes and use them. By the end of the tutorial, you will have a beautiful vintage floral bouquet illustration that looks like a real canvas painting!1. Creating special paint brushe […]
  • Create an Isometric Pixel Art Character in Adobe Photoshop
    What You'll Be CreatingIf you really enjoyed playing with Lego as a kid (or if you've continued to play with them as an adult) isometric pixel art might interest you; it can be pretty technical, it feels more like building than illustrating and since there’s no perspective, you can move elements around your isometric environment however you want.We […]
  • Create a Fur Texture, Family Badger Scene in Adobe Illustrator
    What You'll Be CreatingIn the following tutorial, I'm going to show you how to use a sketch from a previous tutorial to create a cute little badger family in Adobe Illustrator.1. Research Your AnimalStep 1Whenever you are looking to create any sort of rendering of an animal, it's always best to research it. This could be anything from the shap […]
  • Sketch for Beginners: Design a Login Form Interface
    What You'll Be CreatingSketch, made by the nice folks at Bohemian Coding, is an excellent program for interface design. This beginner-level tutorial will introduce you to designing with Sketch. You won't need any previous experience with the program, just some free time to spend learning something new.I will show you how to setup a simple artboard, […]
  • Back to School: 28 Easy Inkscape Tutorials
    No matter how advanced or novice of an Inkscape user you may be, the basics are absolutely essential. Let's go over some of the best Inkscape tutorials and courses to get caught up on everything you need to know.Basic Tools and MethodsThere's plenty of tools and methods to become overwhelming, so these are the tutorials you'll want to take a l […]
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…

  • More .xyz domains sold than .org and .net @Hover
    Great news, #GenXYZ! While we’ve been highlighting awesome .xyz websites the past few weeks, we also wanted to break the news of a huge milestone that we hit with one of our innovative registrar partners, Hover. Hover is part of the Tucows family and is famous for their no-fuss and top-notch customer support. It started […]
  • #WebsiteWednesday
    How many times do you have to repeat something before you can say you’re on a roll? With so many creative sites ending in .xyz, we’re back with another episode of .xyz Websites in the Wild. On another Wednesday. Do I sense a theme here? We’re definitely on a roll. The entire XYZ Team was […]
  • .xyz Websites in the Wild
    Our last post was about .xyz going global and being available through all corners of the world. But are any of you wondering who are all these .xyz users and what are they doing with their spiffy new domain names?! Day to day, we’re blown away by the number of innovative .xyz websites that are […]
  • .xyz is Global
    مرحبا,  Γεια σας, שלום, ສະບາຍດີ,  Алло,  สวัสดี,  こんにちは,  안녕하세요 and hello, #GenXYZ! We’re a little over a month old and we’ve truly gone global – twice over. First, we’re excited to announce that we fully support IDNs! What does that even mean? IDN is short for “International Domain Names”. You can now get your perfect […] […]
  • .xyz is Taking Industry-Leading Measures to Prevent Fraud and Spam
    As an industry-leading registry operator, .xyz has spent quite a bit of time prepping for anything that might go wrong in a namespace that’s as popular as we’ve become. So even though we’re busy promoting the next big thing, we’ve been just as proactive behind the scenes to monitor and block spam, plus other forms […]

RSS Gizmo…

  • Updated: Best Free Digital Image Editor
    This highly popular comparative review has just been updated again. What I really like about this review is that different recommendations are made according to the user's requirements. That way everyone can get just the product they need. http://www.techsupportalert.com/best-free-digital-image-editor.htm
  • Want To Develop Android or iPhone Games or Other Apps? You Can, For Free.
    If you have an Android or iOS device and you've been downloading stuff from the relevant app stores, you may have stopped to wonder whether developing your own app is possible and how much it costs to get started. As it happens, there are lots of products around which let you develop apps for Android, iPhone and iPad (and the Windows app store if you re […]
  • Finds of the Week
    Finds of the Week is a list of web sites I've come across lately that are interesting, fun, or useful (or all three). I hope you enjoy them. -Rhiannon - Tuts+ - Hextris - OSX Daily - Enable the F8 key to start Safe Mode in Windows 8 http://www.techsupportalert.com/content/finds-week-tuts-hextris-game-osxdaily-enable-f8-key-start-safe-mode-windows-8.htm […]
  • The Puzzle of 2048: A Truly Amazing Game
    New and popular, 2048, yes that’s the name of the puzzle, is one of the enjoyable games to pick up and play whenever you have time off from work or some spare time to kill off. This game 2048 was created by 19-year-old Italian web developer Gabriele Cirulli in a single weekend according to Wikipedia.This game is challenging and highly addictive. To learn how […]
  • Website of the Week: NASA Image of the Day
    I enjoy looking around the NASA site, there is so much to see. Similar to the popular Astronomy Picture of the Day website, the NASA site has a bit of everything that NASA does, on the ground and in space. You can download the full size image of the day, check out the Image Archives from 2003 to 2006, and the More of NASA's Image of the Day Feed has som […]

Blog Stats

  • 121,433 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: