WORDPRESS IS ARGUABLY THE MOST POPULAR AND FASTEST GROWING CMS. WITH MORE WEBSITES “GOING WORDPRESS” EVERY DAY, IT’S NEVER BEEN A BETTER TIME TO LEARN HOW TO CREATE A WORDPRESS THEME
AS A FREE and open-source content management system, WordPress is becoming more popular every single day and is showing no signs of slowing down. Many individuals and companies are deciding to include WordPress integration when re-designing their websites and being able to create WordPress themes is definitely a valuable skill to have in this day and age. Fortunately, WordPress has a very gentle learning curve and it’s quite easy to pick up. With just a few simple PHP tags you can quickly create a dynamic website. Once you know the basics, it’s easy to continue learning with the help of tutorials and the massive community that surrounds the CMS. In this tutorial, Dan Philibin and Michael Castilla of WPCoder will show you how easy it is to turn a single HTML template into a fully functional WordPress theme. In the example they will be using the Coda web editor for Mac, which you are free to download from www.panic.com/coda/ however any editing tool such as Dreamweaver should be sufficient.
Author: WP Coder (www.wpcoder.com) | Originally appeared in Issue 157
01 Install WordPress
To get started, first install WordPress. Many hosts offer automated installs and the Codex has a few tutorials
(http://codex.wordpress.org/Getting_Started_with_WordPress). For help setting up shop locally, check out
http://tinyurl.com/d9zzu6 (Windows) or http://tinyurl. com/df8dev (Mac).
02 Create a new theme
In your file browser, navigate to wp-content/themes. This is where every theme for your site is going to be
stored. Create a brand new folder for your theme and give it a name – we used ‘thecolortheft’ – and create
four blank files inside – index.php, header.php, sidebar. php and footer.php.
03 Images and style sheet
Copy the images folder and style.css into your theme folder, then open the style sheet in your code editor and add the information shown below to the top of the style sheet, filling in your own information as you type. These details will tell WordPress what theme it is and who its creator is.
/*
Theme Name: The Color Theft
Theme URI: http://yourwebsite.com
Description: A cool theme for Web Designer
Magazine
Version: 1.0
Author: Your Name
Author URI: http://yourwebsite.com
*/
04 Create the header
Looking at index.html in your code editor, copy the code from the top of the document down to the end of the #header <div> and then paste it into header. php. This will now be the header of your site. In the following steps you will learn how to make much of this content dynamic.
05 Page title
The first dynamic tag you’ll use is to generate the page title. Find the two title tags near the top of header. php and type the code shown below inside of those tags. This is used to display something along the lines of “My Blog » Page Title” in your browser.
<title><?php bloginfo(‘name’); ?> <?php wp_title();
?></title>
06 Style sheet URL
The URL to the site’s style sheet in the header must be a full URL and not just simply a file name, otherwise it will not work. A few lines down from the title, you’ll need to replace style.css with <?php bloginfo(‘stylesheet_url’); ?>. This tag will generate the full URL to the theme’s style sheet.
07 RSS URL
By default, an RSS news feed is generated for your blog. To make that feed public, you will need to add the code listed below somewhere within your HTML header. In the image above you can see from the highlighted line 10 for the whereabouts of where we added it:
<link rel=”alternate” type=”application/rss+xml” title
=”RSS 2.0” href=”<?php bloginfo(‘rss2_url’); ?>” />
08 Site title and URL
Inside <h1 id=”logo”>, replace the ‘#’ with <?php bloginfo(‘url’); ?> and ‘The Color Theft’ with <?php bloginfo(‘name’); ?>. The first tag will generate the URL to the site, and the second tag will generate the name of the site provided in the General WordPress settings. Remember that URL tag – you’re going to be using it quite often!
<h1 id=”logo”><a href=”<?php bloginfo(‘url’); ?>”><?
php bloginfo(‘name’); ?></a></h1>
09 Navigation links
Moving on to the unordered list, add the blog URL tag to the link for Home, just like in the last step. To dynamically generate a list of your site’s pages after that, replace the rest of the links with <?php wp_list_ pages(‘depth=1&title_li=’); ?>. Remember this tag! You will use it whenever you want to display a list of pages on your site.
<ul id=”nav”>
<li><a href=”<?php bloginfo(‘url’); ?>”>Home</a><
/li>
<?php wp_list_pages(‘depth=1&title_li=’); ?>
</ul>
10 Create the sidebar
Now it is time for you to move on to the sidebar. In the HTML source file, locate the sidebar div (<div id=”sidebar”>) and then copy that whole div and its contents (down to the closing tag) into sidebar.php.
11 Activate the search
One of the great things about WordPress is that it has a built-in search feature to make life that little bit easier. It’s very simple to activate it, all you have to do is insert the blog URL tag into the form’s “action” value. This is the same tag that was used twice in the header.
<form method=”get” id=”searchform” action=”<?php
bloginfo(‘url’); ?>/”>
12 Ad placeholder images
In the next area, the advertisement area, you need to link to the four placeholder images. However, you can’t just link right into the images folder – just like the style sheet, you need the full URL. Before ‘images’, insert this tag: <?php bloginfo(‘template_directory’); ?>. This echoes the full URL to your theme folder. This is another tag you’ll use pretty often if you’re ever linking to an image or file within your theme folder.
13 Dynamic categories
Moving on to the next area, there’s a list of post categories that need to be made dynamic. This tag – also a common one – will do the trick: <?php wp_ list_categories(‘title_li=’); ?>. Insert this tag inside the unordered list in place of all of the existing list items.
<h3>Categories</h3>
<ul>
<?php wp_list_cats(‘sort_column=menu_order&de
pth=1&title_li=&show_count=1’); ?>
</ul>
14 Tag cloud
A popular sidebar item on many blogs is a tag cloud. A tag cloud is a stylised list of the tags used on your posts. The more times a tag is used, the bigger the font is. Under the heading, insert <?php wp_tag_cloud(); ?> to generate one.
<div id=”tags”>
<h3>Tag Cloud</h3>
<p><?php wp_tag_cloud(); ?></p>
</div>
15 Blogroll
Finally, insert a list of your favourite links. These links can be managed in the WordPress admin under ‘Links’. To display the list in your sidebar, use <?php wp_list_ bookmarks(‘title_li=&categorize=0’); ?>, which will display an alphabetical list of your links.
<h3>Blogroll</h3>
<ul>
<?php wp_list_bookmarks(‘title_li=&categorize=0’);
?>
</ul>
16 Create the homepage
Now that we have the markup split up into separate PHP files accordingly, we can move on to the main template file of the theme, index.php. Copy the entire #wrapper <div> and paste it into index.php. You now want to attach the header.php, sidebar.php, and footer. php to your index.php file. This is really easy! In place of where the markup for the header, sidebar, and footer was, add the following tags accordingly: <?php get_header(); ?>, <?php get_sidebar(); ?>, and <?php get_footer(); ?>.
First line of index.php:
<?php get_header(); ?>
Last line of index.php:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
17 The loop
Now we move on to the most important part of a WordPress theme, the loop! Everything inside of the loop will echo for each post. Place <?php while(have_ posts()) : the_post(); ?> above <div class=”post”> and <?php endwhile; ?> after <div class=”divider”></ div>. For an in-depth explanation of the loop, Justin Tadlock has written a fantastic article which you can check out at http://tinyurl.com/boc5wg.
<?php while(have_posts()) : the_post(); ?>
<div class=”post”>
…
</div>
<div class=”divider”></div>
<?php endwhile; ?>
18 Loop content (part 1)
Inside the h2 heading, replace the ‘#’ with <?php the_permalink(); ?>, which will generate the URL for that specific post. Replace ‘This is a test post’ with <?php the_title(); ?>, which will generate the post title for that specific post.
<h2><a href=”<?php the_permalink(); ?>”><?php the_ti
tle(); ?></a></h2>
19 Loop content (part 2)
Taking a look inside the loop, we need to add a few tags. For the post metadata, replace the date with <?php the_time(‘F dS, Y’) ?>, the categories with <?php the_category(‘, ‘); ?>, and the author name with <?php the_author(); ?>.
<div class=”info”>
<ul>
<li><?php the_time(‘F dS, Y’) ?></li>
<li><?php the_category(‘, ‘); ?></li>
<li><em><?php the_author(); ?></em></li>
</ul>
</div>
20 Loop content (part 3)
Replace the dummy text with <?php the_content(); ?>. This tag will get the corresponding content for each post. Replace the ‘#’ for the Continue Reading link with the same tag used below for the post URL in part 1.
21 Archives, search and single
Create three new files called archive.php, search.php and single.php. Copy and paste all the code from index.php into each of those files.
22 Regular pages
Create a new file called page.php and copy and paste the code from index.php into that file. Some styling is different on the regular pages, so we’re going to add a page class to <div class=”post”>, so it should now read <div class=”post page”>. Also, since we don’t want the post metadata showing on these pages, we’re going to delete <div class=”info”> and its contents.
<?php while(have_posts()) : the_post(); ?>
<div class=”post”>
<div class=”title”>
<h2><a href=”<?php the_permalink(); ?>”><?php th
e_title(); ?></a></h2>
</div>
<div class=”text page”><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
23 404 page
This is the page your users will get when they go to a page URL on your site that hasn’t been created or is broken. Create a new file called 404.php, copy and paste the contents of page.php into that file. Take out the PHP for the loop (the_permalink, the_content, the_title and so on) and change around the page heading and text as you wish!
24 The footer
Creating the footer for this theme is really simple. From the HTML source file, copy and paste the closing HTML and body tags, and the full footer <div> into footer. php and you’re set.
25 Triggers
There are two “hooks” you need to have in your theme so that other plug-ins can interact with it. One tag will go inside the <head> tags in header.php and the other will go just before the body closes in footer.php, as shown in the code below:
In header.php:
…
<?php wp_head(); ?>
</head>
<body>
In footer.php:
…
<?php wp_footer(); ?>
</body>
</html>
26 Activate the theme
Now that we have finished the integration, it’s time to put the theme to the test! Log into the admin at http://yoursite.com/wp-admin with the username and password you received after installation. Head to the Appearance panel, find your theme in the list, and activate it!
Nenhum comentário:
Postar um comentário