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

  • Prototyping For Better Products, Stronger Teams And Happier Clients
      As mobile designers, we have a stark decision to make: do we spend time learning new tools and changing our design processes to create our own transitional interfaces, or are the tools that we've been using good enough? There's an old writing adage that advises writers, whenever possible, to “show, don't tell” when bringing characters to lif […]
  • Efficiently Simplifying Navigation, Part 3: Interaction Design
      Having addressed the information architecture and the various systems of navigation in the first two articles of this series, the last step is to efficiently simplify the navigation experience — specifically, by carefully designing interaction with the navigation menu. When designing interaction with any type of navigation menu, we have to consider symbols […]
  • Why Companies Need Full-Time Product Managers (And What They Do All Day)
      What is a product manager? What do product managers do all day? Most importantly, why do companies need to hire them? Good questions. Well, the first confusion we have to clear up is what we mean by "product." In the context of software development, a product is the website, application or online service that users interact with. Depending on the […]
  • Essential Visual Feedback Tools For Web Designers
      The creative process takes a lot of time, and web designers know it. When you factor in feedback from clients, the process takes even longer: numerous emails, revision notes, chats and meetings — that's what it normally takes to find out precisely what the client wants. Fortunately, today's web provides various solutions to optimize the communica […]
  • Making Modal Windows Better For Everyone
      To you, modal windows might be a blessing of additional screen real estate, providing a way to deliver contextual information, notifications and other actions relevant to the current screen. On the other hand, modals might feel like a hack that you’ve been forced to commit in order to cram extra content on the screen. These are the extreme ends of the spec […]

RSS DailyDesignerNews

  • 14 well-designed posters from GigPosters
    For music lovers, the gig posters aren’t exactly the best kept secret among their friends. It is a tradition that started in the 60′s and is still going strong. The passion for music has been constantly progressing and several gig posters are the design works that support artists and bands. The below given posters can […] The post 14 well-designed posters fr […]
  • Spectacular furniture by Kino Guerin
    With Kino Guerin, wood looks like it’s easy to manipulate and fold. He creates furniture that goes as far as tying a knot in itself. So is this furniture sculpture or furniture design? Hard to tell… The post Spectacular furniture by Kino Guerin appeared first on Design daily news. Download the free transport icons package now!
  • 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. Eveleth: letterpress font With the Eveleth Premium Letterpress Font Family, you’ll get yourself 16 charming vintage fonts to work with. Additional weights, shadow layers and entertaining icons, shapes and emblems are […] The […]
  • 20 amazing and funny t-shirts for geeks
    Seeking for some amazing and funny t-shirts print? Here we have the collection of 20 t-shirts for geeks who have loved the epic cartoon characters. Try these funny and geeky T-shirts from the NeatoShop designed by artists around the world. 1. Bartman Bartman is a cool T-shirt designed by Dann Matthews. The t-shirt is 100% […] The post 20 amazing and funny t- […]
  • Dreamlike self portraits by Kylli Sparre
    Winner of the Sony World Photography Awards 2014, Kylli Sparre creates some poetic and dream-like self portraits that she carefuly sets up. Her graceful photos are exhibited in September at the Qlickeditions gallery in Amsterdam. The post Dreamlike self portraits by Kylli Sparre appeared first on Design daily news. Download the free transport icons package n […]

RSS lifehacker

  • The Comfort Principle: Spend Money Where You Spend Your Time
    One of Lifehacker's main tasks is to help you save money. But once you've saved money, where should you spend it in order to maximize the usefulness of your money spent—or even your happiness? To answer that, just look at what you spend your day doing, proportionally, and allocate money accordingly. I'm going to call it the comfort principle.R […]
  • Make a Water Filter Out of a Tree Branch
    In our pursuit of advanced technology, we forget that mother nature has already patented all the best ideas. With just a hose clamp, some plastic tubing, and piece of tree branch, you can create a simple water filter.Read more...
  • Overcome the Need for Instant Gratification by Delaying Your Urges
    Instant gratification is the enemy of hard work and the development of perseverance . Just giving yourself a timeout when you feel an urge for something easy—like an unhealthy snack or a shortcut that will affect your work—you can give yourself the opportunity to make the better choice.Read more...
  • Deadspin That Stupid Derek Jeter Ad Will Make You Cry For America | Gizmodo New Simulation Offers De
    Deadspin That Stupid Derek Jeter Ad Will Make You Cry For America | Gizmodo New Simulation Offers Definitive Proof the Moon Landing Was Not Fake | Jezebel The New York Times, Shonda Rhimes & How to Get Away With Being Racist | Kotaku Player's Secret Weapon In Destiny's Multiplayer Is...Sitting | Kinja Popular Posts Read more...
  • Where to Watch College Football Games If You Don't Have Cable
    The college football season has kicked off, but finding the game you want isn't always easy when you don't have cable. Here's a few places you can check out to try and catch your favorite teams.Read more...

RSS vector tutsplus

  • How to Design a Folky Gig Poster in Adobe Illustrator
    What You'll Be CreatingIn this tutorial, I'll show you how to use Adobe Illustrator and Wacom Intuos Pro tablet to design and illustrate a poster for a folk music and poetry show. I'll take you through a couple of interesting and useful techniques; including setting up swatch groups, setting up pressure sensitive brushes that take advantage of […]
  • Hand Lettering: Letterforms at Their Core
    What You'll Be CreatingThis tutorial will provide you with a very basic understanding not only of lettering, but also of overall concepts of typography, which a lot of designers these days don’t have. The process described below will teach you about consistency, kerning, contrast, and weight.Since lettering is completely analog, we won’t need any comput […]
  • To the Point: Interview With Dave Perillo, aka Montygog
    What You'll Be CreatingFor this installment of our To the Point series, I got to fire questions at Dave Perillo, aka Montygog, whose often pop-culture-themed vector pieces are inspiring and harken back to an era of design long missed. Pull up a chair and take a spin around Dave's body of work while he answers questions on inspiration, process, and […]
  • How to Create a Water Pistol Illustration in Adobe Illustrator
    What You'll Be CreatingIn the following steps you will learn how to create a detailed water pistol illustration in Adobe Illustrator. For starters you will learn how to setup a simple grid and how to create the main body shape along with the trigger and the handle using basic tools and effects and some gradients. Next, using a bunch of new shapes, the l […]
  • Booklet Essentials: Page Counts and Binding
    What You'll Be CreatingBooklets are an extremely versatile print design thanks to their size, format and ease of use. You've more than likely run across booklets when skimming through a playbill at your local theater or a retail catalog in the mail. Those are the common uses, but booklets can also be used in a variety of marketing situations such a […]
  • Trial a 14 Day Tuts+ Subscription for Free
    Sample 400+ Video CoursesWe've been building our library of courses for three years, and now have over 400 professional video courses. With a mix of screencast lessons and live video, it's a fantastic way to learn a new skill. Our courses cover:Design & IllustrationCodeWeb DesignPhotographyAnd much more...Whether you're interested in learn […]
  • Create a Retro Gold Leather Text Effect in Adobe Photoshop
    What You'll Be CreatingCreating 3D text effect does not always require using the 3D tools. This tutorial will show you a simple way of using the shape attributes in Adobe Photoshop CC, along with a couple of layer styles, to create a retro, leather-like, 3D text effect pretty easily and quickly. Let's get started! Tutorial Assets The following asse […]
  • Create a Set of Art Brushes You Can Use to Make a Linocut-style Illustration
    What You'll Be CreatingLearn how to create a completely vector illustration that has the look of a handmade linocut or woodcut, in Adobe Illustrator.To find out even more about brushes in Adobe Illustrator, check out my course Mastering Brushes in Illustrator, here on Tuts+. 1. Create the Art BrushesWhen creating a linocut print, artists use special too […]
  • How to Crosshatch a Landscape from a Photograph
    What You'll Be CreatingBreak out your pens and pencils and learn how to crosshatch a landscape. You'll start by making a value scale to learn how to use lines to create depth and then you'll ink your own landscape from a photo reference.Crosshatching was in the height of fashion in the mid-1800s during the Golden Age of Illustration. Artists a […]
  • How to Create a Pixel Game UI in Adobe Photoshop
    What You'll Be CreatingThere's a lot you can do when creating a menu or one f the numerous interfaces that exist within a video game. In the case of this tutorial, we'll take the time to play with pixel art once again to make something RPG-inspired that harkens back to 16-bit menu screens.1. Set Up Your Document and BackgroundStep 1Pixel art i […]
  • Vector Community Project: Show Us Your Wire Frames!
    Everyone loves a taste of the behind the scenes magic of creating incredible art. And in this quick Tuts+ project, we want the vector community to give us a little peek into your process by showing your own vector wire frames.What is a Vector Wire Frame?When working in Adobe Illustrator, you can always choose to view your art in the outline mode. These outli […]
  • Get Under the Hood with Vector Wire Frames: All About Outline Mode
    What You'll Be CreatingTypically, when working in Adobe Illustrator, artwork is created and edited in Preview Mode (Control-Y), where full color, gradients, effects, and more are not only in full view but are repeatedly rendered every time changes or additions are made. The alternative to Preview Mode is a handy method of viewing artwork known as Outlin […]
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 on Net Neutrality
    All the buzz these days is something near and dear to our hearts – and that’s the topic of Net Neutrality. Here at .xyz, our core mission to provide the most affordable and flexible domain extension is rooted in the same principles as Net Neutrality. Regardless of age, location, or interests, everyone should have equal […]
  • #WebsiteWednesday: International Edition
    Happy Wednesday, #GenXYZ! We’re back to showcasing some of the amazing .xyz websites in the wild, and we’re delivering a special installment this week. We’re kicking off the fall with #WebsiteWednesday: International Edition. One of the greatest things about the internet is how it connects people without hopping on a plane. Our first stop? Japan. […]
  • 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 […]

RSS Gizmo…

  • How to Bring Back the Windows Experience Index to Windows 8.1
    In Vista, Microsoft introduced a tool called the Windows Experience Index (WEI). This tool provided a way to assess the capabilities of the hardware on a system. The tool is also present in Windows 7 and 8 but you won’t find it in Windows 8.1. However, you can restore it with a free little utility called the Winaero WEI Tool. http://www.techsupportalert.com/ […]
  • A New Release Of My Favourite FTP-Enabled Editor
    Hot Find Editor Robert Schifreen writes "PSPad has long since been one of my favourite text and code editing programs. It's a very good text editor, with features such as line numbering, multi-language support, a spelling checker, file comparison, and more. It's also code syntax aware, so if you use it to edit programs such as HTML files or PH […]
  • The Best Free Screenshot Tool I Have Used
    Senior Editor George.J says "There are numerous software products to simply capture a screenshot. But how about a program that lets you screenshot, edit, upload and share instantaneously in a highly configurable environment? ShareX is an open-source advanced screen capture tool, with a very extensive feature list that does this." http://www.techsup […]
  • Do we Really Need Windows Registry Cleaners? An Important Question Finally Answered.
    Have you ever wondered whether registry cleaners do anything useful? Some people say yes others the opposite. Senior Editor Remah got sick of the endless speculation and conducted a massive series of quantitative tests to find the real answer and what he found will surprise many. http://www.techsupportalert.com/content/do-we-really-need-windows-registry-clea […]
  • Get Automatic Notification If A Website Changes Its Privacy Policy
    Every major website has a privacy policy which sets out what they do, and don't do, with the data you provide. And with information about your visits to the site. As technology, and the needs of the business, progress, privacy policies get updated. So information that was previously private may not be so private any longer. Trouble is, not all websites […]

Blog Stats

  • 121,830 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: