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

  • Build A Blog With Jekyll And GitHub Pages
      I recently migrated my blog from WordPress to Jekyll, a fantastic website generator that’s designed for building minimal, static blogs to be hosted on GitHub Pages. The simplicity of Jekyll’s theming layer and writing workflow is fantastic; however, setting up my website took a lot longer than expected. In this article we’ll walk through the quickest way t […]
  • Desktop Wallpaper Calendars: August 2014
      We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going […]
  • Declarative Programming And The Web
      Like most web developers, I spend my days giving instructions to computers. These instructions generally involve some input (a request for a web page), some logic (get the right content from a database) and some output (send the content to the requesting browser). This process of telling a computer how to perform a task, such as generating a web page, is w […]
  • Selling The Value Of The Web To Small-Town Clients
      Selling your services as a freelancer or a small shop is tough enough as it is. Selling to a small-town business that might not even see the need for a website adds an extra level of difficulty in turning a profit. I’ve provided web design services to small-town businesses for the past few years, having had many happy outcomes, but also a lot of negative e […]
  • How Limitations Led To My Biggest App Store Success and Failure
      Look at your calendar. If you’re anything like me, all you see are meetings, places to go, things to do, people to meet and not a lot of white space. Few people love their calendar. So, we set out to change that, and we learned a lot in the process. Our app is an iPhone app that flips your calendar upside down and lets you focus on the free time in your da […]

RSS DailyDesignerNews

  • 15 Photoshop actions to save time designing
    This blog introduces you to 15 such Photoshop actions which are free to download and creates stunning effects. For all the photographers, graphic designers and other artists, have a look at the list below and make your design a wonderful one in less time. 1. Vintage Light Leaks Vintage Light Leaks has been created using […] The post 15 Photoshop actions to s […]
  • The Kangaroo clock
    This clock designed by David Raffouli has a small, useful, pocket that serves as a space to put small stuff. It was named the Kangaroo clock for that reason. It was built as part of an ongoing collaboration between Fabrica and the italian clocks producer Diamantini&Domeniconi. The post The Kangaroo clock appeared first on Design daily news. Download the […]
  • 8 awesome ribbon fonts
    Fonts are one of the most essential parts of any design to make it successful. We love those fonts which have their own personality. When it comes to eye catchy and attractive fonts with different curves and shapes, ribbon fonts are best. These fonts are best for highlighting your headings. Below I have collected 8 […] The post 8 awesome ribbon fonts appeare […]
  • 8 online marketplaces to sell your art
    The technology has so much influence in everyone’s life in today’s world that whether it’s buying or selling, maximum dealing is online. Same is the case with your art. Many artists have been selling their work on the internet and have been making money but now there is a great competition as such businesses have […] The post 8 online marketplaces to sell yo […]
  • 5 tools to keep your eyes safe when working on screen
    We been so much influenced by technology these days that we are harming our health with it’s over use. Yes, am talking about the desktops, laptops, tablets, and mobile phones. Almost of us have at least one of these, don’t we? Along with the back pain due to the irregular posture while using desktops or […] The post 5 tools to keep your eyes safe when workin […]

RSS lifehacker

  • The Wilderness Survival Skills Everyone Should Know
    A few hours watching the Discovery Channel can prompt extreme survival fantasies involving frog licking and urine drinking, but what basic skills would you actually need to survive in the wilderness? Here's a look at the basics you need to become an adult Boy Scout straight from a cadre of survival experts. Read more...
  • Become a Better Storyteller Through Dungeons & Dragons
    As a storyteller of any kind, the way you weave your narrative decides whether people keep reading, watching, or listening. The classic role-playing game Dungeons & Dragons can teach you how to construct strong narrative and how to collaborate with others in a way that's a whole lot of fun.Read more...
  • This Chart Explains What Went Wrong with Your Cake
    If you're learning to bake or just trying out a new recipe, it can be hard figuring out exactly why your cake failed. This handy chart will tell you why your cake ended up with cracks, browned edges, or why it has a runny texture.Read more...
  • The Easiest Way to Remove a Broken Construction Nail
    When you're building something or just conducting repairs, you might come across a broken nail that needs to be removed. There's an easy you can do it and all you need is a pair of vice grips and a basic claw hammer.Read more...
  • Say No to New Projects When You First Get Back from Vacation
    Getting back to work from a vacation is tough, and it's even worse when people are hounding you to get started on something. Levo League suggests you say no to any new projects for the first day you're back to maintain your sanity. Read more...

RSS vector tutsplus

  • Create a Propeller Pinwheel Illustration in Adobe Illustrator
    What You'll Be CreatingIn the following steps you will learn how to create a colorful propeller pinwheel illustration in Adobe Illustrator.For starters you will learn how to setup a simple grid and how to create the first propeller using basic tools and effects. Moving on you will learn how to add color and shading for these shapes using basic blending […]
  • Realism, Photorealism, and Style in Drawing
    "I know the anatomy isn't correct here, but it's my style", "This drawing lacks style", "I love your style!" We use the word style a lot without actually grasping its meaning. Like "love" or "art", we know it by heart, but it's not so easy to define.In this article I'll make an attempt to […]
  • Design a Vector Themed Cereal Box in Adobe Illustrator
    What You'll Be CreatingThe most important meal of the day is Adobe Illustrator. I'm pretty sure breakfast comes second. As such, we're going to combine the two and pay homage to the cereal boxes of our childhood with this cartoony box design.1. Start With a SketchStep 1It's important to figure out your central character and layout within […]
  • Create a Diskette and Walkman with New Live Shapes in Adobe Illustrator
    What You'll Be CreatingOne of the many updated features Adobe unveiled with Adobe Illustrator CC 2014 was the inclusion of Live Shapes. Like Live Corners before them, Live Shapes brings greater control over closed path objects, speeding up workflow. Put your memory to the test with this simple shapes tutorial making use of this fantastic new feature.1.  […]
  • Quickly Create a Website With Adobe Muse CC 2014
    In this tutorial I will quickly show you how you can build a website using Adobe Muse CC. Amongst other things, we'll:Create and manage a site structureWork with Master PagesDemonstrate smart guidesTake a look at Typekit fontsUse dynamic navigationImplement a slideshow widget Download video or subscribe to Tuts+ Web Design on YouTubeArtwork by Črtomir J […]
  • Create an Animated Interface GIF in Adobe Photoshop
    What You'll Be CreatingEver wanted to turn an app interface PSD into a fully animated demo for your clients or site? Turns out, you can use Photoshop for that, too.In this tutorial, we will design a simple news iPhone app, and then animate it for client presentation and export it as a GIF file. You'll learn everything you need to go from idea to an […]
  • Quick Tip: Using the Path Blur and Spin Blur in Photoshop CC 2014
    One of the more powerful features that came with the new Photoshop CC is the addition of the Path and Spin Blur filters. This quick tip will explain how to use those filters in order to achieve interesting effects quickly and easily. Let's get started. Tutorial Assets The following assets were used during the production of this tutorial: Golden Dawn Bri […]
  • Working With the Area Type Tool in Adobe Illustrator
    Most blocks of text are set within conventional rectangular borders. But, what about those times when you want to place text within an irregular boundary? Or, what if you want to divide the copy in your text box into columns? I’ll show you how to do both of these things, as well as a few extras, using Adobe Illustrator’s Area Type Tool.Inserting Text Into A […]
  • Community Project Showcase: Creative Selfies—Part Two
    If you're new to this project, check out Part One of our Creative Selfie Showcase.Community Project Showcase: Creative Selfies Part TwoWhen we asked you to show us your creative selfies, we were blown away by the incredible talent of our readers. From vectors to digital paintings, portraits to abstract art, you've all shown us that your talent is t […]
  • Draw a Cute Badger Scene Step by Step
    What You'll Be CreatingAbout two months ago, I'd written a tutorial about drawing badgers (and some other animals of their family). This time we're going to use tips from it to create a cute scene with a badger-mama and her baby.We'll start from scratch and you'll be able to learn a lot of useful tricks to create a quick illustration […]
  • 3 Ways to Retouch Fly-Away Hair
    What You'll Be CreatingIntroductionI really enjoy portraiture. When it's done well, it is very satisfying and tells a lot about the person in the photo. However, there is always a little element that is a constant problem for me: fly-away hair, frizzies, or whatever you call them. They're the strands of hair that stick out from the person […]
  • How to Create a Seamless Vintage Nautical Life Pattern in Adobe Illustrator
    What You'll Be CreatingIt's summertime—the time to hit the beach or take a sail. What better time to decorate with a nautical pattern that'll repeat perfectly?In this tutorial, you will learn to create marine life wallpaper in a vintage style, using Adobe Illustrator. You will use the Pencil Tool to draw different elements, and learn to make t […]
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…

  • .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 […]
  • #Itsgotime
    Hey #GenXYZ! Just one week into general availability, Daniel Negari and the rest of us on the XYZ team packed up our bags – along with a ton of .xyz t-shirts – to go on an epic GoDaddy road show. And what better way to go on an epic road trip than to rent an […]
  • 2014 – The Year of the Registrant
    .xyz has seen enormous success in just our first week of being live. We have become the #1 new domain extension, and we owe it all to the support from YOU and all of our early adopters. We appreciate and give thanks to YOU, the registrant. We positioned .xyz to be the first affordable and […]
  • .xyz – we’re LIVE!
    .xyz is finally here! We launched yesterday morning at 9 am (PDT) and what a whirlwind it was. #GenXYZ, did you get your favorite .xyz domain names? Thanks to all of your support and #GenXYZ love, we received over 31,000 registrations for .xyz domain names within the first 24 hours – that number makes our […]

RSS Gizmo…

  • Free Microsoft Windows Security Tool EMET is Upgraded to Version 5.0
    Microsoft Enhanced Mitigation Experience Toolkit (EMET) has been frequently mentioned here and version 5.0 has just been released. This is a powerful tool for protecting PCs. The Microsoft announcement says: EMET is a free security mitigation tool designed to help IT Professionals and developers protect against emerging threats targeting vulnerabilities that […]
  • Great Collection of Articles and Aids for Understanding and Explaining Technology
    If you are an educator or someone who frequently explains technology to others, here is a resource that is a real find. http://www.techsupportalert.com/content/great-collection-articles-and-aids-understanding-and-explaining-technology.htm
  • The Definitive Guide to the World's Wondrous and Curious Places
    Our Website of the Week is Atlas Obscura, a place where you can find off the beaten path treasures from around the world. This description from the site sums it up nicely: "In an age where everything seems to have been explored and there is nothing new to be found, we celebrate a different way of looking at the world. If you're searching for miniat […]
  • Wonderful Chrome Browser Addon Lets You Search Text Of All Visited Pages
    The built-in history feature built into all web browsers can be very useful. If you need to revisit a page that you looked at yesterday, or a month ago, just search through the history listing and you'll probably find the correct URL listed there. However, the browser history would be much more useful if it stored not just the URL of the pages you visit […]
  • My Currently Favoured Youtube Downloader
    It's often useful to be able to download a Youtube video in order to view it offline. While the web is full of programs and sites claiming to offer such a facility, they are sometimes expensive. And those that are free tend to disappear without warning, so the system you used last week no longer works today. A couple of days ago I needed to download a l […]

Blog Stats

  • 121,044 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: