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

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

RSS DailyDesignerNews

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

RSS lifehacker

  • Does Bitrate Really Make a Difference In My Music?
    Dear Lifehacker, I hear a lot of arguing about "lossless" and "lossy" music these days, but I'm having a hard time getting straight answers. Does bitrate really matter? Can most people tell the difference between high and low bitrate music files?Read more...
  • Smigin Lets You Build and Learn Useful Phrases In Different Languages
    iOS: If you're traveling internationally—or want to make simple conversation with a non-English speaker—the Smigin app on iOS lets you build phrases quickly, gives you native pronunciation, and lets you save important phrases as favorites to use later on.Read more...
  • This Video Explains Four Psychological Terms You May Be Misusing
    We sometimes get in the habit of using psychological terms to describe different people, but there's a good chance you're using these words incorrectly. This video explains what the terms psycho, OCD, schizo, and bipolar really mean, and why you may not want to use them to describe someone.Read more...
  • See How Much Candy You or Your Kids Should Eat with This Calculator
    With the amount of candy around right now you may want to know how much sugar you or your kid can have without going overboard. This simple calculator determines a reasonable amount of candy to consume based on age, sex, and activity level.Read more...
  • Craft a Better Presentation with Zombie Apocalypse Principles
    We've all daydreamed about how we'd react if the undead began rise from their graves and the zombie apocalypse commenced. It would take quick thinking, careful planning, and grace under pressure. Oddly enough, these are the same principles it takes to craft an effective presentation.Read more...

RSS vector tutsplus

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

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Bergabunglah dengan 25 pengikut lainnya.

Erwin berkata….

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

erwin @twitter

Friendfeed

View my FriendFeed
buattoko.com - memiliki toko online itu mudah

Forum Mac User

Komunitas Pengguna Apple Macintosh Indonesia
Free open source Mac software

RSS Udaramaya…

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

RSS New-Freeware

RSS Top ten Freeware…

RSS Techrepublic…

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

RSS Gizmo…

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

Blog Stats

  • 122,662 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d blogger menyukai ini: