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

  • Sebuah galat telah terjadi; umpan tersebut kemungkinan sedang anjlok. Coba lagi nanti.

RSS DailyDesignerNews

  • GraphicStock – 7 days of complimentary download
        7 DAYS OF FREE DOWNLOADS   Over 250,000 Stock Images: Backgrounds, Textures, Icons, Patterns and much more… To create awareness for GraphicStock, they are giving away 7 days of complimentary access to download anything you want from over 250,000 images, icons, vectors, textures, backgrounds and more.   START DOWNLOADING NOW ►     […] The post GraphicStoc […]
  • Featured designer: Lucas Machado
    Lucas Machado is a Brasilian graphic designer based in London, UK. His best projects are by far the typographic and editorial design ones. The post Featured designer: Lucas Machado appeared first on Design daily news. Download the Designers essentials package now!
  • 10 awesome Pinterest style WordPress themes
    As usual with new designs, the popularity of Pinterest also contributed to popularize Pinterest style layouts. WordPress theme creators quickly identified this demand and created Pinterest style WordPress themes that took advantage of the Masonry layouts. In this post, we take a look at the best designed Pinterest style WordPress themes that will prove usefu […]
  • Freebies wednesday
    Every wednesday, we share a few freebies that’ll make your designer toolbox a bit more useful. Designers essentials This great freebie designed by Freepik for Designer Daily is still available for anyone who subscribes to Designer Daily. Photoshop font detector Photoshop Font Detector is a free Photoshop plugin which helps designers detect fonts from any […] […]
  • 17th century hip hop artists
    Amar Stewart, a London based artist, created some unconventionnal paintings where hip-hop artists are painted in a renaissance style. The results are surprisingly good, I’d love to see some vinyl covers with these. The post 17th century hip hop artists appeared first on Design daily news. Download the Designers essentials package now!

RSS lifehacker

  • The Helix Desktop
    Erelde's Windows desktop isn't full of bells and whistles, just a visually striking wallpaper and a few widgets to help him keep track of a few things. Here's how to make your computer look like this.Read more...
  • The Four Best Ways to Tuck in a Shirt for Any Situation
    Looking good doesn't stop at getting good fitting clothes . You still have to dress yourself. For those times you need to tuck your shirt in, The Art of Manliness shows off four different techniques. Read more...
  • Gawker Mrs.
    Gawker Mrs. Doubtfire Is Getting a Sequel, 20 Years Later | Jalopnik Mom Asked To Move 1993 Accord, Accidentally Steals Another 1993 Accord | Jezebel Want to Cheat On Your Spouse Without Fear of Judgement? Go to France! | Kotaku The 12 Best Games For The Xbox One | Kinja Popular Posts Read more...
  • Do Not Disturb Disables an Assortment of Annoyances Around the Web
    Chrome: Ad blockers are a popular, if controversial group of software, but they don't cover everything. Do Not Disturb ups the ante by blocking content widgets, data miners, and a bunch of other things that might annoy you.Read more...
  • How to Cultivate a Creative Thinking Habit
    Think of your most common habits and the regular culprits come to mind—biting your nails, snacking late at night, cracking your knuckles. Do something enough times and it becomes a behavioral pattern you do almost involuntarily. But is creativity any different?Read more...

RSS vector tutsplus

  • Improve Your Artwork by Learning to See Light and Shadow
    It's very common for painting tutorials to treat light as an addition to the picture, an atmosphere-maker. We can easily get the impression that the object has a universal form, and then with proper lighting we can change the mood of the picture. The truth is without light there would be nothing to paint! Until you realize that, you're shooting bli […]
  • Create a Mustard Text Effect in Adobe Illustrator
    What You'll Be Creating You will learn how to setup a simple grid and how to create your mustard bottle using a bunch of linear gradients, some meshes, simple blending techniques and several effects. Next, you will learn how to save a simple, scatter brush. Moving to the mustard text, you will learn how to use your scatter brush along with a built-in ca […]
  • Connect the Dots With Visualize Path in Inkscape
    Before you think Inkscape doesn't have something, check the Extensions menu. You'll be surprised to see that there are a bunch of these additional dialog menus - and they're pretty helpful most of the time. Let's look at Visualize Path in this Inkscape quick tip.1. What Is It?Visualize Path is an Inkscape extension that creatively alters […]
  • 10 Things You Need to Know About Smart Objects in Photoshop
    What You'll Be CreatingWith the recent introduction of Linked Smart Objects in Photoshop CC, Smart Objects have become much more powerful, and useful. In this tutorial, I will share with you 10 things that you should know about working with smart objects in Photoshop. Let's get started! Photo CreditsEmpty Frames on Gallery WallSingapore SkylineSnow […]
  • ‘Envato Live’ Pop-Up Coworking Space - Chicago, June 7 2014
    Traditionally the Envato meetups have taken place over a few hours and a few drinks. This year our CEO Collis wanted to craft a meetup that captures what Envato represents. So we’ve created Envato Live, a full day event with a focus on creativity and skill sharing. We’ve rented out rooms at a very fun and creative space called Catalyst Ranch in Chicago for J […]
  • How to Draw Animals: Wolverines, Badgers, Otters and Martens
    What You'll Be CreatingMustelidae is a family of ferocious predators... with cute dark eyes. It contain both fearless honey badgers, agile ferrets and brisk otters. This time we'll talk about bigger members of the family only, but don't worry - weasels will have their tutorial too! Keep on reading if you want to learn something about these unc […]
  • How to Create a Colorful Fashion Illustration in Adobe Illustrator - Part 3
    What You'll Be CreatingIn the following tutorial, we'll pick up from the last tutorial on creating a fashion illustration in Adobe Illustrator. If you need you familiarize yourself with the previous tutorials, check out part one and part two before you begin. 1. Create the Sunglasses Step 1 Now it’s time to draw the accessories!  And I will begin w […]
  • Create a Drum Kit Illustration in Adobe Illustrator
    What You'll Be CreatingFor starters you will learn how to setup a simple grid and how to create a set of pixel perfect shapes that will be used a simple guide. Next, you will learn how to create the first drum using basic blending and vector shape building techniques along with some basic Transform effects. Moving on you will learn how to create the dru […]
  • Technical Drawing for Beginners: Three Point Perspective
    What You'll Be CreatingThree point perspective is great when you wish to render objects or scenes from an abnormally high or low point of view. The distortions that the third vanishing point brings into your composition often has a very artistic effect and makes even the most simple concept more interesting. Some Points to Consider There are some points […]
  • Repeating Patterns Made Easy in Inkscape
    In this quick tip, we're going to go over a tool called Create Tiled Clones. It's a very useful menu with tons of options for creating large amounts of identical, yet dynamic objects, such as patterns. It can be used for so many things, but let's just dive right in!1. Create Tiled ClonesStep 1So where is this beautiful tool? Head up to Edit […]
  • Create a Fabulous Nail Polish Text Effect in Adobe Illustrator
    What You'll Be CreatingFor starters you will learn how to create the nail polish bottle cap using basic blending and vector shape building techniques along with some complex linear gradient and the Live Corners feature. Next, you will learn how to create a pink art brush, a simple background and smooth piece of text. Taking full advantage of the Appeara […]
  • Interview With Mobile Interface Designer, Alan Power
    I recently had some time to chat with Alan Power, a mobile interface designer, and Tuts+ author, that is based in Dublin, Ireland. In our conversation, we talked a bit about how he got his start in the industry, what pushed him to become a better designer, as well as what tools he could not live without. Let's take a look!Hi Alan, thanks so much for tak […]
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…

  • Sebuah galat telah terjadi; umpan tersebut kemungkinan sedang anjlok. Coba lagi nanti.

RSS Gizmo…

  • Firefox and Chrome Browser Extensions that Check for Heartbleed
    The Heartbleed bug is a very nasty Internet problem that affects us all. Dealing with it is complex and not clear-cut at this time but one thing that many Internet users want to do is check sites to see which ones might still be subject to the bug. A previous article gave some ways to check sites but a simpler method is now available with new browser extensi […]
  • Get A Top-Of-The-Range $59.95 DVD Ripper For Free If You're Quick
    Digiarty are running one of their regular software giveaways for the next 10 days. Not for the first time, the subject of the giveaway is their WinX DVD Ripper, which lets you copy your DVD movies to your phone, iPad, smartphone or PC as a simple, playable, unprotected file that doesn't require custom DVD player software. Unusually, however, the current […]
  • Compose Music Directly On Your PC. No Paper Required
    Once upon a time, writing music involved the use of music notation paper (with those familiar 5 lines), and lots of pencils and erasers. Nowadays, you can do it much more easily on a computer, using software that's really just a musical version of a word processor. Start with an empty sheet of notation paper, then drag notes onto the page at the appropr […]
  • Create Stand-alone, Portable, and Virtualized Versions of Just About any Program.
    Cameyo is a program designed to create standalone, independent and portable application containers from a software installation. Cameyo works as follows. You fire up the program, and based on your set of features, you run an installation, capturing the changes to your system, including files, folders, registry, and other items. Once this step is complete, Ca […]
  • Select Your Mood. Get The Soundtrack. Brilliant!
    Listening to music can often help with whatever you're doing. But some jobs are best suited to a specific type of music. If you're studying, for example, you want instrumental tracks that help you concentrate. If you're playing sport, you'll want something else. 8tracks is a brilliant way to listen to music. Just click on a couple of butt […]

Blog Stats

  • 118,654 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: