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

  • Cache Invalidation Strategies With Varnish Cache
    Phil Karlton once said, "There are only two hard things in Computer Science: cache invalidation and naming things." This article is about the harder of these two: cache invalidation. It’s directed at readers who already work with Varnish Cache. To learn more about it, you’ll find background information in “Speed Up Your Mobile Website With Varnish. […]
  • Rethinking Mobile Tutorials: Which Patterns Really Work?
    Pattern libraries are a great source of inspiration and education for designers. But common practice doesn’t always equal best practice. In this post, we’ll look at why many common tutorial patterns are ineffective and how you can leverage game design principles to increase user engagement. After the release of the first edition of Mobile Design Pattern Gall […]
  • After Editorially: The Search For Alternative Collaborative Online Writing Tools
    I’m going to let you in on a little secret: the best writers, be it your favorite authors or those that write for Smashing Magazine, don’t do it alone. Often, they work with an editor (or two), who will help them coalesce their words into something more compelling or easier to understand. Having worked with several editors — and having been a technical edito […]
  • What You Need To Know About WordPress 3.9
    The latest version of WordPress named "Smith" was released yesterday which brings us another round of core changes. This time, the team worked mainly on the back-end editing and admin functions, such as a big TinyMCE (visual editor) update, gallery previews, media playlists, an improved widget UI and live theme previews (only to mention a few). Her […]
  • Understanding CSS Timing Functions
    People of the world, strap yourself in and hold on tight, for you are about to experience truly hair-raising excitement as you get to grips with the intricacies of the hugely interesting CSS timing function! OK, so the subject matter of this article probably hasn’t sent your blood racing, but all jokes aside, the timing function is a bit of a hidden gem when […]

RSS DailyDesignerNews

  • iBlock tablet-holding cutting boards
    I’m always a bit surprised that we don’t see more of these kind of designs. To integrate modern tools to our daily life habits, we will need to adapt our living environment. That’s what these cutting boards do perfectly. The post iBlock tablet-holding cutting boards appeared first on Design daily news. Download the Designers essentials package now!
  • The CAT table
    Do you like cats? I like cats, and I’d be happy to have a table where cats could play. That’s exactly what LYCS Architecture thought, so they created the CAT table, a table designed with a built-in playground for cats. The post The CAT table appeared first on Design daily news. Download the Designers essentials package now!
  • Freebies wednesday
    Every wednesday, we share a few freebies that’ll make your designer toolbox a bit more useful. Cooking icon set A hand-drawn icon set downloadable for free. Pure CSS3 loaders A set of 10 pure CSS3 loading animations to use in your next projects. Coded by Johan Hanchin. Aqua A gorgeous geometric grotesque typeface. Clean animated […] The post Freebies wednesd […]
  • A 3D printed shelter for hermit crabs
    Japanese artist Aki Inomata decided it was time to give a shelter to hermit crabs. For that purpose, she designed cool transparent shells that she printed with 3D printers. The post A 3D printed shelter for hermit crabs appeared first on Design daily news. Download the Designers essentials package now!
  • Featured illustrator: Donough O’Malley
    Donough O’ Malley is an Irish Illustrator based in the UK. Since studying illustration in Bristol in Brighton he has worked as a freelance Illustrator and author, in a variety of areas from Children’s books, editorial, advertising and fashion. The post Featured illustrator: Donough O’Malley appeared first on Design daily news. Download the Designers essentia […]

RSS lifehacker

  • Make Your Own Delicious Ramen That's Even Cheaper Than Instant
    Instant ramen is a poor shadow of the noodles you get at a ramen shop. Now you can make better-than-instant ramen at home for even less than those cheap packets you find at the grocery store.Read more...
  • How to Negotiate Your Salary
    One of the best ways to increase your income is through salary negotiations, either when you're first offered the job or during a performance review. It may make you uncomfortable, but it's extremely important. Here's how to get what you want out of a negotiation.Read more...
  • The Pivotal Technique Cuts the Crap Out of Learning How to Change
    Figuring out a plan for your life and where you want it to go is literally impossible. Even if you can decide what you want, mapping out all the steps is a gargantuan task that will necessarily change. Skip the superfluous stress by identifying two simple, key points: where you are and where you're going.Read more...
  • Blood Alcohol Finder Estimates Your BAC Over Time Based on Your Drinks
    Android: Without a breathalyzer, it's not exactly easy to gauge what your blood alcohol content is. Blood Alcohol Finder helps you get in the ballpark, though, by estimating your BAC levels based on your size, gender, and amount you've been drinking over time.Read more...
  • Gawker NYPD's Twitter Outreach Backfires in Most Predictable Way Possible | Jalopnik Top Gear Says '
    Gawker NYPD's Twitter Outreach Backfires in Most Predictable Way Possible | Jalopnik Top Gear Says 'Sorry' For Weird Racist Joke, Blames America | Jezebel Genius Woman Responds to OKCupid Creeps by Drawing Them Naked | Kotaku Nintendo's Secret WeaponRead more...

RSS vector tutsplus

  • Working with Type on a Path in Illustrator
    What You'll Be CreatingIn this quick tip tutorial, you will learn how to add Type on a Path in Adobe Illustrator. This is handy for logos and badges. So let's get to it!Text Around a Circular Path Let’s start with the badge scenario. The first thing you need to do is create a baseline for the text to follow. Create either a circle or part of a circ […]
  • Create a Fun Kaleidoscope Effect in Adobe Illustrator
    What You'll Be CreatingI've previously shown you how to create a mirrored effect, using the Appearance panel and the Transform effect. However it's time to kick it up a notch and learn how to create a kaleidoscope effect. Once you've learnt how to create this effect, it will be one of those tricks which you'll enjoy playing with... e […]
  • How to Use a Grid to Enlarge an Image While Drawing
    What You'll Be CreatingSometimes you have the perfect image to draw or paint but it's too small. An easy way to transfer the image to your drawing paper or canvas and increase it's size to what you want, you can use a grid. In this tutorial, I'm going to show you two easy ways to blow up an image and get it ready for the final art making […]
  • How to Create a Colorful, Sparkly Text Effect in Adobe Illustrator
    What You'll Be Creating For starters you will learn how to setup a simple grid and how to create a set of scatter brushes. Next, you will learn how to create a simple background and how to use your scatter brushes. Moving on you will learn how to take full advantage of the Appearance panel and how to ease your work using simple graphic styles. Finally, […]
  • Create an Avocado With Only One Shape in Adobe Illustrator
    What You'll Be CreatingFollow this tutorial and learn how to create an avocado using only one shape in Adobe Illustrator. You will start with a basic shape then by distorting it, you will obtain the shape of the avocado. From this point forward, you will add the appearances one by one in order to create the avocado style. You will create the peel, the p […]
  • Create a Soccer-Themed Text Effect in Photoshop
    What You'll Be CreatingIn this tutorial, I will show you how to create a soccer-themed text effect, using basic Layer Styles, brushes, and a couple of textures. Let's get started! Tutorial Assets The following assets were used during the production of this tutorial. Lobster font (Download the Lobster 1.3 version). White Texture pattern by Dmitry. G […]
  • 25 Amazing Blend Tutorials in Adobe Illustrator on Tuts+
    In this week's Round Up we've focused purely on beginner content for those who wish to get a better understanding on the Blend Tool and Blends! These aren't the only tutorials we have on Tuts+, in fact I'd like to share with you many of our others.Blend Tool and Blends Week We posted several tutorials, screen cast and written, to help eas […]
  • Vector Battle: Round One - Diamonds (Game Over)
    Over the past week, we started our first Vector Battle here on Tuts+. Two regular Instructors went head to head using the same concept... diamonds. Round One: DiamondsThe theme for the first Vector Battle was Diamonds. This was because the birthstone for the month of April is diamond/crystal. The challengers could interpret the theme how they wish.Our challe […]
  • Improve Your Artwork by Learning to See Light and Shadow
    It's very common for painting tutorials to treat light as an addition to the picture, an atmosphere-maker. We can easily get the impression that the object has a universal form, and then with proper lighting we can change the mood of the picture. The truth is without light there would be nothing to paint! Until you realize that, you're shooting bli […]
  • Create a Mustard Text Effect in Adobe Illustrator
    What You'll Be Creating You will learn how to setup a simple grid and how to create your mustard bottle using a bunch of linear gradients, some meshes, simple blending techniques and several effects. Next, you will learn how to save a simple, scatter brush. Moving to the mustard text, you will learn how to use your scatter brush along with a built-in ca […]
  • Connect the Dots With Visualize Path in Inkscape
    Before you think Inkscape doesn't have something, check the Extensions menu. You'll be surprised to see that there are a bunch of these additional dialog menus - and they're pretty helpful most of the time. Let's look at Visualize Path in this Inkscape quick tip.1. What Is It?Visualize Path is an Inkscape extension that creatively alters […]
  • 10 Things You Need to Know About Smart Objects in Photoshop
    What You'll Be CreatingWith the recent introduction of Linked Smart Objects in Photoshop CC, Smart Objects have become much more powerful, and useful. In this tutorial, I will share with you 10 things that you should know about working with smart objects in Photoshop. Let's get started! Photo CreditsEmpty Frames on Gallery WallSingapore SkylineSnow […]
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

  • Active@ ISO Burner 3.0
    Free tool to to burn CD, DVD and Blu-ray ISO files. 2014-04-23
  • Win 8 App Remover 0.55
    Easily remove unwanted apps that come pre-installed with Windows 8. 2014-04-23
  • PCFerret 2.1.0.1111
    A free system tool to view detailed information about your computer. 2014-04-23
  • TaskUnifier 4.2.0
    Helps you manage your tasks, folders, contexts and goals. 2014-04-23
  • Asymptote 2.25
    A powerful descriptive vector graphics language that provides a natural coordinate-based framework. 2014-04-23

RSS Top ten Freeware…

RSS Techrepublic…

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

RSS Gizmo…

  • View 85,000 Historical Newsreel Videos For Free
    From 1910 until it closed in 1970, Pathé News was one of the world's best-known news agencies. Based in Britain, and indeed originally known as British Pathé, it produced tens of thousands of filmed news reports, covering major stories and events all over the world. Last week, its entire archive of 85,000 videos was put online, on a dedicated YouTube ch […]
  • Updated: Best Free Digital Image Viewer
    Digital photography has become so widely available that most pictures these days will linger in a memory drive and never be printed, because we can see them on screens. As a consequence, hundreds of tools have been developed for the task, ranging from ones that offer just the most basic handling to others with loads of features nobody will ever use. That […]
  • Easily and Safely Eject USB Drives and Memory Cards with this Free Utility
    Sometimes you want to disconnect a USB drive or a flash memory card but Windows says it can’t be removed because it’s busy. Or maybe you just don’t like the “Safely Remove Hardware” function that sits in the notification area. If you are looking for a better way, you might try an open source alternative that will let you quickly and safely disconnect USB dri […]
  • Get Free Tips On How To Improve Your Writing
    Next time you need to write a long email message or some other document, or maybe a letter, try running the text past Hemingway before you send it. Not Ernest, of course, but the free web-based text analysis tool that shares his name. Hemingway checks your text, tells you what reading level it scores, and gives you tips on how to improve your writing. In the […]
  • Manage and Store Your Passwords Securely with Passneitor for Android
    By this time, you must be well-aware that using the same password on every single site is a terrible idea. Web servers get hacked every now and then, and your info could be easily exposed to malicious individuals. Even supposedly secure servers are vulnerable to attacks via the infamous Heartbleed bug, and chances are that you will have to change your passwo […]

Blog Stats

  • 118,780 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: