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

  • Building A Simple Cross-Browser Offline To-Do List With IndexedDB And WebSQL
      Making an application work offline can be a daunting task. In this article, Matthew Andrews, a lead developer behind FT Labs, shares a few insights he had learned along the way while building the FT application. Matthew will also be running a "Making It Work Offline" workshop at our upcoming Smashing Conference in Freiburg in mid-September 2014. […]
  • Think Your App Is Beautiful? Not Without User Experience Design
      Lately, every app is "beautiful". If you read tech news, you’ve seen this pageant: Beautiful charts and graphs. Beautiful stories. Beautiful texting. Beautiful notebooks. Beautiful battery information. Aspiring to beauty in our designs is admirable. But it doesn’t guarantee usability, nor is it a product or marketing strategy. Like “simple” and “ […]
  • Desktop Wallpaper Calendars: September 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 […]
  • Designing Badges (And More) For A Conference
      To badge or not to badge? That is the question. Because badges — and a lot of stuff designed for conferences — often look the same. But if you have a little, different conference, you need different kinds of things. Badges included. It all started in 2013 with the first Kerning conference. I was asked to design the official notebook: we ended up with a rea […]
  • Is Your Responsive Design Working? Google Analytics Will Tell You
      Responsive web design has become the dominant method of developing and designing websites. It makes it easier to think “mobile first” and to create a website that is viewable on mobile devices. In the early days of responsive web design, creating breakpoints in CSS for particular screen sizes was common, like 320 pixels for iPhone and 768 pixels for iPad, […]

RSS DailyDesignerNews

  • 10 crucial points to check before you launch a website
    There are many points to check before you launch a website, which makes it very easy to forget something. 1. Review content and contact information This is not web design work per se, but if you are a web designer who works directly with the client for content, it becomes your responsibility to check that […] The post 10 crucial points to check before you la […]
  • Challenge others to a saving duel with the DUEL piggy bank
    This piggy bank is perfect for people who have a hard time saving, but are highly competitive. Obviously this is not for big savings, these usually happen at the bank, but it can make saving a little money much more fun. The post Challenge others to a saving duel with the DUEL piggy bank appeared first on Design daily news. Download the free transport icons […]
  • How to keep the full file name when saving for web in Photoshop
    When using the “Save for Web” function in Photoshop, a little thing has been annoying many designers for a long time, Photoshop will truncate your file name. This makes it more difficult to save series of images that are numbered at the end of the file name. However, it is very easy to modify the […] The post How to keep the full file name when saving for we […]
  • Hershey’s new logo looks like a turd
    The Hershey company changed its logo a bit. The internal design team did the work, and overall I think they did a pretty good job. The typography in the logo was simplified, a font was even created with that new type. But the icon of a Hershey Kiss just looks like a turd that sits […] The post Hershey’s new logo looks like a turd appeared first on Design dai […]
  • Neil Simone’s surreal paintings merge facts and reality
    Neil Simone creates paintings that are both spectacular and intriguing. With a mix of reality and facts, the British self-thaught artist creates clever compositions that will make you think twice. The post Neil Simone’s surreal paintings merge facts and reality appeared first on Design daily news. Download the free transport icons package now!

RSS lifehacker

  • How to Fix Credit Unions' Biggest Annoyances
    Banks get a pretty bad rap for a lot of well-deserved reasons. Credit Unions are an attractive alternative , but that doesn't mean you're guaranteed an easy life. Here are some of the biggest problems with credit unions, as well as how to fix them.Read more...
  • Mix Patterns Effectively By Picking One as a Focal Point
    Whether you're mixing patterns on your clothing or in your apartment, there are a few guidelines to follow. Apartment Therapy recommends picking one out as a focal point to mix patterns effectively.Read more...
  • Macro Xposed Module Brings Text Expansion to Any Android Keyboard
    Android (root ): Text expansion is one of the most useful features of desktop OSes . On mobile, they're a bit more rare. You can use shortcuts in the stock Android keyboard , but if you want expansion everyone, the Macro/Text Expansion Xposed module is for you.Read more...
  • The Average Cost of Raising a Child in Major Cities
    Parenthood can be expensive. In fact, the national average cost of raising a child to the age of 18 is about nearly a quarter of a million dollars—$245,340 to be exact. Of course, depending on where you live, that number will vary with cost of living. NerdWallet quantified the average cost of raising a child in 288 major cities.Read more...
  • Deadspin Why Your Team Sucks 2014: Buffalo Bills | Jalopnik How To Cross The Country In Your Daily D
    Deadspin Why Your Team Sucks 2014: Buffalo Bills | Jalopnik How To Cross The Country In Your Daily Driver | Jezebel I Had a Mexican Star Trek-Themed Wedding and It Was the Best Thing Ever | Lifehacker The Perfect Sleeping Positions to Fix Common Body Problems Read more...

RSS vector tutsplus

  • Human Anatomy Fundamentals: Drawing Different Ages
    What You'll Be CreatingThroughout these lessons I have touched upon how age changes things in the body and particularly in the face. Here we will look at the full progression of the body and face from birth to very old age.A Few Preliminary WordsLet's get this clear: Everyone ages differently. The diagrams below are not meant to be invariably true […]
  • Create Pixel Art with a Limited Palette in 10 Steps with Photoshop
    What You'll Be CreatingIn this tutorial, I'll show you how to create some 8-bit inspired icons with a limited palette, in Adobe Photoshop. However, you could easily create them in MS Paint!1. Icon Line ArtStep 1We'll be working in Adobe Photoshop CC 2014 (though most versions or even MS Paint will work wonderfully too). Create a New Document. […]
  • Create a Travel Bag Illustration in Adobe Illustrator
    What You'll Be CreatingFor starters you will learn how to setup a simple grid and how to create the main shapes using basic tools and effects along with some basic vector shape building techniques. Moving on you will learn how to add subtle shading and highlights using the Appearance panel, basic blending techniques and a simple blur effect. Finally, yo […]
  • The "Lazy" Way to Paint With Pixels in Adobe Photoshop
    What You'll Be CreatingFor I long time avoided pixel art, because it looked so stiff to me. After all, we need to consciously limit ourselves to an old style coming from times when we were, in fact, limited. But now we have so many advanced tools, we can create photo realistic pictures, so restricting our capabilities is like cutting the wings off the c […]
  • Back to School Special: 30 Simple Adobe InDesign Tutorials
    What You'll Be CreatingWith autumn approaching it’s time to get back to school! Here’s your New Term reading list for Adobe InDesign - a list of easy beginners’ tutorials and articles exploring everything you ever wanted to know about InDesign. So class, here's your homework...Get Familiar with Basic Tools and TechniquesExploring what tools are on […]
  • Create a Tasty Pretzel Text Effect in Adobe Illustrator
    What You'll Be CreatingFollow this tutorial and learn how to create a fun pretzel inspired text effect in Adobe Illustrator. We will begin with the text then we’ll add some dimension to it with the help of the Bas Relief effect, a simple trick which allows you to add highlights and shading in one step. After this, we will add some details like a few cra […]
  • Introducing Avocode — PSD to Code Without Photoshop
    Photoshop has been a part of web design for years, and it’s very likely to continue as such for a long time. If you design for the web using Photoshop, or you’re a developer who handles coding up PSDs, it’s likely there are a few issues you run into on a regular basis. Even if you've transitioned from Photoshop over to Sketch for the design stage of you […]
  • Cartoon Fundamentals: How to Draw Children
    As a cartoonist and a recent father (of one lovely six month old princess), drawing babies and children takes on a new meaning to me.The difference between the drawing of an adult and a drawing of a baby, a child or a teenager is directly related to their anatomical proportions. But in cartoon style, it isn't only that which defines your character. Ther […]
  • 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 […]
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…

  • The spiffiest infographic of all
    Hey there, #GenXYZ. We can’t believe August is almost wrapping up and Fall is right around the corner. What was the highlight of your summer? Ours was hands down launching .xyz in June, and watching it continue to expand as the world’s largest and fastest growing new domain extension. And that’s all thanks to your […]
  • 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 […] […]

RSS Gizmo…

  • A Free Library Of 12 Million Photos For You To Use
    As part of a long-running project called the Internet Archive, millions of books that are out of copyright have been digitized and put online. However, although the text was put through an OCR system and made easily available, the OCR systems were programmed to ignore any areas of the pages which contained pictures. Which resulted in a huge searchable archiv […]
  • See Who Your PC's Talking To
    For as long as internet access has been common, so has the level of concern over programs which "phone home". When you install software on your PC, does that program make silent connections over the internet, back to a server somewhere? If so, why? Is it purely for harmless purposes such as checking for updates? Or could it be sending your confiden […]
  • Unbelievably , This Amazing Game is FREE
    S.T.A.L.K.E.R Lost Alpha is a standalone mod for the 2003 hit game S.T.A.L.K.E.R, and it's completely free and doesn't require the base game to play. Lost Alpha restores all the content cut from first-person shooter survival game S.T.A.L.K.E.R: Shadow of Chernobyl and redesigns all these levels also adding new content to bring in a full-fledged gam […]
  • Some Notes On Trying Out Metapad
    When I wrote in this column last week about a text editor called EmEditor I received many comments about my story, both from those who like EmEditor and from those who prefer a different program. Ever since I've been writing about IT, which I started doing on April 6th 1983, people's preferences for text editors have probably been the strongest-hel […]
  • Wallpaper of the Week: Dark Nebula
    This weeks image is a dark nebula. Dark and light cloud-like forms create fascinating shapes to form a monochrome nebula. Icons are easily visible in the darker parts of the image, less visible in the lighter areas. Brooding and mysterious this is a wallpaper with real impact. http://www.techsupportalert.com/content/dark-nebula-wallpaper-week.htm

Blog Stats

  • 121,540 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: