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

  • Maximize Your Creative Energy
      We’ve heard many personal stories this week of how people in our industry have experienced hard times and how they managed to get out of them. We end this week with an article by Ann Holm, a personal development coach and expert in psychology and brain science. Read on to learn how to reduce stress in your everyday life and prevent burnout and other breakd […]
  • Let’s Talk About It
      Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. It's {Geek} Mental Help Week and we would like to help raise awareness with a couple of articles exploring these issues. – Ed. Talking about mental health can be awkward and embarrassing, but it really shouldn’t be. Mental health […]
  • When Flowers Start To Bloom, It’s A Sign That SmashingConf Oxford Is Coming Soon!
      Crafting a good front-end is no piece of cake. When tough budgets and ambitious goals interweave, you need just the right expertise to make just the right decisions. That’s why we create heavily practical Smashing Conferences, and the upcoming SmashingConf Oxford 2015 isn’t going to be an exception. We don't care about volatile trends, but we do care […]
  • Feeling Stuck? Design What You Don’t Know
      Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. It's {Geek} Mental Help Week and we would like to help raise awareness with a couple of articles exploring these issues. – Ed. Where is it?! It has to be here somewhere. It use to be so easy. What happened? Somewhere, somewhere, […]
  • You Are Not A Machine. You Are Not Alone.
      Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. {Geek} Mental Help Week starts today and we would like to help raise awareness with a couple of articles exploring these issues. – Ed. It was pouring with rain and I found myself driving. I didn’t know where I was going. I just needed […]

RSS DailyDesignerNews

  • 10 tutorials to learn how to create icons with Photoshop
    When we talk about design, icons are one of the important things that cannot be overlooked. They represent images or pictures of some representation such as home icon for homepage, telephone icon for contact page and many more that covers the aspects of impressive web design. But creating these icons can be a real pain […] The post 10 tutorials to learn how […]
  • Print love: new fine art prints published this week
    Poetic, funny, witty, or just beautiful, new art prints are published online every day. Every week, we try to share the best of new digital printmaking projects. Forgiveness by Alejandro Girardo. Cannonball by Budi Satria Kwan. As day turns to night by Budi Satria Kwan. Mêmsac by Exit Man. Nostalgia by Nazario Graziano. You are […] The post Print love: new f […]
  • A collection of the best fonts for grungy designs
    One of the factors affecting the beauty of your design is the fonts. That is why you should be very careful while choosing the fonts. If you wonder which type of font best suits for your grungy designs, then here we have 10 awesome examples. Check it out below! 1. Microbrew Microbrew is a versatile […] The post A collection of the best fonts for grungy desig […]
  • 5 awesome experiential marketing campaigns by RPM
    Experiential marketing, or “engagement marketing” as it’s often called, is a marketing strategy that builds direct relationships between the brand and the client. Instead of looking at the consumers as passive receivers of the message, engagement marketers address the consumers directly and engage with them. some companies like RPM specialize in this type of […]
  • 20 cool iPhone cases
    iPhone is a unique and attractive smartphone that has won several hearts. Its standard is in no comparison to any other smartphones. Beside Apple, other small companies are also being benefited from iPhone. And those are the iPhone cases companies. There are several iPhone case manufacturers who create really amazing and fabulous iPhone cases that […] The po […]

RSS lifehacker

RSS vector tutsplus

  • From Speed Paint to Detail: Paint a Bat-Cat in Adobe Photoshop
    What You'll Be CreatingSometimes you want to paint something, but your idea is too elusive to plan the picture properly. You just start painting and the result is unpredictable. In this tutorial I'll show you a fast method to paint freely and spontaneously, while keeping control over the process. I'll teach you how to tame your imagination and […]
  • New Course: Advanced Vector Portraits, Spooky Edition
    Happy Halloween! What better way to celebrate than by firing up Adobe Illustrator and creating some haunting images?In our new course, Advanced Vector Portraits: Spooky Edition, you'll learn how to modify stock images to create your own zombie child and sugar skull woman.What You'll LearnIn this special Halloween edition of our series of Vector Por […]
  • Play With Blends and Image Trace to Create a Simple Cat Scene in Adobe Illustrator
    What You'll Be CreatingThose who follow my tutorials will know there are three common themes: portraits, cats, and silhouettes. In this tutorial, I'll be creating a simple, Pen Tool-free sunset cat scene, using Blends and Image Trace. If you're using a version of Adobe Illustrator older than CC, Image Trace will be known as Live Trace with mor […]
  • Create Your Own Blood Spatter Adobe Photoshop Brush
    What You'll Be CreatingTutorial AssetsThe following assets were used during the production of this tutorial:Plain white paperOil-based paintA brush or a simple stick1. Preparing the CanvasFirst, prepare a clean sheet of paper. For the paint, you can choose between oil‑based paint and water-based paint. Oil-based paint is much glossier than water‑based p […]
  • Create an Illuminated Digital Paper Cut-Out Scene in Adobe Illustrator
    What You'll Be CreatingIn this tutorial you'll learn how to use gradients, effects like drop shadows and outer glows, and custom brushes in order to render a Halloween-inspired scene that looks as if it's made of dimensional, illuminated paper cut-outs. While nothing beats carefully cutting and layering shapes in various types of paper, this t […]
  • Create a Vintage Bloody Text Effect Wallpaper Design in Adobe Photoshop
    What You'll Be CreatingThis tutorial will show you how to layer a couple of grunge and watercolor brushes, then use them with some textures to create a wall with a real vintage look. After that, we'll combine the text and some dripping brushes to add the writing on that wall. Finally I'll give you some tips on adjusting the lighting so that yo […]
  • How to Create a Bat Icon in Adobe Illustrator Using Just Simple Ellipse Shapes
    What You'll Be CreatingIn this tutorial, you will learn how to create a very easy bat icon using just one shape—an ellipse. Also, you will learn how to cut off shapes and to make an Offset Path. It's one of the easiest tutorials I've ever posted! 1. Creating the BatStep 1Start by creating a New document (File > New) with 600 px width and 42 […]
  • Create Your Own Terrifying Monster Rabbit in Adobe Illustrator
    What You'll Be CreatingOur tutorial will create a very evil if not sinister rabbit named Orifice. The beauty of this tutorial is that all of this was achieved using only a mouse. ALL OF IT! I do hope this will encourage those who longingly stare at tablets and Cintiqs online to believe that they can achieve just as much with what they have. Your tools a […]
  • Dress Up for Halloween With Isometric Pixel Art in Adobe Photoshop
    What You'll Be CreatingYou've made a pixel art character, it looks pretty normal, and it's wearing regular clothes. But Halloween is approaching, and we should get in on the trick-or-treating action.We'll take our character and a little kid character, and dress them up as Batman and Chucky, just because. We'll also be making a jack o […]
  • 25 Popular Translated Design & Illustration Tutorials
    For the past few months we (and when I say “we” I mean the amazing Tuts+ community) have been translating tutorials across the Tuts+ network. So far we have well over 300 translations in nearly 30 languages! Here are some of the most popular examples from Tuts+ Design & Illustration.Arabic (العربية/عربي) أساسيات الرسوم المتحركة: كيف ترسم وجهّا كارتونياً […]
  • Create a Devilish Text Effect in Adobe Illustrator
    What You'll Be CreatingIn this tutorial, you'll create a devilish text effect in Adobe Illustrator. For starters you will learn how to create devil horns using some basic tools and vector shape-building techniques, as well as a simple blend plus some other effects and masking techniques. Using a free font, several built-in brushes, and the Appearan […]
  • Human Anatomy Fundamentals: Drawing Characters Consistently
    What You'll Be CreatingAs a comic artist, one of the comments I get the most is: "I don't know how you're able to draw the same character over and over again so that they're recognizable!" Even artists who are reasonably fluent in drawing humans can still find this challenging, which is why I put together this final lesson. This […]
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…

  • Big in Japan
    Which one of the XYZ videos was your favorite, #GenXYZ? As the domain extension for every website, everywhere, .xyz is the most popular new ending for domains all over the world. Have you heard? One of the largest .xyz markets is all the way across the Pacific Ocean from here in the US, in the […]
  • Where in the world is the #XYZsquad?
    The #XYZsquad has had a long couple weeks. First was the international ICANN conference, which was held in our backyard of sunny Los Angeles. If you happened to be there, it’s needless to say that you definitely caught a glimpse of a few of them and probably even received a goodie. For everyone else, they’ll just have to watch […]
  • You want me to click what?!
    Post-ICANN, pumpkin spiced everything, and with Halloween just around the corner, it’s finally starting to feel like fall here in LA! #GenXYZ, what will you be for Halloween this year? It might be because of the much anticipated sweater weather, but we’re in the mood to give the usual #WebsiteWednesday a little twist. In fact, […]
  • Never have I ever…
    It’s Day 3 of #ICANN51 and Team XYZ is working extra hard for you, #GenXYZ. We’re meeting with our amazing business partners so we can continue to build .xyz as the most popular, go-to ending for YOUR domain. In the midst of back-to-back meetings, panels, and events, we like to take a quick little mental […]
  • Join Team XYZ at #ICANN51
    Hey there, #GenXYZ! Getting ready for #ICANN51 in LA. Tweet us if you’re here! #genxyz #deepv pic.twitter.com/vRlQM9kinp — XYZ (@xyz) October 13, 2014 For those of you who follow us on Twitter, you already know that we’ve been preparing for ICANN’s huge conference in Los Angeles that began yesterday. THOUSANDS of people are gathering from […]

RSS Gizmo…

  • Free System Monitoring Tool Is Now 3 Times More Useful
    I make no secret of the fact that I'm rather a fan of PRTG, the computer and network monitoring product from German outfit Paessler. Install it on a spare PC or laptop and it creates a web-based system that keeps a constant eye on all your devices, and also provides a neat web interface that you can log into in order to see the details. In my day job, w […]
  • Get $49 Worth Of DVD Copying Program For Free If You're Quick
    It's been a while since our friends at Digiarty ran one of their special free offers, so it's good to see that they're doing one in time for Halloween. The company's WinX DVD Copy Pro, which copies DVDs to all sorts of formats so you can watch them on your portable device or PC, is currently on sale, reduced from $49 to $19. But if you do […]
  • Free Tool Tests the Speed of all Your Hard Disks
    I was recently faced with a problem on my network. Copy large files between the 2 local hard disks on my PC was WAY faster than copying the same file across the network to a different PC. This is obviously to be expected, but before I could start trying to solve the problem I needed a decent diagnostic tool. Something that would allow me to guage the speed o […]
  • This Free File Converter Even Handles Multiple Zip Formats
    If you're a regular and frequent computer user, you'll need to use a file conversion utility. However, most of us don't need to convert files very often, so such a feature is generally best done online instead of via an installable program. Unless the data you're converting is particularly sensitive, of course. My recent favourite discove […]
  • How To Protect Yourself From The POODLE Bug
    In recent months, security bugs with names such as Heartbleed and Shellshock have been causing problems for millions of computers worldwide. The latest such bug has been named POODLE, and is the result of a security weakness in an obsolete version of SSL that is still supported by most web browers. SSL is the technology that encrypts data on confidential web […]

Blog Stats

  • 122,655 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d blogger menyukai ini: