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

  • Design Accessibly, See Differently: Color Contrast Tips And Tools
      When you browse your favorite website or check the latest version of your product on your device of choice, take a moment to look at it differently. Step back from the screen. Close your eyes slightly so that your vision is a bit clouded by your eyelashes. Can you still see and use the website? Are you able to read the labels, fields, buttons, navigation a […]
  • Hybrid Mobile Apps: Providing A Native Experience With Web Technologies
      According to a recent report, HTML is the most widely used language for mobile app developers. The main reasons among developers for selecting web technologies is cross-platform portability of code and the low cost of development. We’ve also heard that hybrid apps tend to be sluggish and poorly designed. Let’s prove whether it’s possible to deliver the nat […]
  • Improving Your Information Architecture With Card Sorting: A Beginner’s Guide
      Information architecture (IA) is one of those buzzwords you’ve probably heard before. It refers to the organization of the information on your website and how it all fits together. When planning your IA, involve users of your website in the process as soon as you can. In this article, we’ll discuss card sorting, a tried and true technique for doing just th […]
  • Be A Better Designer By Eating An Elephant
      I can’t imagine any other industry in which so much change happens so quickly. If you stop paying attention for a week, it can feel like you’ve not been listening for a year. There’s so much to learn. Falling behind is easy, too. We might be in the middle of a major project, so we put off learning about this newfangled thing called Sass or Node.js or even […]
  • Freebie: Touristic Icons (100 Icons, PNG, SVG)
      Icons are a lot like real monuments — they can both be easily recognized. Today's icon set consists of a set of vector icons that represent monuments across the globe, so they can be literally used anywhere. This colorful set was carefully designed by Freepik and is completely free to use for commercial as well as your personal projects, including sof […]

RSS DailyDesignerNews

  • Giveaway: get 2 Developer subscriptions for your visitors from Elegant Themes
    For the launch of their amazing new WordPress plugin for social sharing, our friends at Elegant Themes are offering two developers account to Designer Daily’s readers. They do this to celebrate the launch of Monarch, their social media plugin for WordPress. How to enter You can enter by entering a comment explaining which theme or […] The post Giveaway: get […]
  • 10 free vintage labels and badges packs
    Labels and badges are very popular elements in modern web. If you are designing a retro design then it’s not complete without a vintage label. Badges are very powerful to use in promotional and marketing tactics. There are several areas where you can use them. If you have special offer or item on sale then […] The post 10 free vintage labels and badges packs […]
  • Incredible spinning glass sculpture
    This sculpture by Thomas Medicus is absolutely fascinating. When it rotates, each side let you see a different animal. Each animal is made of small image strips that only merge visually from a specific angle. The best part for me is to watch the animated version though, where the strips merge together to form the […] The post Incredible spinning glass sculpt […]
  • 10 impressive parallax scrolling web designs
    The website design has evolved drastically with time and today, parallax effects are adding extra beauty to every website. Parallax scrolling is a perfect scrolling technique where background images move at a slower rate to the foreground images, creating an illusion of depth, while scrolling down the page and adding to the immersion. There are […] The post […]
  • Core Escher: a font family inspired by the work of M.C. Escher
    Core Escher is a beautiful font family based on the work of M.C. Escher, an artist who specialized in optical illusion art. With rounded shapes and layers, this typeface perfectly recreates the impossible perspectives that Escher often pictured with strange stairs or castles. With the sub-families offered, you can create different viewpoints to change the [… […]

RSS lifehacker

  • Play with Digital Paper with These Android 5.0 Wallpapers
    Google just released announced Android 5.0 last week and, along with it came a new developer preview. Included in that preview are a slew of pretty new wallpapers for your phone-decorating pleasure.Read more...
  • Watch Out for Suspicious Microsoft Office Files--It Could Be Malware
    Microsoft recently announced a security advisory warning of specially crafted Microsoft Office files that can give an attacker the same user rights as the user that opens it. The vulnerability affects all supported releases of Microsoft Windows, excluding Windows Server 2003.Read more...
  • Most Popular Linux Desktop Environment: GNOME Shell
    Even after settling on a Linux distribution to use, you still have to decide on a desktop environment. There are tons to choose from, and last week we asked you for your favorites . Then we looked at the five best Linux desktop environments . Now we're back to highlight your favorite, 11,000 votes later. Read more...
  • The Best Techniques for Negotiating with Car Dealerships
    Car salespeople have a reputation for trying to squeeze every cent from their customers, and they're often very good at their jobs. They are experienced negotiators and you need to know how to find leverage to make a deal in your favor.Read more...
  • Gawker These Are the Creepy 4Chan Successors Behind Gamergate's Pathetic War | io9 10 Bizarre Theori
    Gawker These Are the Creepy 4Chan Successors Behind Gamergate's Pathetic War | io9 10 Bizarre Theories About The Pyramids That DON'T Involve Aliens | Jalopnik The Man Who Turned Speedboats Full Of Weed Into Indy 500 Glory | Kotaku The Evil Within: The Kotaku Review | Kinja Popular Posts Read more...

RSS vector tutsplus

  • Fractal Art: Create a Tile Fractal in Apophysis
    What You'll Be CreatingThis tutorial will equip you with the skills to create a style of fractal known as tiles. The concept of a tile (think subway tile or kitchen backsplash) is ideal for a fractal application because of the repeating pattern of self-similarity. In this tutorial we will explore the power of post-transforms, learn how to apply a final […]
  • How to Create a Halloween Illustration With a White Kitten in Adobe Illustrator
    What You'll Be CreatingIn this tutorial, you will learn how to create a Halloween-inspired illustration featuring a cute kitten. You will mostly use ovals and other basic shapes. It's bit longer than usual but easy to follow, and will lead to an adorable final result. Let's get started!1. Creating the HeadStep 1Hit the Ellipse Tool (L) and cre […]
  • Create Zombie Dragon Concept Art: Painting in Adobe Photoshop
    What You'll Be CreatingLast time we were designing and sketching a zombie dragon. Today we're going to make it more real by creating a digital painting in Adobe Photoshop. I'll show you a clean, non-destructive way of painting digitally—we'll be using Layer Masks and maps known from 3D modeling. I'll explain to you how ambient occlus […]
  • Quick Tip: Using the Eyedropper Tool in Adobe InDesign
    What You'll Be CreatingThe Eyedropper Tool is a multi-functional tool which you can use to speed up your workflow in Adobe InDesign. The main functions we’ll cover here are the tool’s ability to lift colors from a placed image for applying to text and other elements in your document, and also its use as a tool for applying the formatting attributes of o […]
  • Create a Funny Trick-or-Treat Halloween Monster in Adobe Illustrator
    What You'll Be CreatingWhat is the most exciting and delightful part of Halloween? No doubt, it's trick-or-treat! In this tutorial we are going to depict a cute, furry monster who has already gathered a basketful of yummy treats. We will use basic shapes and Warp effects, Pathfinder functions, and some simple freehand drawing with the Pencil Tool. […]
  • The A to Z of Sketch
    This A-Z list breaks down each tool within Sketch, including links to relevant tutorials here on Tuts+ and descriptions of what each tool can do. This list will be continually maintained and updated, so make sure you check back regularly! #9-Slice Image: Slice your bitmap images into nine different sections to aid scaling. You can click and drag any of the f […]
  • How to Create an Easy Halloween Pattern in CorelDRAW
    What You'll Be CreatingIn this beginner tutorial, we'll combine drawing tools and simple shape-building tools to create a spooky, Halloween-inspired pattern. All three designs within the pattern are formed from basic shapes: circles, squares, and triangles. Fire up CorelDRAW and let's bring on All Hallows' Eve!1. Drawing the MoonStep 1Sta […]
  • Get a Free Year of Learning With Your Hosting Plan
    For a limited time only when you purchase an InMotion Hosting yearly plan for just $3.49/mo you'll also receive a free yearly subscription to Tuts+ (worth $180).What Will You Get?Your yearly hosting plan with InMotion includes:24/7 top rated in-house tech supportFree Softaculous one-click auto installer (includes over 310 applications)Free cPanel server […]
  • Create Your Own Popcorn Horror Box in Adobe Illustrator
    What You'll Be CreatingThis Halloween, get your party howling with some eyeball-popping homemade popcorn boxes. Gather a bunch of friends, turn the lights out, and host a “Scary Movie Night”. I recommend playing “The Exorcist”, “Texas Chain Saw Massacre” or “Dawn of the Dead”. And what more better party prop for this celebration than a gory, single-serv […]
  • New Course: Shape Creation in Adobe Illustrator
    If you want to learn more about creating shapes in Adobe Illustrator, check out our new design course. In Shape Creation in Adobe Illustrator, you'll gain a thorough understanding of Illustrator's shape creation tools, giving you the confidence to create any design with relative ease.What You'll LearnThis course will teach you how to use a var […]
  • Transform a Stock Photo Into an Airbrushed and Stenciled Illustration in Adobe Photoshop
    What You'll Be CreatingIn this tutorial, you'll learn techniques for creating sketchy, hand-drawn line art with a stock photo, using gradients and noise effects to imitate airbrushing techniques, and using custom shape tools to create quick and easy stencil designs within their illustration. Grab your graphics tablet, open up Adobe Photoshop, and l […]
  • Create a Purple Monochrome Portrait for Spirit Day in Adobe Illustrator
    What You'll Be CreatingIn the following tutorial, you will learn how to create a purple monochrome portrait from a photograph, for GLAAD's Spirit Day, in Adobe Illustrator.Millions go purple on Spirit Day in a stand against bullying and to show their support for lesbian, gay, bisexual and transgender (LGBT) youth. Observed annually since 2010, indi […]
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…

  • 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 […]
  • #WebsiteWednesday: how to use your .xyz
    What was your guess for the 555,555th .xyz domain, #GenXYZ? Drumroll, please… The 555,555th .xyz registration was: BrewIt.xyz With all of the buzz we’ve been getting for having the most number of active websites, Team XYZ has also been receiving a lot of great questions about how to use your shiny new .xyz domain name. […]
  • .xyz is 4 months old!
    Time sure flies when you’re working on the next big thing. And it makes it all worthwhile when we see internet users everywhere with their .xyz domain names. We might only be 4 months young, but .xyz continues to be the most popular and fastest growing new domain extension. According to the latest stats, there […]

RSS Gizmo…

  • Nine Shortcuts to Speed up Internet Browsing that You May Not Know
    All the common browsers have a number of shortcuts but some are not as well-known as others. Here are nine helpful browser hot keys and shortcuts that you may not be aware of. http://www.techsupportalert.com/content/nine-shortcuts-speed-internet-browsing-you-may-not-know.htm
  • Updated: Best Free iPad Apps
    This list of Best Free iPad Apps now includes 132 apps in various categories. Despite more than 1 million iOS apps in Apple’s App Store available for download, we only select the best from the free ones running in full screen on your iPad, while iPhone apps running on the iPad in 1x or 2x mode are excluded from this list. http://www.techsupportalert.com/best […]
  • Three Ways to Easily Access Your Most Recent Documents and Files in Windows 8.x
    I noticed that this article we published in April 2014 is among the highest rated at Gizmo's Freeware so I thought it was well worth mentioning again: Do you miss having the Start menu feature “Recent Items” that used to be present in Windows before Windows 8 removed the entire Start menu? A folder with shortcuts to recently opened files is still there […]
  • A Superb App to Help Monitor Markets (iOS, Android)
    If you like to stay up-to-date on global business and finance news, or have even been buying shares from the stock markets as a casual trader or an investor, it is definitely worthwhile to check out what news and stock apps that can help monitor market trends or manage your investments. Among such apps, this is one of the renowned and powerful apps to use. I […]
  • Website of the Week: The Story of the Web
    This site takes a look at the defining moments in the history of the World Wide web. If you're curious about how the internet got started you'll find that and more at Story of the Web. http://www.techsupportalert.com/content/website-week-story-web.htm

Blog Stats

  • 122,457 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d blogger menyukai ini: