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

  • How To Run A Content-Planning Workshop
      Back when my agency started taking content seriously, we invested a lot time in developing a process to produce content. The biggest challenge was always figuring out how to get clients onboard with this new process. Most of our clients were totally happy riffing on how to meet the business objectives of a project or how to approach the visual design, but […]
  • Reducing Abandoned Shopping Carts In E-Commerce
      In March 2014, the Baymard Institute, a web research company based in the UK, reported that 67.91% of online shopping carts are abandoned. An abandonment means that a customer has visited a website, browsed around, added one or more products to their cart and then left without completing their purchase. A month later in April 2014, Econsultancy stated that […]
  • Design Accessibly, See Differently: Color Contrast Tips And Tools
      When you browse your favorite website or check the latest version of your product on your device of choice, take a moment to look at it differently. Step back from the screen. Close your eyes slightly so that your vision is a bit clouded by your eyelashes. Can you still see and use the website? Are you able to read the labels, fields, buttons, navigation a […]
  • Hybrid Mobile Apps: Providing A Native Experience With Web Technologies
      According to a recent report, HTML is the most widely used language for mobile app developers. The main reasons among developers for selecting web technologies is cross-platform portability of code and the low cost of development. We’ve also heard that hybrid apps tend to be sluggish and poorly designed. Let’s prove whether it’s possible to deliver the nat […]
  • Improving Your Information Architecture With Card Sorting: A Beginner’s Guide
      Information architecture (IA) is one of those buzzwords you’ve probably heard before. It refers to the organization of the information on your website and how it all fits together. When planning your IA, involve users of your website in the process as soon as you can. In this article, we’ll discuss card sorting, a tried and true technique for doing just th […]

RSS DailyDesignerNews

  • New portfolio site on mirkohumbert.ch – let’s connect!
      A couple of weeks ago, I relaunched a new design for my portfolio website. Feel free to take a look at my work there. The site is only in French now, but I’ll probably launch a version in English in a couple of months. For a description of my work in English, you should […] The post New portfolio site on mirkohumbert.ch – let’s connect! appeared first on D […]
  • Animated Street Art GIFs by A. L. Crego
    A fun and well-executed project by A. L. Crego, who took pictures of work by street artists, and created animated GIFs with it. The post Animated Street Art GIFs by A. L. Crego appeared first on Design daily news. Download the free transport icons package now!
  • Declassified letters
    A humorous typography-related project by Eni Saurus. The designer imagined some scenes in which letters were involved. The simple illustrations with just a touch of color work very well to bring the letters to life. The post Declassified letters 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. Aaron Script This beautiful and elegant font sports nearly 400 glyphs, OpenType features such as ligatures and stylistic alternates, and even comes in Webfonts. $9 instead of $39 – Get it […] The post Design deals for the wee […]
  • 30 beautiful and inspiring photos
    Eyes of a creative photographer can capture several stunning images even from a small moment. They are the person with some special qualities who see the world with the lens of camera to capture unusual event that may be we, as non-photographer cannot even imagine. Today in this blog, we are introducing you to 30 […] The post 30 beautiful and inspiring photo […]

RSS lifehacker

  • How to Get Free Repairs Without a Valid Warranty
    Nothing sucks more than having a gadget break down and finding out it'll cost hundreds of dollars to fix. Don't have the cash to spend on a repair? Here are some tricks for fixing it even if your warranty doesn't apply.Read more...
  • This Video Debunks 10 Popular Misconceptions About Food
    No matter what you call them—myths, urban legends, old wives' tales, or misconceptions—this video tackles some of the more popular cooking and food related ones you've probably heard at some point.Read more...
  • Here's a List of More Than 30 Free Image Sites That Don't Look Stock-y
    Finding decent, non-stock-y images that are free to use can sometimes be a frustrating search. This collection of over 30 image web sites contains a mountain of photos that would look just as good in your project as they would as your computer's wallpaper. Read more...
  • Find Battery Saving Tips for Almost Any Phone Model with This Index
    Smartphone battery life is getting better over time, but there's still plenty of things you can do to help keep your pocket-dwelling life assistant alive. This comprehensive index includes a wide range of battery-saving tips for models from Apple, Samsung, Blackberry, HTC, Huawei, LG, Motorola, Sony, Nokia, and even Amazon.Read more...
  • Five Therapy Tips to Help Manage Life's Problems
    Not everyone has access to professional therapists or psychologists, but we all face life's difficulties and need to find ways to deal with them. With some simple therapeutic tactics and methods, you might be able to help yourself overcome your more manageable problems.Read more...

RSS vector tutsplus

  • Human Anatomy Fundamentals: Drawing Characters Consistently
    What You'll Be CreatingAs a comic artist, one of the comments I get the most is: "I don't know how you're able to draw the same character over and over again so that they're recognizable!" Even artists who are reasonably fluent in drawing humans can still find this challenging, which is why I put together this final lesson. This […]
  • To the Point: An Interview With Robert Iza
    Readers may know Robert Iza's work from the webcomic "The Eternally Injured Ninja" or as a storyboard artist for the Nickelodeon series "Breadwinners". In this interview, Iza discusses his artwork, inspiration, working for Nickelodeon, art shows in galleries, and more. I am pleased as punch to share his work and an insight into his l […]
  • Envato Stories Meets Tuts+ Instructor Jordy Vandeput
    The latest Envato Stories video comes from Hasselt, Belgium, where the team met up with Tuts+ video production instructor Jordy Vandeput. Jordy has been teaching on Tuts+ since the start of 2013, as well as running his own video production company. Since buying his first camera at the age of 12 Jordy has been passionate about filmmaking. In his teaching he g […]
  • Create a Digital Painting of a Zombie From Scratch in Adobe Photoshop
    What You'll Be CreatingOur brief, should we choose to accept it, is: "Create a cartoon zombie and incorporate the letter Z."Zombies are awesome, and it is almost Halloween, so of course! As an extra challenge I will be using just two brushes. To make a very funky-looking cartoon zombie I will be covering my process of taking a brief through to […]
  • Design Course: Fundamentals of Children's Illustration
    If you want to start a new career in children's illustration, or if you're an illustrator looking to strengthen your skill set, take a look at our Fundamentals of Children's Illustration video course.What You'll LearnThis course will teach you how to create illustrations for children, with three hands‑on projects in Adobe Photoshop and Ad […]
  • Fractal Art: Create a Tile Fractal in Apophysis
    What You'll Be CreatingThis tutorial will equip you with the skills to create a style of fractal known as tiles. The concept of a tile (think subway tile or kitchen backsplash) is ideal for a fractal application because of the repeating pattern of self-similarity. In this tutorial we will explore the power of post-transforms, learn how to apply a final […]
  • How to Create a Halloween Illustration With a White Kitten in Adobe Illustrator
    What You'll Be CreatingIn this tutorial, you will learn how to create a Halloween-inspired illustration featuring a cute kitten. You will mostly use ovals and other basic shapes. It's bit longer than usual but easy to follow, and will lead to an adorable final result. Let's get started!1. Creating the HeadStep 1Hit the Ellipse Tool (L) and cre […]
  • Create Zombie Dragon Concept Art: Painting in Adobe Photoshop
    What You'll Be CreatingLast time we were designing and sketching a zombie dragon. Today we're going to make it more real by creating a digital painting in Adobe Photoshop. I'll show you a clean, non-destructive way of painting digitally—we'll be using Layer Masks and maps known from 3D modeling. I'll explain to you how ambient occlus […]
  • Quick Tip: Using the Eyedropper Tool in Adobe InDesign
    What You'll Be CreatingThe Eyedropper Tool is a multi-functional tool which you can use to speed up your workflow in Adobe InDesign. The main functions we’ll cover here are the tool’s ability to lift colors from a placed image for applying to text and other elements in your document, and also its use as a tool for applying the formatting attributes of o […]
  • Create a Funny Trick-or-Treat Halloween Monster in Adobe Illustrator
    What You'll Be CreatingWhat is the most exciting and delightful part of Halloween? No doubt, it's trick-or-treat! In this tutorial we are going to depict a cute, furry monster who has already gathered a basketful of yummy treats. We will use basic shapes and Warp effects, Pathfinder functions, and some simple freehand drawing with the Pencil Tool. […]
  • The A to Z of Sketch
    This A-Z list breaks down each tool within Sketch, including links to relevant tutorials here on Tuts+ and descriptions of what each tool can do. This list will be continually maintained and updated, so make sure you check back regularly! #9-Slice Image: Slice your bitmap images into nine different sections to aid scaling. You can click and drag any of the f […]
  • How to Create an Easy Halloween Pattern in CorelDRAW
    What You'll Be CreatingIn this beginner tutorial, we'll combine drawing tools and simple shape-building tools to create a spooky, Halloween-inspired pattern. All three designs within the pattern are formed from basic shapes: circles, squares, and triangles. Fire up CorelDRAW and let's bring on All Hallows' Eve!1. Drawing the MoonStep 1Sta […]
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…

  • Where in the world is the #XYZsquad?
    The #XYZsquad has had a long couple weeks. First was the international ICANN conference, which was held in our backyard in sunny Los Angeles. If you happened to be there, it’s needless to say that you definitely caught a glimpse of a few them and probably even received a goodie. For everyone else, they’ll just have to watch the […]
  • You want me to click what?!
    Post-ICANN, pumpkin spiced everything, and with Halloween just around the corner, it’s finally starting to feel like fall here in LA! #GenXYZ, what will you be for Halloween this year? It might be because of the much anticipated sweater weather, but we’re in the mood to give the usual #WebsiteWednesday a little twist. In fact, […]
  • Never have I ever…
    It’s Day 3 of #ICANN51 and Team XYZ is working extra hard for you, #GenXYZ. We’re meeting with our amazing business partners so we can continue to build .xyz as the most popular, go-to ending for YOUR domain. In the midst of back-to-back meetings, panels, and events, we like to take a quick little mental […]
  • Join Team XYZ at #ICANN51
    Hey there, #GenXYZ! Getting ready for #ICANN51 in LA. Tweet us if you’re here! #genxyz #deepv pic.twitter.com/vRlQM9kinp — XYZ (@xyz) October 13, 2014 For those of you who follow us on Twitter, you already know that we’ve been preparing for ICANN’s huge conference in Los Angeles that began yesterday. THOUSANDS of people are gathering from […]
  • #WebsiteWednesday: how to use your .xyz
    What was your guess for the 555,555th .xyz domain, #GenXYZ? Drumroll, please… The 555,555th .xyz registration was: BrewIt.xyz With all of the buzz we’ve been getting for having the most number of active websites, Team XYZ has also been receiving a lot of great questions about how to use your shiny new .xyz domain name. […]

RSS Gizmo…

  • Think Of It As Your Own Personal Twitter Or Facebook Clone
    One of the internet's great strengths is allowing groups of people to collaborate and communicate across time and geographical boundaries. Social networks like Facebook and Twitter are great, but sometimes they're too social. Maybe you'd prefer your own closed, private space on a system which worked in a similar way to other established social […]
  • A Handy Tip To Help Find Useful Online Information
    Whatever you want, or need, to know about, the internet is probably your best place to start hunting for information. But while many people will try to advise you on what are the best search terms to type into Google or Bing, there's actually more to effective online searching than merely coming up with a good set of keywords. Here's my tip: http:/ […]
  • Nine Shortcuts to Speed up Internet Browsing that You May Not Know
    All the common browsers have a number of shortcuts but some are not as well-known as others. Here are nine helpful browser hot keys and shortcuts that you may not be aware of. http://www.techsupportalert.com/content/nine-shortcuts-speed-internet-browsing-you-may-not-know.htm
  • Updated: Best Free iPad Apps
    This list of Best Free iPad Apps now includes 132 apps in various categories. Despite more than 1 million iOS apps in Apple’s App Store available for download, we only select the best from the free ones running in full screen on your iPad, while iPhone apps running on the iPad in 1x or 2x mode are excluded from this list. http://www.techsupportalert.com/best […]
  • Three Ways to Easily Access Your Most Recent Documents and Files in Windows 8.x
    I noticed that this article we published in April 2014 is among the highest rated at Gizmo's Freeware so I thought it was well worth mentioning again: Do you miss having the Start menu feature “Recent Items” that used to be present in Windows before Windows 8 removed the entire Start menu? A folder with shortcuts to recently opened files is still there […]

Blog Stats

  • 122,499 hits
web stats
Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 25 pengikut lainnya.

%d blogger menyukai ini: