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

  • Build A Blog With Jekyll And GitHub Pages
      I recently migrated my blog from WordPress to Jekyll, a fantastic website generator that’s designed for building minimal, static blogs to be hosted on GitHub Pages. The simplicity of Jekyll’s theming layer and writing workflow is fantastic; however, setting up my website took a lot longer than expected. In this article we’ll walk through the quickest way t […]
  • Desktop Wallpaper Calendars: August 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 […]
  • Declarative Programming And The Web
      Like most web developers, I spend my days giving instructions to computers. These instructions generally involve some input (a request for a web page), some logic (get the right content from a database) and some output (send the content to the requesting browser). This process of telling a computer how to perform a task, such as generating a web page, is w […]
  • Selling The Value Of The Web To Small-Town Clients
      Selling your services as a freelancer or a small shop is tough enough as it is. Selling to a small-town business that might not even see the need for a website adds an extra level of difficulty in turning a profit. I’ve provided web design services to small-town businesses for the past few years, having had many happy outcomes, but also a lot of negative e […]
  • How Limitations Led To My Biggest App Store Success and Failure
      Look at your calendar. If you’re anything like me, all you see are meetings, places to go, things to do, people to meet and not a lot of white space. Few people love their calendar. So, we set out to change that, and we learned a lot in the process. Our app is an iPhone app that flips your calendar upside down and lets you focus on the free time in your da […]

RSS DailyDesignerNews

  • 15 Photoshop actions to save time designing
    This blog introduces you to 15 such Photoshop actions which are free to download and creates stunning effects. For all the photographers, graphic designers and other artists, have a look at the list below and make your design a wonderful one in less time. 1. Vintage Light Leaks Vintage Light Leaks has been created using […] The post 15 Photoshop actions to s […]
  • The Kangaroo clock
    This clock designed by David Raffouli has a small, useful, pocket that serves as a space to put small stuff. It was named the Kangaroo clock for that reason. It was built as part of an ongoing collaboration between Fabrica and the italian clocks producer Diamantini&Domeniconi. The post The Kangaroo clock appeared first on Design daily news. Download the […]
  • 8 awesome ribbon fonts
    Fonts are one of the most essential parts of any design to make it successful. We love those fonts which have their own personality. When it comes to eye catchy and attractive fonts with different curves and shapes, ribbon fonts are best. These fonts are best for highlighting your headings. Below I have collected 8 […] The post 8 awesome ribbon fonts appeare […]
  • 8 online marketplaces to sell your art
    The technology has so much influence in everyone’s life in today’s world that whether it’s buying or selling, maximum dealing is online. Same is the case with your art. Many artists have been selling their work on the internet and have been making money but now there is a great competition as such businesses have […] The post 8 online marketplaces to sell yo […]
  • 5 tools to keep your eyes safe when working on screen
    We been so much influenced by technology these days that we are harming our health with it’s over use. Yes, am talking about the desktops, laptops, tablets, and mobile phones. Almost of us have at least one of these, don’t we? Along with the back pain due to the irregular posture while using desktops or […] The post 5 tools to keep your eyes safe when workin […]

RSS lifehacker

  • The Wilderness Survival Skills Everyone Should Know
    A few hours watching the Discovery Channel can prompt extreme survival fantasies involving frog licking and urine drinking, but what basic skills would you actually need to survive in the wilderness? Here's a look at the basics you need to become an adult Boy Scout straight from a cadre of survival experts. Read more...
  • Become a Better Storyteller Through Dungeons & Dragons
    As a storyteller of any kind, the way you weave your narrative decides whether people keep reading, watching, or listening. The classic role-playing game Dungeons & Dragons can teach you how to construct strong narrative and how to collaborate with others in a way that's a whole lot of fun.Read more...
  • This Chart Explains What Went Wrong with Your Cake
    If you're learning to bake or just trying out a new recipe, it can be hard figuring out exactly why your cake failed. This handy chart will tell you why your cake ended up with cracks, browned edges, or why it has a runny texture.Read more...
  • The Easiest Way to Remove a Broken Construction Nail
    When you're building something or just conducting repairs, you might come across a broken nail that needs to be removed. There's an easy you can do it and all you need is a pair of vice grips and a basic claw hammer.Read more...
  • Say No to New Projects When You First Get Back from Vacation
    Getting back to work from a vacation is tough, and it's even worse when people are hounding you to get started on something. Levo League suggests you say no to any new projects for the first day you're back to maintain your sanity. Read more...

RSS vector tutsplus

  • Create a Propeller Pinwheel Illustration in Adobe Illustrator
    What You'll Be CreatingIn the following steps you will learn how to create a colorful propeller pinwheel illustration in Adobe Illustrator.For starters you will learn how to setup a simple grid and how to create the first propeller using basic tools and effects. Moving on you will learn how to add color and shading for these shapes using basic blending […]
  • Realism, Photorealism, and Style in Drawing
    "I know the anatomy isn't correct here, but it's my style", "This drawing lacks style", "I love your style!" We use the word style a lot without actually grasping its meaning. Like "love" or "art", we know it by heart, but it's not so easy to define.In this article I'll make an attempt to […]
  • Design a Vector Themed Cereal Box in Adobe Illustrator
    What You'll Be CreatingThe most important meal of the day is Adobe Illustrator. I'm pretty sure breakfast comes second. As such, we're going to combine the two and pay homage to the cereal boxes of our childhood with this cartoony box design.1. Start With a SketchStep 1It's important to figure out your central character and layout within […]
  • Create a Diskette and Walkman with New Live Shapes in Adobe Illustrator
    What You'll Be CreatingOne of the many updated features Adobe unveiled with Adobe Illustrator CC 2014 was the inclusion of Live Shapes. Like Live Corners before them, Live Shapes brings greater control over closed path objects, speeding up workflow. Put your memory to the test with this simple shapes tutorial making use of this fantastic new feature.1.  […]
  • Quickly Create a Website With Adobe Muse CC 2014
    In this tutorial I will quickly show you how you can build a website using Adobe Muse CC. Amongst other things, we'll:Create and manage a site structureWork with Master PagesDemonstrate smart guidesTake a look at Typekit fontsUse dynamic navigationImplement a slideshow widget Download video or subscribe to Tuts+ Web Design on YouTubeArtwork by Črtomir J […]
  • Create an Animated Interface GIF in Adobe Photoshop
    What You'll Be CreatingEver wanted to turn an app interface PSD into a fully animated demo for your clients or site? Turns out, you can use Photoshop for that, too.In this tutorial, we will design a simple news iPhone app, and then animate it for client presentation and export it as a GIF file. You'll learn everything you need to go from idea to an […]
  • Quick Tip: Using the Path Blur and Spin Blur in Photoshop CC 2014
    One of the more powerful features that came with the new Photoshop CC is the addition of the Path and Spin Blur filters. This quick tip will explain how to use those filters in order to achieve interesting effects quickly and easily. Let's get started. Tutorial Assets The following assets were used during the production of this tutorial: Golden Dawn Bri […]
  • Working With the Area Type Tool in Adobe Illustrator
    Most blocks of text are set within conventional rectangular borders. But, what about those times when you want to place text within an irregular boundary? Or, what if you want to divide the copy in your text box into columns? I’ll show you how to do both of these things, as well as a few extras, using Adobe Illustrator’s Area Type Tool.Inserting Text Into A […]
  • Community Project Showcase: Creative Selfies—Part Two
    If you're new to this project, check out Part One of our Creative Selfie Showcase.Community Project Showcase: Creative Selfies Part TwoWhen we asked you to show us your creative selfies, we were blown away by the incredible talent of our readers. From vectors to digital paintings, portraits to abstract art, you've all shown us that your talent is t […]
  • Draw a Cute Badger Scene Step by Step
    What You'll Be CreatingAbout two months ago, I'd written a tutorial about drawing badgers (and some other animals of their family). This time we're going to use tips from it to create a cute scene with a badger-mama and her baby.We'll start from scratch and you'll be able to learn a lot of useful tricks to create a quick illustration […]
  • 3 Ways to Retouch Fly-Away Hair
    What You'll Be CreatingIntroductionI really enjoy portraiture. When it's done well, it is very satisfying and tells a lot about the person in the photo. However, there is always a little element that is a constant problem for me: fly-away hair, frizzies, or whatever you call them. They're the strands of hair that stick out from the person […]
  • How to Create a Seamless Vintage Nautical Life Pattern in Adobe Illustrator
    What You'll Be CreatingIt's summertime—the time to hit the beach or take a sail. What better time to decorate with a nautical pattern that'll repeat perfectly?In this tutorial, you will learn to create marine life wallpaper in a vintage style, using Adobe Illustrator. You will use the Pencil Tool to draw different elements, and learn to make t […]
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 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 […] […]
  • .xyz is Taking Industry-Leading Measures to Prevent Fraud and Spam
    As an industry-leading registry operator, .xyz has spent quite a bit of time prepping for anything that might go wrong in a namespace that’s as popular as we’ve become. So even though we’re busy promoting the next big thing, we’ve been just as proactive behind the scenes to monitor and block spam, plus other forms […]
  • #Itsgotime
    Hey #GenXYZ! Just one week into general availability, Daniel Negari and the rest of us on the XYZ team packed up our bags – along with a ton of .xyz t-shirts – to go on an epic GoDaddy road show. And what better way to go on an epic road trip than to rent an […]
  • 2014 – The Year of the Registrant
    .xyz has seen enormous success in just our first week of being live. We have become the #1 new domain extension, and we owe it all to the support from YOU and all of our early adopters. We appreciate and give thanks to YOU, the registrant. We positioned .xyz to be the first affordable and […]
  • .xyz – we’re LIVE!
    .xyz is finally here! We launched yesterday morning at 9 am (PDT) and what a whirlwind it was. #GenXYZ, did you get your favorite .xyz domain names? Thanks to all of your support and #GenXYZ love, we received over 31,000 registrations for .xyz domain names within the first 24 hours – that number makes our […]

RSS Gizmo…

  • Free Microsoft Windows Security Tool EMET is Upgraded to Version 5.0
    Microsoft Enhanced Mitigation Experience Toolkit (EMET) has been frequently mentioned here and version 5.0 has just been released. This is a powerful tool for protecting PCs. The Microsoft announcement says: EMET is a free security mitigation tool designed to help IT Professionals and developers protect against emerging threats targeting vulnerabilities that […]
  • Great Collection of Articles and Aids for Understanding and Explaining Technology
    If you are an educator or someone who frequently explains technology to others, here is a resource that is a real find. http://www.techsupportalert.com/content/great-collection-articles-and-aids-understanding-and-explaining-technology.htm
  • The Definitive Guide to the World's Wondrous and Curious Places
    Our Website of the Week is Atlas Obscura, a place where you can find off the beaten path treasures from around the world. This description from the site sums it up nicely: "In an age where everything seems to have been explored and there is nothing new to be found, we celebrate a different way of looking at the world. If you're searching for miniat […]
  • Wonderful Chrome Browser Addon Lets You Search Text Of All Visited Pages
    The built-in history feature built into all web browsers can be very useful. If you need to revisit a page that you looked at yesterday, or a month ago, just search through the history listing and you'll probably find the correct URL listed there. However, the browser history would be much more useful if it stored not just the URL of the pages you visit […]
  • My Currently Favoured Youtube Downloader
    It's often useful to be able to download a Youtube video in order to view it offline. While the web is full of programs and sites claiming to offer such a facility, they are sometimes expensive. And those that are free tend to disappear without warning, so the system you used last week no longer works today. A couple of days ago I needed to download a l […]

Blog Stats

  • 121,040 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d bloggers like this: