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

  • “There Are More Bugs In Mobile Than… Particles In The Universe!”
      Mobile is a difficult, unpredictable beast. If you run into technical problems in mobile, then you’ll know how annoying fixing them can be. That’s why we’ve teamed up with Peter-Paul Koch to create The Mobile Web Handbook, our practical new guide to dealing with front-end challenges in mobile. The book is finally ready and is now shipping worldwide. It’s a […]
  • Desktop Wallpaper Calendars: October 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 […]
  • Size Matters: Balancing Line Length And Font Size In Responsive Web Design
      As we refine our methods of responsive web design, we’ve increasingly focused on measure (another word for “line length”) and its relationship to how people read. 
The popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and reduce font size for small screens.” While a good measure does improve the reading e […]
  • Sci-Fi, Frustrations, Flash And Forms: The Typeform Story
      Take any new interface design or display technology, and chances are that someone somewhere has already compared it to Minority Report. The 2002 dystopian film, with its see-through screens and gesture-driven interfaces, is remembered more for its futuristic tech than for the insidiousness of the technology — pre-crime prediction — that was its actual focu […]
  • The Ultimate Guide To Choosing A WordPress Host
      These days you have an awful lot of options for hosting your website, so many that it’s easy to get lost. How much should you pay? Is support important to you, or are you a tinkerer who likes to do your own thing? Put in different terms, are you a master chef who can cook a delicious meal with the right assortment of ingredients, or would you rather go to […]

RSS DailyDesignerNews

  • 20 free swirl Photoshop brushes
    It’s always fun to create awesome designs with free Photoshop stuffs. Here in this blog, we are introducing you 20 free swirl Photoshop brushes that will help you to create your next swirling, and curling designs with a string decorative flair that adds artsy touch to your work. Check it out below: 1. Party Swirl […] The post 20 free swirl Photoshop brushes […]
  • The Globalization book is available on pre-order
    I didn’t write about our digital printmaking contest for a while now. The jurors met and chose 3 winners, which will be revealed later on. For now, we are working on laying out the catalogue with the artworks, and it’s almost done. If you are interested in getting an artistic overview on the topic by […] The post The Globalization book is available on pre-or […]
  • Multi-layered wood laser cut sculptures
    Using several layers of laser-cut wood drawings, Britain-based artist Martin Tomsky creates spectacular pieces of art. Forest landscapes meet ghosts and fantastic creatures in a beautiful world. The post Multi-layered wood laser cut sculptures appeared first on Design daily news. Download the free transport icons package now!
  • A collection of creepy cupcakes for Halloween
    Halloween is around the corner, so why not find some inspiration for some scary cupcakes? The post A collection of creepy cupcakes for Halloween appeared first on Design daily news. Download the free transport icons package now!
  • The 20 most creative business cards ideas
    Business cards are essential for every professional life. It gives your potential clients a very good impression. Your business card speaks for your brand and hence creativity counts in order to present your brand idea in more attractive form. Many business cards are simply ignored as they do not have anything unique and creative. That’s […] The post The 20 […]

RSS lifehacker

RSS vector tutsplus

  • To the Point: Interview With Anna Dittmann
    What You'll Be CreatingAnna Dittmann's paintings are a sight to behold: ethereal portraits inspired by nature that look like they're watercolor or ink, but are in fact digital masterpieces. Anna's no stranger to Tuts+, having created a tutorial for the site this past June. I was absolutely delighted this month to tear her away from workin […]
  • Create Dimension With Gradients in This Abstract Poster Design
    What You'll Be CreatingLet's play with Linear Gradients in this abstract poster design. Fire up Adobe Illustrator (I'll be using Illustrator CC 2014) and get ready to doodle out some rainbows, curving arrows, and paisley-like splash designs.1. Set Up Your DocumentStep 1Create a New Document. It's your call on the size. I ultimately wound […]
  • Fractal Art: An Introduction to Apophysis
    What You'll Be CreatingWith this tutorial you will find an introduction to the flame fractal program, Apophysis, and along the way you will learn how to create your first fractal. Apophysis can make a plethora of wonderful images, and your imagination is truly the only limit.What Are Fractals?Before we actually make a fractal, it would be good to unders […]
  • Is Digital Art "Real" Art? Facts and Myths About Digital Creating
    When you look at beautiful digital art and compare it with the things you draw with a pencil, you can feel astonished and belittled. If only you could afford a graphics tablet, you could be just as good! And if you already have a tablet, your thought is, "If only I could afford Photoshop! So many amazing things can be done with this software." And […]
  • To the Point: Interview With Sabrina Smelko
    What You'll Be CreatingThis month I had the pleasure of interviewing Sabrina Smelko, whose work varies from illustration to graphic design to art direction to blog writing. She's worked with Mozilla, AARP, and a host of other companies. It seems her client list never ends, and as such her insight into the working life of an in-demand designer is en […]
  • Plugins, Resources and Freebies to Spice up Sketch
    At Tuts+ we always want to provide useful material to our readers. We listen and we give. And we know that Sketch is a hot topic right now. Recently we published 9 Sketch Features You Should Be Using and Sketch for Beginners: Design a Login Form Interface. But we want to offer even more, so this roundup will introduce you to some of the most useful resources […]
  • How to Create an Exploding Planet in Adobe Photoshop
    What You'll Be CreatingIn this tutorial you'll how to create a cracked and exploding planet. All super villains wish for a weapon capable of destroying a planet. We have one too: we call it Photoshop! We will start with perfectly good planet and smash it like a egg! Or at least an egg that is floating in space and has an explosion of energy within […]
  • Create a Baseball-Inspired Text Effect in Adobe Illustrator
    What You'll Be CreatingFor all of you sports fans out there, this tutorial will teach you how to create a baseball-inspired text effect. You'll start by preparing the text, then with the help of the Bas Relief effect and the Inner Glow effect you'll easily add some dimension to it. Next, you'll create a vector texture and a Pattern Brush […]
  • Create Your Own Grunge Brushes in Adobe Photoshop
    What You'll Be CreatingIt's a fairly easy feat to create custom sets of grunge brushes in Adobe Photoshop once you have a couple of techniques down. The main ideas are to have a textured source and to play around with filters that manipulate the look of sketched-out lines and doodles. Join me below in creating a custom set of brushes, ready for pai […]
  • Create a Super Simple Infographic Template in Adobe InDesign
    What You'll Be CreatingYou must have had your head buried in the sand if you haven't noticed the infographic invasion across the design world! Infographics are enjoying a surge in popularity, and it’s easy to see why—they’re a colourful, engaging, and dynamic way of presenting large amounts of information, and they lend visual punch to otherwise du […]
  • How to Create Buttons in Photoshop and Adobe Muse
    In this tutorial I'll show you how to create a button in Photoshop and use it, with all its various states, in an Adobe Muse project. Once we've designed and imported our Photoshop assets into Adobe Muse, we'll look at what happens if we want to update the PSD further down the line.Watch Screencast Download the video or subscribe to Tuts+ Web […]
  • Live Perspective: A New Approach to Depth in Drawing
    What You'll Be CreatingPerspective. The word freezes the blood in the veins of every aspiring artist (and even many of those who seem to be pretty good at what they do). This “method of drawing 3D forms in 2D space” is full of confusing mathematical rules that seem to have nothing to do with carefree, passionate drawing. Even if you manage to grasp thes […]
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…

  • One billion websites
    Ahoy there, #GenXYZ! (There seems to be some residual Talk Like a Pirate Day left in us.) 2014 continues to be a landmark year for the internet, with yet another HUGE milestone that we are proud to say we are part of. Earlier this week, the internet hit the one billion website mark. One BILLION. […]
  • .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 […]

RSS Gizmo…

  • Dandy Dozen of Free Windows Programs that I Install on Every New PC
    Our Tips Editor Vic Laurie says "Do you have some favorite free applications and utilities that you wouldn’t do without? Most active PC users have a list of favorite programs and here is my selection. I put these on every new PC I get. Many of these have been with me since Windows XP (or earlier) but they are tried and true and are still with me in Wind […]
  • This Excellent Free Notepad Replacement Gets An Update
    As is often the case, my recent posting about a small, portable replacement for NotePad brought a small flurry of suggestions for alternative products. It seems that a good note-taking app is one of the ley requirements of Windows users, and they like to continue in their never-ending quest for the best one. Robert Tucker, based in Canada, gets the credit fo […]
  • Terrific Program Lets You Automate Tasks On Your PC
    If you've been a Windows user for some time, you might be familiar with the concept of scheduled tasks. The task scheduler, built into the OS, lets you create a task which will automatically run at a specified time. For example, every day at 7pm, or every Saturday at noon, or the 17th of each month at 5am. When the specified date and time arrives, you c […]
  • This "Linguistic Portal" Is An Incredibly Useful Resource
    If you're interested in language, or you know someone who is, here's a web site that will be of real interest. Reverso, while not being an inspiring name, is an amazing web site that describes itself as a linguistic portal. It combines a spell checker, verb conjugator, dictionary, grammar checker and translation system, all in a web-based system th […]
  • Finds of the Week
    Finds of the Week is a list of web sites I've come across lately that are interesting, fun, or useful (or all three). I hope you enjoy them. -Rhiannon - Check If Your Account Has Been Compromised In A Data Breach - Create and Publish eBooks For Free - The World's Largest Online Science Dictionary http://www.techsupportalert.com/content/finds-week-w […]

Blog Stats

  • 122,048 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: