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

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

RSS DailyDesignerNews

  • Maskull Lasserre: a sculptor who re-carves discarded sculptures
    Maskull Lasserre has an unusual approach to his art. His starting point is… discarded sculptures. He re-carves in it to show you what’s inside, or what he sees inside. The post Maskull Lasserre: a sculptor who re-carves discarded sculptures appeared first on Design daily news. Download the free transport icons package now!
  • 3D printed polymers for Noa Raviv’s fashion collection
    A spectacular fashion collection created by Israeli student Noa Raviv. She used 3D printing with polymers to bring this unusual collection to life. The results are impressive, with a strong digital look-and-feel. The post 3D printed polymers for Noa Raviv’s fashion collection appeared first on Design daily news. Download the free transport icons package now! […]
  • 10 crucial points to check before you launch a website
    There are many points to check before you launch a website, which makes it very easy to forget something. 1. Review content and contact information This is not web design work per se, but if you are a web designer who works directly with the client for content, it becomes your responsibility to check that […] The post 10 crucial points to check before you la […]
  • Challenge others to a saving duel with the DUEL piggy bank
    This piggy bank is perfect for people who have a hard time saving, but are highly competitive. Obviously this is not for big savings, these usually happen at the bank, but it can make saving a little money much more fun. The post Challenge others to a saving duel with the DUEL piggy bank appeared first on Design daily news. Download the free transport icons […]
  • How to keep the full file name when saving for web in Photoshop
    When using the “Save for Web” function in Photoshop, a little thing has been annoying many designers for a long time, Photoshop will truncate your file name. This makes it more difficult to save series of images that are numbered at the end of the file name. However, it is very easy to modify the […] The post How to keep the full file name when saving for we […]

RSS lifehacker

  • The Minimal Venetian Desktop
    Reader Jody's desktop gets kind of messy as the workday goes on, but it's always a clean slate at the beginning of the day. This is a view of Jody's desktop at the top of the day—clean, open, and inspiring, but it's hiding serious power. Here's how it's all set up.Read more...
  • Develop Discipline by Seeing the Good in Any Task
    Discipline is something we all wish we had a little more of. Sometimes you just have to do something you really don't want to do, but it can be a great opportunity build discipline by finding the silver lining.Read more...
  • Insert Citations in Multiple Formats Easily with Google Docs
    Google Docs is a great free writing tool with a ton of great hidden features , including the research tool. You can save yourself some time and use the research sidebar to automatically insert the appropriate citations you need for your paper.Read more...
  • Cover Trampoline Springs with Pool Noodles
    Trampolines can be dangerous, especially those ugly, evil springs along the outside. You can help alleviate the danger by covering those springs with a few cuts made in basic pool noodles.Read more...
  • Four Ways to Organize Your Money Based on Your Personality
    Not all the money advice you read necessarily applies to your personality—different types of people need to utilize different strategies. Whether you're too much of a perfectionist, a procrastinator, or a stockpiler of needless paperwork, here are four strategies to deal with your money persona.Read more...

RSS vector tutsplus

  • Human Anatomy Fundamentals: Drawing Different Ages
    What You'll Be CreatingThroughout these lessons I have touched upon how age changes things in the body and particularly in the face. Here we will look at the full progression of the body and face from birth to very old age.A Few Preliminary WordsLet's get this clear: Everyone ages differently. The diagrams below are not meant to be invariably true […]
  • Create Pixel Art with a Limited Palette in 10 Steps with Photoshop
    What You'll Be CreatingIn this tutorial, I'll show you how to create some 8-bit inspired icons with a limited palette, in Adobe Photoshop. However, you could easily create them in MS Paint!1. Icon Line ArtStep 1We'll be working in Adobe Photoshop CC 2014 (though most versions or even MS Paint will work wonderfully too). Create a New Document. […]
  • Create a Travel Bag Illustration in Adobe Illustrator
    What You'll Be CreatingFor starters you will learn how to setup a simple grid and how to create the main shapes using basic tools and effects along with some basic vector shape building techniques. Moving on you will learn how to add subtle shading and highlights using the Appearance panel, basic blending techniques and a simple blur effect. Finally, yo […]
  • The "Lazy" Way to Paint With Pixels in Adobe Photoshop
    What You'll Be CreatingFor I long time avoided pixel art, because it looked so stiff to me. After all, we need to consciously limit ourselves to an old style coming from times when we were, in fact, limited. But now we have so many advanced tools, we can create photo realistic pictures, so restricting our capabilities is like cutting the wings off the c […]
  • Back to School Special: 30 Simple Adobe InDesign Tutorials
    What You'll Be CreatingWith autumn approaching it’s time to get back to school! Here’s your New Term reading list for Adobe InDesign - a list of easy beginners’ tutorials and articles exploring everything you ever wanted to know about InDesign. So class, here's your homework...Get Familiar with Basic Tools and TechniquesExploring what tools are on […]
  • Create a Tasty Pretzel Text Effect in Adobe Illustrator
    What You'll Be CreatingFollow this tutorial and learn how to create a fun pretzel inspired text effect in Adobe Illustrator. We will begin with the text then we’ll add some dimension to it with the help of the Bas Relief effect, a simple trick which allows you to add highlights and shading in one step. After this, we will add some details like a few cra […]
  • Introducing Avocode — PSD to Code Without Photoshop
    Photoshop has been a part of web design for years, and it’s very likely to continue as such for a long time. If you design for the web using Photoshop, or you’re a developer who handles coding up PSDs, it’s likely there are a few issues you run into on a regular basis. Even if you've transitioned from Photoshop over to Sketch for the design stage of you […]
  • Cartoon Fundamentals: How to Draw Children
    As a cartoonist and a recent father (of one lovely six month old princess), drawing babies and children takes on a new meaning to me.The difference between the drawing of an adult and a drawing of a baby, a child or a teenager is directly related to their anatomical proportions. But in cartoon style, it isn't only that which defines your character. Ther […]
  • How to Render Short, Detailed Hair in Adobe Illustrator
    What You'll Be CreatingYou'd think that long hair was the hardest hair to render... well that and curly hair, however I have news for you. From my experience from vectoring hundreds of vector portraits, short hair has always been more time consuming and required more precision. The reason being is that long hair benefits from the weight of gravity […]
  • Design a Crazy Retro Poster with Quirky Lettering in Adobe Illustrator
    What You'll Be CreatingIn this tutorial we will create a crazy poster, illustrating a famous quote by Oscar Wilde – “Be yourself; everyone else is already taken”. We’ll apply various Warp Effects to create the elements easily. Learn to make a gentle grain effect to give our poster a vintage look and do some freehand lettering. Let’s get started!1. Creat […]
  • How to Write in the Sand in Adobe Photoshop
    What You'll Be CreatingAdobe Photoshop's Layer Styles are one of the quickest, yet most effective ways of achieving many different effects. This tutorial will show you how to combine the power of Layer Styles along with a couple of textures, brushes, and selection options to create a realistic-looking sand writing text effect. Tutorial Assets The f […]
  • Don't Take It Personally: How to Make Critique Work for You
    As an artist, you're under constant critique. It doesn't always feel good, actually, it's mostly hurtful and gives away all the pleasure of creation. The pressure to meet the standards and not to be critiqued negatively is so strong that it may easily stop one from drawing. But... where does this pressure come from? Does every drawing have a v […]
Klik untuk mengenal lebih jauh Erwin

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

Bergabunglah dengan 25 pengikut lainnya.

Erwin berkata….

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

erwin @twitter

Friendfeed

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

Forum Mac User

Komunitas Pengguna Apple Macintosh Indonesia
Free open source Mac software

RSS Udaramaya…

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

RSS New-Freeware

  • Kanon 3.0.1
    A tool for determining the critical dimension of renormalizable field theories. 2014-09-02
  • HostsMan 4.5.102
    A freeware application that lets you manage your Hosts file with ease. 2014-09-02
  • Shotcut 14.09.02
    A free, open source, video editor and converter. 2014-09-02
  • Hddb 3.0.4
    Extremely fast file search tool inspired by the popular Everything search utility. 2014-09-02
  • Firemin 2.0.8.2086
    Free program to eliminate memory leaks in Firefox. 2014-09-02

RSS Top ten Freeware…

RSS Techrepublic…

  • The spiffiest infographic of all
    Hey there, #GenXYZ. We can’t believe August is almost wrapping up and Fall is right around the corner. What was the highlight of your summer? Ours was hands down launching .xyz in June, and watching it continue to expand as the world’s largest and fastest growing new domain extension. And that’s all thanks to your […]
  • More .xyz domains sold than .org and .net @Hover
    Great news, #GenXYZ! While we’ve been highlighting awesome .xyz websites the past few weeks, we also wanted to break the news of a huge milestone that we hit with one of our innovative registrar partners, Hover. Hover is part of the Tucows family and is famous for their no-fuss and top-notch customer support. It started […]
  • #WebsiteWednesday
    How many times do you have to repeat something before you can say you’re on a roll? With so many creative sites ending in .xyz, we’re back with another episode of .xyz Websites in the Wild. On another Wednesday. Do I sense a theme here? We’re definitely on a roll. The entire XYZ Team was […]
  • .xyz Websites in the Wild
    Our last post was about .xyz going global and being available through all corners of the world. But are any of you wondering who are all these .xyz users and what are they doing with their spiffy new domain names?! Day to day, we’re blown away by the number of innovative .xyz websites that are […]
  • .xyz is Global
    مرحبا,  Γεια σας, שלום, ສະບາຍດີ,  Алло,  สวัสดี,  こんにちは,  안녕하세요 and hello, #GenXYZ! We’re a little over a month old and we’ve truly gone global – twice over. First, we’re excited to announce that we fully support IDNs! What does that even mean? IDN is short for “International Domain Names”. You can now get your perfect […] […]

RSS Gizmo…

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

Blog Stats

  • 121,544 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: