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 (part1)

Sep 5th in WordPress by Sam Parkinson

Creating a WordPress Theme, The Homepage Following on from the recent article on “PSD to HTML”, this tutorial will look at taking a HTML/CSS template and turning it into a functioning WordPress theme. There is so much you can do when creating your own theme we couldn’t nearly cover it all. So, we’re going to look at how themes are structured, creation of the core files and splitting up that index.html file.

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 – The Structure Of A Theme

The structure of a WordPress theme is fairly simple, I like to start with the CSS file. It details everything about the theme for WordPress to use. You then have index.php, it’s simply the template file your using with the PHP template tags included, included with that is header.php & footer.php, files that are used across the whole site. Now most themes don’t use just four files and that’s because WordPress allows you to use template files to layout different content. There are the defined layout files, such as archives.php and single.php. However you can also create your own, say, if you wanted to make a page that had a totally different layout to the default.

Because this is such a large topic we’re splitting it into a two part series, this part making a simple but functioning theme from a standard HTML & CSS template, and the second part will look at add more of the advanced parts, such as sidebars.

I will be working on turning the great template “Typography Paramount” by Six Shooter Media into a simple WordPress theme.

Step 1 – style.css

The style sheet is the defining file of the theme for WordPress. There are a few simple things you need to do. The first is renaming the main (if you have more that one) file to style.css, next you need to add a bit of commenting to the file.

  1. /*
  2. Theme Name: Typography Paramount
  3. Theme URI: http://www.sixshootermedia.com/
  4. Description: An image-less template focusing on Typography.
  5. Author: Sam Parkinson
  6. Author URI: http://xseria.com
  7. Version: 1.0
  8. .
  9. General comments/License Statement if any.
  10. .
  11. */

The code above is all contained in a comment, so it won’t affect the style definitions. Now I filled it out with a few details, these will be used by WordPress to display the details of the theme to admins. Make sure you add it to the top of the file with no white-spaces before it.

I’ve gone and renamed the style sheet file from the template, it was called 1.css. I have also made a new folder called typography-paramount which will be what I upload to the WordPress theme folder. Put the style sheet in this folder, but not under another directory otherwise it cannot be seen by WordPress.

Step 2 – The Header and Footer

In this step we’re going to create the two files header.php and footer.php. Although they are optional both are used in most themes, there not exactly hard to use either.

header.php

Starting with the header, create a new file in the theme folder called header.php, then open up index.html from the template and copy the following from it. This will become the header and will be displayed on every page of the site, bear that in mind when making other templates.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&#8221;>
  2. <html xmlns=http://www.w3.org/1999/xhtml&#8221; xml:lang=“en”>
  3. <head>
  4. <title>-</title>
  5. <meta http-equiv=“content-type” content=“text/html; charset=utf-8″ />
  6. <link rel=“stylesheet” href=“css/1.css” type=“text/css” media=“screen,projection” />
  7. </head>
  8. <body>
  9. <div id=“wrapper”>
  10. <div id=“header”>
  11. <p class=“description”>
  12. An imageless template focusing on Typography.
  13. </p>
  14. <h1><a href=“#”>Typography Paramount</a></h1>
  15. <ul id=“nav”>
  16. <li><a href=“#”>Link Here</a></li>
  17. <li><a href=“#” class=“active”>Link Here</a></li>
  18. <li><a href=“#”>Link Here</a></li>
  19. <li><a href=“#”>Link Here</a></li>
  20. <li><a href=“#”>Link Here</a></li>
  21. </ul>
  22. </div>

We’re now going to add the WordPress template tags to header.php, these tell WordPress where to inject the various content into the theme. Also remember to change that link to the stylesheet.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&#8221;>
  2. <html xmlns=http://www.w3.org/1999/xhtml&#8221; <?php language_attributes() ?>>
  3. <head profile=http://gmpg.org/xfn/11&#8243;>
  4. <title><?php bloginfo(‘name’); ?> <?php wp_title(); ?></title>
  5. <meta http-equiv=“Content-Type” content=“<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
  6. <link rel=“stylesheet” href=“<?php bloginfo(‘stylesheet_url’); ?>” type=“text/css” media=“screen,projection” />
  7. <?php wp_head(); ?>
  8. </head>
  9. <body>
  10. <div id=“wrapper”>
  11. <div id=“header”>
  12. <p class=“description”><?php bloginfo(‘description’); ?></p>
  13. <h1><a href=“<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
  14. <ul id=“nav”>
  15. <?php wp_list_pages(‘sort_column=menu_order&title_li=’); ?>
  16. </ul>
  17. </div>

There’s quite a lot that’s been added but it’s all fairly simple when you look through it. All the tags above are well documented in the WordPress Codex. I’m just going to go through what each of the functions do.

language_attributes() – Prints the language type for the <html> tag.
bloginfo() – Used to print information about the site, the parameters are available on the Codex, ‘name’ returns the title of the blog.
wp_title() – Simply returns the title of the page.
wp_head() – Prints the javascript links and other header stuff.
get_option() – Retrieves a value from the options database.
wp_list_pages() – Lists links to the site’s pages, the parameters sort the pages correctly and also stop WordPress from printing a default title.

footer.php

Create the file footer.php and copy everything in the template from <div id="footer"> down-wards and shove it in the new file. A dynamic footer that displays the correct year, site title and a feed link is common place in themes, so lets add one.

  1. <div id=“footer”>
  2. <!– Please leave this line intact –>
  3. <p>Template design by <a href=http://www.sixshootermedia.com&#8221;>Six Shooter Media</a><br />
  4. <!– you can delete below here –>
  5. © <?php the_time(‘Y’); ?> <?php bloginfo(‘name’); ?><br />
  6. <a href=“<?php bloginfo(‘rss2_url’); ?>”>Grab the feed</a></p>
  7. </div>
  8. </div>
  9. < ?php wp_footer(); ?>
  10. </body>
  11. </html>

I’ve gone and changed the footer to display the copyright icon, followed by the current year (<?php the_time('Y'); ?>) and the site’s name (<?php bloginfo('name'); ?>) then on a new line put a link to the rss feed (<?php bloginfo('rss2_url'); ?>).

wp_footer() is what WordPress uses to add things to the bottom of the site, more often that not used by plugins to add things like site tracking code.

Step 3 – The Core File

We’re now going to create index.php

index.php

This is one of the two required files for a WordPress theme (the other being style.css), so lets get started. Create the file and put it along with the rest, then add to it the following.

  1. <?php get_header(); ?>
  2. <?php get_footer(); ?>

This simple tells WordPress where to include the header.php and footer.php files. Because this is a two part series we’re going to include the creation of the sidebar in the next article. You can either chose to leave it’s div in as static html or just leave it out which is what I will do. Add the following between the previous two tags.

  1. <div id=“content”>
  2. <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  3. <h2><a href=“<?php the_permalink() ?>”><?php the_title(); ?></a></h2>
  4. <?php the_content(); ?>
  5. <p><?php the_time(‘F j, Y’); ?> at <?php the_time(‘g:i a’); ?> | <?php the_category(‘, ‘); ?> | <?php comments_number(‘No comment’, ’1 comment’, ‘% comments’); ?></p>
  6. <?php endwhile; else: ?>
  7. <h2>Woops…</h2>
  8. <p>Sorry, no posts we’re found.</p>
  9. <?php endif; ?>
  10. <p align=“center”><?php posts_nav_link(); ?></p>
  11. </div>

This is what WordPress call the WordPress Loop. The first line of PHP starts this loop, endwhile is the end of it. WordPress fills out the loop for each article on the site, and if there isn’t any it displays that “Woops…” content. I’ve also added a navigation link that will place link’s to more articles, so visitors can take a look at older content without using the archive.

In the next article we will write up single.php, this would be what is displayed if a visitor clicks on the title of a post. It will include the commenting system, unlike index.php.

Review – Does it Work?

So we now have four files in out theme, assuming that you didn’t forget to update you index.php file (doh!) it should work as a simple but functional theme.

Test it out in that new theme previewer that been put in the latest WordPress, after looking around there only seems to be an issue with long titles, easily fixed by adding the following to #content h2 in the style sheet.

Continue to Part 2.

sumber dari : http://nettuts.com/tutorials/wordpress/how-to-create-a-wordpress-theme-from-scratch/

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

  • “Making It Right”: A New Smashing Book on Product Management For A Startup World
      You've seen this happen a thousand times. An organization struggles with a high level of internal enthusiasm and creative chaos that team leaders don't know how to handle any more. To bring order into projects, a new product manager is appointed, under huge expectation, and with unclear responsibilities and big goals defined within a very short t […]
  • You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy
      You resize the browser and a smile creeps over your face. You’re happy: You think you are now mobile-friendly, that you have achieved your goals for the website. Let me be a bit forward before getting into the discussion: You are losing users and probably money if responsive web design is your entire goal and your only solution for mobile. The good news is […]
  • How Do You Design Interaction?
      If you have to design an interface it's almost obvious to think to begin the process by drawing. But is this the best way? I once casually started by writing an imagined human-computer conversation, and only afterwards I continued by drawing. This changed my way of thinking and I never went back to drawing first. This article will explain the reasons […]
  • The Mystery Is Resolved: Chirpy Birds, Lost Numbers and Pretty Slow Wheels
      Experiments and side projects are wonderful ways to challenge yourself and explore areas that you wouldn't usually consider exploring. That's what Smashing Mystery Riddles are for us: little experiments that challenge us to come up with something new, original and a bit crazy—every single time. The ideas are usually a synthesis of the things we d […]
  • Useful Adobe Fireworks Resources: Extensions (Part 1)
      Fireworks is an excellent UI design tool; however, Adobe decided to feature-freeze it back in 2013 and (at the same time) did not offer any replacement tool to its users. Nevertheless, since Fireworks runs fine today on the latest Mac OS X and Windows OS, and since it still offers a solid UI-design feature set, many designers continue to use it and rely on […]

RSS DailyDesignerNews

  • 10 awesome free symbol fonts
    If you are looking for a free font set of symbols then designer Hermann Zapf has a collection of them to offer. For many years Zapf has been providing us with lot of symbols which is really fun to use and adds versatility to our typography. Here are the 10 awesome free symbol fonts that […] The post 10 awesome free symbol fonts appeared first on Design daily […]
  • Design deals for the week
    Every week, we’ll give you an overview of the best deals for designers, make sure you don’t miss any by subscribing to our deals feed. The Ultimate Design Library This brand-new bundle contains thousands of different resources from design heavyweights such as Designious, DesignTNT & Vectorious. $59 instead of $5060 – Get it now! Litho […] The post Design […]
  • 15 cool and creative sofa designs
    While decorating our living room, sofas are one of those objects that complete our room. Varieties of sofas are available but choosing the right design is the main concern. The sofa you choose should be within the theme of your living room and sofas could actually be a modern art masterpiece. If you do not […] The post 15 cool and creative sofa designs appea […]
  • 15 web design blogs designers should read
    As web designers, keeping up to date with the latest technologies and techniques is merely a human task. To get as close as possible to knowing all you must without getting burnt out, following web design blogs is a good way. The blogs selected in this post are the ones you must know about. 1. […] The post 15 web design blogs designers should read appeared f […]
  • Scribble: an innovative pen with (almost) no limit
    Scribble pen is an innovative pen with almost no limit in the color. It is the first coloring device that lets you draw in 16 million different colors. With scribble, you can take the world of color around you and transfer it directly to either paper or your favorite mobile device. Designers of the scribble […] The post Scribble: an innovative pen with (almo […]

RSS lifehacker

  • The Big Red Desktop
    Sometimes simple is the best way to go, and while a lot of our desktops have pretty wallpapers and well placed skins, this one takes a simple motif and runs with it. It only displays the most basic information, and that's all DeviantArt user sharmander3 needs. here's how he set it up.Read more...
  • iOS: Google updated the Gmail app today with improved integration with Google Drive, making download
    iOS: Google updated the Gmail app today with improved integration with Google Drive, making downloading and attaching documents from Drive simpler, as well as new account management options, like changing your profile picture in the app's settings. Grab the update here: Gmail | iOS App Store via iPhone HacksRead more...
  • Keep Your Room Cool at Night by Facing Your Fan Out, Not In
    Running that AC can cost you a pretty penny, but you still need to cool down at night so you can sleep comfortably. Real Simple notes that a fan blowing air out of your room is better than one blowing in.Read more...
  • The Many Benefits of Taking Cold Showers
    It may sound like the last thing you want to do, but The Art of Manliness explains why you should grab your shower cap, bite your lip, and jump into an ice-cold shower.Read more...
  • This Infographic Lists Cellphone Etiquette for 11 Countries
    If you're traveling or making an international call, it's good to know cultural differences so you can be polite. This infographic from RepairLabs explains the common tendencies different cultures have using cell phones.Read more...

RSS vector tutsplus

  • 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 […]
  • How to Create a Promotional Flyer in Photoshop
    What You'll Be CreatingPhotoshop is great tool for graphics design, especially digital graphics that only are displayed on screens, in addition to its namesake tasks of tweaking photographs. But that's not all it's good for. With proper knowledge and thinking, one can use Photoshop to create stunning print designs as well.This tutorial will ta […]
  • How to Draw Calligraphy Flourishes
    What You'll Be CreatingMastering calligraphic letters is one thing, but how do you make those fancy flourishes that appear so often on wedding invitations?In this tutorial, I'm going to show you some easy ways to make both asymmetrical and symmetrical flourishes so that you can elevate any invitation you write this year. I'll be continuing the […]
  • Create a Dandelion in Adobe Illustrator Using Two Custom Brushes
    What You'll Be CreatingIn this screencast, you'll learn how to create two different types of custom brushes, and use those to quickly draw a dandelion silhouette.
  • What’s New in Adobe Muse CC 2014
    In this video we're going to take a look at the newest features in the 2014 release of Adobe Muse CC. These include, amongst others:The 64bit native application UI, with its dark and light variantsDocking and arranging of panels and windowsNew interactive widgetsThe CC Add-ons marketplace Artwork by Črtomir Just
  • To The Point: An Interview With Shane Smith
    What You'll Be CreatingThrough our series of interviews, we get the the chance to chat with artists from a wide range of disciplines and industries. This time, I had the pleasure of firing questions at illustrator Shane Smith. He graciously fired answers back, detailing his years working for greeting card companies, with licensed character, what it take […]
  • How to Draw Animals: Snakes and Their Patterns
    What You'll Be CreatingSnakes are one of the most-drawn animals, if not the most drawn animal. They're considered to be very simple, with no legs or special muscles that need to be defined. There's only a head (without ears!) and a long tail—what can go wrong?So, welcome to the perfect start into the world of animal drawing: a guide to drawing […]
  • How to Optimize Inkscape with Zoom and View
    If you've worked with advanced drawing in Inkscape before, you may have noticed that Inkscape starts to seriously slow down. In this quick tip, we'll go over a few ways to get your document back up to speed.1. Adjust Some PreferencesStep 1Good old File > Inkscape Preferences has some options to free up some processing. Select the Filters menu to […]
  • Create the Enchanting Maleficent Portrait in Adobe Illustrator
    What You'll Be CreatingIn this tutorial we will discover how to draw a bewitching stylized portrait of Maleficent in Adobe Illustrator. We’ll be using various effects, such as Blur effect for soft shadows and overtones. Let the magic begin!1. Trace the Sketch in Outline ModeStep 1Start by creating a New Document of 600x800 px size. File > Place your […]
  • How to Use Focus Area Selection in Adobe Photoshop
    What You'll Be CreatingIn June of 2014, Adobe released it's largest update to Photoshop since migrating to the Creative Cloud subscription model. Amidst the host of new features and updates is a very interesting new selection feature; the Focus Area Selection. The intent of this feature is to allow automated selections of elements within an image 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…

  • Four Ways to Make Windows XP Systems More Secure
    Microsoft may have stopped providing security updates for Windows XP but a large number of PC users are sticking with the venerable old workhorse. Because safety is very dependent on individual habits and skills, I won’t comment on the controversial issue of whether continuing to use XP is safe. However, a lot of Gizmo’s readers are still using Windows XP so […]
  • Empower Your Songs With Lyrics
    “La La La…” What’s that song? To answer it, or whenever you like to enjoy music with lyrics, give this online service MusiXmatch a good spin. It is one of the best solutions as it has a huge catalog of over 7 million songs in multiple languages for you to search, either by entering a song title, artist's name or a few song words. Getting even more handy […]
  • Livedrive Users, You Need To Read This
    If you, or someone you know, has signed up with the Livedrive cloud storage network then there's something you need to know. Livedrive has started closing people's accounts without warning. Not everyone's account, of course. Just a few. And when those people contact the company to ask why, they're told that they were breaching the terms o […]
  • Easy Way to Customize the System Folder “Computer” in Windows 7 and 8
    The system folder that was once called My Computer became simply Computer in Windows 7/8 and has now morphed into This PC in Windows 8.1. Whatever you call it, it is convenient to be able to modify its contents to suit your own way of doing things. Computer and This PC are not regular folders so you can’t just add or delete a shortcut or file there the usual […]
  • Budding Muso? Get The Chords To Any Song On Youtube
    Here's one of the neatest ideas I've seen for ages, courtesy of a new web site. Search for the name of a song or band, and the site will bring up the relevant video from Youtube. It'll also automatically analyse the track, work out which chords are being played, and show you them in guitar, ukulele or piano notation. So you can play along. Bri […]

Blog Stats

  • 120,906 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: