This is an example how to search your blog as a query in Google. But have you ever wanted to learn how to make your own ‘Search Tools’ for Firefox so that you can look-up information on your own blog quickly, from anywhere on the internet? Or do you want to hack Google Custom search to improve your earnings and it’s functionality?

It turns out making a search tool is relatively simple. In fact using this tool, you can make one in about five minutes. The trick is to figure out what a search query on your blog looks like. For Wordpress users, it might look like this:

http://yourblog.com/blog/?s=news&search=Search

This is important because you’ll notice the form asks you for a front of search term and a back of search term. The query itself should be left out so that your users can enter whatever they want. Let’s dissect the search query….

FRONT
http://yourblog.com/blog/?s=

QUERY
news

BACK
&search=Search

Your own search queries may look a bit different than this depending upon the software you use. To get the query preform a search using the GUI and then copy and paste the query from the navigation bar.

If you’re using Google custom search, you’ll notice that the query looks very different. This is because they use identifiers to keep track of revenues earned from custom search. Now, I have no idea if hacking their custom code is a violation of TOS but I’ve done it, it works but since it’s questionable I can’t flat out explain what to do here. Instead, we’ll create one using the Wordpress specific query….

Ready.to then creates the XML file needed to add custom search to your top navigation bar. You can see where it puts the tool below:

Notice that I now have custom search option added to my Firefox Toolbar. That’s great, you’ve got an XML file, however if you upload the file to your blog and link to it, Firefox won’t know to execute the script. To do that you need to add a bit of javascript code to the header of your site and use another custom query for linking.

<script type="text/javascript">
<!--
function addp(csurl) {
try {
window.external.AddSearchProvider(csurl);
} catch (e) {
alert("You need to use Internet Explorer (7.0 or later)
or Firefox (2.0 or later) to install the OpenSearch plug-in.");
}}
//-->
</SCRIPT>

That script tells the browser what to do with the .xml file. Now we need to tell Firefox where to find it, and that it’s an executable and not just a linked file. We do this with the addp request defined in the header script…


<a href="#" onClick="addp("http://developertutorials.com/blog/DevTut.xml");">

This tells the browser that the file is executable, the script tells FireFox what to do with that executable (add it to the toolbar).

That’s it, if everything went well you’ve created a custom search tool for Firefox in about five minutes. You can get the Developer Tutorial Firefox Search Tool here.

This approach is quickly gaining popularity among the web development industry; Google is in essence inviting its few but most reliable users - the tech-savvy bleeding edge early-adopters - to run a broad end-user test from which the team can quickly work out what should make it into the core Gmail app. Gmail’s user base is very suitable for this, but even a quick message displayed to all users inviting them to join a beta test can identify a suitable cross-section of your user base.

Gone are the days of assembling elite teams of average end users or hiring professional agencies to conduct testing - just putting the features out there and inviting users to take them for a spin (and keeping an eye on them as they do) is the 2.0 of beta testing for proprietary applications. Open source projects have had public bug trackers for a while, and are generally effective in their beta testing, but the approach is inhibited by the user needing to take the initiative to submit a report. Access to the user while they interact with the application is the crucial aspect here; only SaaS can pull it off, and Gmail has done so masterfully.

So the next time you want some users to try out a feature, just hide it in a profile page or an account settings area, and quietly let your users know. Blog posts work great; the minority you’re aiming for are right within the group that would subscribe to your RSS feed. Let your users take care of the rest; transparently log their interactions with the features to see what they find useful and what they don’t. (External debugging suddenly makes a lot more sense when you know exactly what led to the problems.) Quite literally, “watch and learn” - this is beta testing evolved.

HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class. The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections.

HTML 4

vs.

HTML 5

It would seem that HTML5 is fully embracing semantic markup. Here’s an example of how your actual document might look:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

All of this is extremely exciting and will make coding for the web much faster and much more accessible.

Read the entire article here.

1. Brainstorm / Don’t Overthink
   One problem many designers have is that they overthink things trying to deliberately stand out from the crowd. That’s good and if you’ve got the time to think about what your going to do longer than you actually design anything, then go for it. Most of us don’t have the time for that, we’ve got deadlines.

   Instead I when I’m designing logos I usually spend no more than 15 minutes trying to pinpoint the fundamentals of a client’s service. This company was called WeWorkForFree, a group that uses web technology to raise money for developmental programs around the globe.

   My brain storm went something like this: web, world, technology, globe, aid.

   That’s it. In fact, one might go so far as to say your brainstorm session should be a bit like picking keywords for SEO. Be brief and as acurate as possible, then use those words as the basis for your design.

2. MockUp With Varying Colors and Fonts
   Whenever I’m designing for a client I bounce roughs off my girlfriend to get her opinions. She’s not a designer and is very much left brained. When I show her stuff I deliberately change the colors, inverting and reversing as I see fit. Sometimes simply changing one color can change a logo design from “good” to “bad”, to her, and vice-versa. This forces me to try new things and it helps me focus on just how much color can bring to, or take away from a design.

   Do the same thing with your fonts, once you’ve come up with a design try the same thing with a handful of different fonts. It can make a world of difference.

3. Focus on Filtering
   Much like the brainstorming process, I tend to eliminate the amount of time I’m just spinning my wheels working on stuff for no reason. This means I also limit my variations to between 5 or 7 major ideas. After I finish those I take the strongest ones and start working on variations. I can usually weed out the weakest ideas immediately allowing me to focus on variations of the stronger ones. This inner filter keeps me quick and efficient with my own time.
4. Build a Narrative
   Assuming your designer knows nothing about design, sometimes it helps to frame your mindset for them before and after you are presenting a mockup sheet. Be brief! Give a one or two sentence pitch as to what lead you to your result. For me (the design you’ll see below) it was something like, “I wanted to emphasize the global nature of the group as it relates to both the internet and your international work.” Bam. They can’t say you didn’t give it any thought. Now show your image and pay very close attention. The initial reaction of your client is the most important one they’ll ever give you. Do they blink? Do they say “Hrmph?” Do they make a huge grin? Try to ‘read them’ and you’ll be able to prepare yourself for praise or rejection.

   If they don’t like it, don’t try to convince them. Be friendly, agree and just get back to work. Arguing with them will only equal a headache…especially when it comes time to invoice them. If they do like your work, then it’s okay expand upon your thought process, reaffirming their interest and delight.

5. Think Big
   The biggest thing you need to make sure of is that your logo will scale both in size and in terms of a widespread campaign. Will your logo translate to black and white? Could it be replicated as a stamp? Could it be presented with any variation of colors? In my world, all the best logos or brand identities maximize minimalism. They work no matter where they’re needed. For my logo I created one that was easily translatable to black and white, then I did different variations of the same logo web2.0 style, adding a bit of depth and lots of color.

   Pretend that every client you take on is one day going have a brand as ubiquitous as Starbucks or McDonald’s. Would your logo still work? Good because if it wouldn’t you’ll ned to wash, rinse and repeat.

The image below is the final comp-sheet I put together, take a look and let me know what you think.

05. PSD Tuts (Tie)

Founder(s) - Unknown
History - PSDTUTS is a blog/photoshop site made to house and showcase some of the best Photoshop tutorials around. We publish tutorials that not only produce great graphics and effects, but explain in a friendly, approachable manner.
About the Brand - A strong thematic cohesiveness throughout their family of websites.
Alexa.com Ranking - 14,664
Other Properties - audiojungle.com, flashden.com
Ideas for Growth - Their team has successfully created a design and tutorial blog, the audio search engine and a monetized flash resource site. They should take the business model they used for Flashden.net and apply it to resources for AfterEffects or Premier. Alternatively they could create a portal for scripts like Hotscripts.com

05. Colour Lovers (Tie)

Founder(s) - Darius A Monsef IV
History - The founder says, “Our site is edgy, revolutionary, and works from the bottom up, not from the top down. It represents a new way to think about color and design. Our approach is based on the open source and common license concept. We gather creative professionals into an online community where they can share ideas about color and influence others.”
About the Brand - ColourLovers relies primarily on user generated content. It takes images uploaded to it’s service and parses those images for color data. Users can then share patterns, color palettes and monitor color trends of popular magazines. The brand is the application and the focus (color). The logo is basic and unforgettable otherwise. The ‘proper’ english “u” in Colour could be also be considered part of it’s branding because it’s distinct.
Alexa.com Ranking - 14,438
Other Properties - Colourlovers Store that sells t-shirts, NoteCards, MiniCards & Stickers
Ideas for Growth - Darius built a social network around one of the elusive aspects of design, color. He also made a useful resource for designers trying to come up with color schemes for their websites. He might try doing the same thing for fonts or extend his cadre of color enthusiasts into a network of fashion or product designers.

04. Brusheezy

Founder(s) - Unknown
History - Brusheezy is a website where you can find yourself alot of high quality Photoshop Brushes and Patterns too, there is also a resource section that points out books and other resources that are good for learning and enhancing the Photoshop Package itself. All Brushes should work on all versions of Photoshop unless otherwise stated.
About the Brand - The ‘eeZy’ brand is strong because it’s so unique, fun and recognizable. The slogan “Stupid name. Good ________” is equally memorable. All the sites in their network feature similar logos and similar designs which is smart. Unfortunately the owners don’t seem to understand branding web products, as it’s not always easy to get from one site to another without know what you’re looking for in advance.
Alexa.com Ranking - 9,293
Other Properties - vecteey.com, flasheezy.com, and fresheezy.com
Ideas for Growth - All of these offerings essentially occur in walled gardens. The Eezy Group may want to do the obvious and consider building a social network around their content. The apparent partnership with GoMedia is smart. If the owners of the Eezy brand are also the owners of GoMedia or partners in the company, they’ve got the right idea. They use free content to sell premium content. If I were them I’d work on building a cohesive brand for both divisions and expanding my offerings from just content for design programs to plug-ins and upgrades.

03. Smashing Magazine

Founder(s) - Smashing Magazine is maintained by Sven Lennartz, the owner of the Dr. Web Magazine and Dr. Web Weblog and Vitaly Friedman, the creator of The Web Developer’s Handbook and the book author of Praxisbuch Web 2.0.
History - Founded in September 2006, Smashing Magazine delivers useful and innovative information for designers and web-developers.
About the Brand - Smashing Magazine is one of my favorite places on the internet. They offer great tutorials, articles, resources and information related to graphic design, web design, and typography. Their logo (a tilted “S” in a square) is strong, easily recognizable and memorable.
Alexa.com Ranking - 8,524
Other Properties - jobs.smashingmagazine.com
Ideas for Growth - Smashing already covers design and design resources better than almost any blog out there. The next obvious step is to try a printed publication along the likes of ComputerArt, Photoshop User or Layers Magazine. Or, perhaps, they might try similar product devoted to cinematography and filmmaking.

02. Mashable

Founder(s) - Pete Cashmore
History - Mashable is a social networking news blog. With allegedly over 5 million monthly pageviews it ranks among the most popular blogs on the Internet. Mashable regularly writes about MySpace, YouTube, Bebo, Facebook, and Xanga, but it also reports on less high-profile social networking sites. The website also features its own social network, customized profiles, and MySpace layouts.
About the Brand - While Mashable has done very little to expand beyond it’s current offerings the name is probably one of the most easily recognizable on the web. Thanks to appearing in Mashable vidcasts, founder Pete Cashmore, has become something of a ‘web celebrity’. Partnerships with companies like Aux Interactive and ACS SEO make Mashable a great resource for companies looking to develop their ideas.
Alexa.com Ranking - 3,490
Other Properties - Mashmeets and Events, Mashcodes, fr.mashable.com, my.mashable.com
Ideas for Growth - Mashable is all over the place offering free software products, a thriving social network, design resources, social media news, industry information and a whole lot more. It seems that much like the Carsonified people, Mashable is targeting the event planning and tradeshow world next. What’s next? Mashable’s social network places an emphasis on user content and social links. I think they “get it” enough that they’ll target creating more social media applications.

01. Sitepoint

Founder(s) - Matt Mickiewicz and Mark Harbottle
History - SitePoint is a fast growing online media company and information provider targeting the Web professional market, specifically Web Developers and Designers. The company has five major revenue streams: advertising and sponsorship, content-based products both online and in retail, software, and more recently streaming video subscriptions and classified listings.
About the Brand - As you can see from their Alexa.com rating, Sitepoint is in the upper-echelon of heavily trafficked sites on the internet. Pulling four digits on Alexa equal hundreds of thousands, if not millions of hits, daily! Of course traffic alone doesn’t equal a strong brand. Sitepoint.com has created their brand by offering an easily identifiable site good advice, great tutorials and tips that range in topics from development, to operating a small business to design tips.

Their ‘Marketplace’ (think Craigslist for web developers) is one of THE most popular places for people to list jobs and recruit talent (for both longterm and shortterm projects). It’s also the #1 place to buy and sell web property. Their Marketing Kits (otherwise known as e-books) benefit users as well as generating some healthy revenue. Beyond that they’ve extended their brand offline with a strong publishing division. They recently spun off their marketplace for designers into it’s own site 99Designs, brilliantly giving it a slightly different look so as to appeal to creatives.

It’s one of those companies that pretty much does everything well to the point where each of their products are healthy competition individually as it they are combined. For that Sitepoint.com is given the undisputed crown!
Alexa.com Ranking - 1,817
Other Properties - 99designs.com, Sitepoint Publishing, Reference Point
Ideas for Growth - I can only dream of being in a position where I can make the decisions that move a site like sitepoint.com! Still there is one frontier that I think SiePoint is already well poised to exploit…. software development. If they could spin their huge userbase into a market for a web software product they’d be a HUGE problem. More likely though, they’ll next take their brands to the mobile market offering ebook downloads and streaming media.

This list was compiled and ordered by relevancy as well as their influence on the design community at large. I looked at each groups branding, site design, logo design, the strength of content and resources offered. I also looked at the number of properties each had. Alexa rankings were used to estimate site traffic although a high Alexa ranking did not always equal a higher ranking on this list. I did all this so as not to appear to be biased towards any particular blog or group.

To get on this list entities needed to be web based (so as to exclude existing magazines with high print circulation) and they had to be generally accepted by the public as being pretty damn awesome. This list by Just Creative Design is a more comprehensive list of everything that’s out there for designers. These sites are the 500-pound gorillas of the design community and are incredibly successful (and many of them are incredibly lucrative for the owners).

10. WP Designer

Founder(s) - Small Potato
History - Small Potato says “I started Wpdesigner.com back in May 2006 because I was not happy with the quality of free WordPress themes at that time and decided to learn how to create one for myself and release it for free. Gradually, Wpdesigner turned from a simple place where I release free themes into a blog, which covered WordPress tips, tutorials, and general web development topics. Along with more than 50 free WordPress themes, I managed to put together a series of articles on how to create a WordPress theme scratch, which is the most popular series of this blog.”
About the Brand - Wpdesigner.com was recently sold and the new owner Pawel Ciszewski better stay on his game because he could really ruin what has become an incredible resource for Wordpress Designers and users. The original logo was amateurish but the choice of colors and the design of the site is what branded it so well.
Alexa.com Ranking - 84,743
Other Properties - Theme Club upgrade that is $5 per year offers exclusives that normal users don’t get
Ideas for Growth - I’m not sure what Small Potato was thinking when he sold what had become one of the most well liked Wordpress theme sites on the net. He had a solid business model with the Theme Club and a lot of fans. I suggest the new owner focus on branching out into custom design and theme’s a-la-cart for purchase while continuing to release exclusive free themes to Theme Club members and free themes for the general public.

09. Design Flavr

Founder(s) - Andrew Greig
History - DesignFlavr is a breed of website that hopes to deliver the latest and freshest art and design straight to you with no frills and no hassle. The concept behind this website is to help support the vast and ever growing number of Designers and Artists that reside here on the World Wide Web.
About the Brand - The logo is one of the weakest on this list. They’ve got a leaf for their logo which initially strikes me as having nothing to do with the nature of their work. The minimalist layout, however, can easily be used to brand other sites.
Alexa.com Ranking - 102,463
Other Properties - none
Ideas for Growth - DesignFlavr should move into the niche network of DIY, aspiring fashion designers. Their UI would be great for rating outfits and fashion photography.

08. Bittbox

Founder(s) - unknown
History - Bittbox has been offering free resources for Photoshop for atleast two years now.
About the Brand - While Bittbox itself doesn’t have that impressive of a brand, the reach of the site and it’s impact on the design industry has been MASSIVE! A quote from one of the owners, “It’s always nice to see people put BB freebies to good use, but there’s no way to spot them all. I was flipping through Rolling Stone over the weekend and spotted some of my Illustrator brushes (teardrop foliage) in an ad for Bonnaroo 2008, a huge music & arts festival in Tennessee.”
I too hacve spotted their resources all over the place from flyers and business to TV commercials!
Alexa.com Ranking - 22,750
Other Properties - Outside of a solid Flickr Group, nothing.
Ideas for Growth - It’s unfortunate that the Bitt people haven’t expanded and if they have, it’s unfortunate that they haven’t realized the power of associating their other ventures with BB. Outside of the obvious (a Design firm) I suggest the Bitt people move into a land so far unknown to them….motion graphics. They could give away scripts and resources for Adobe Premier and other programs like Avid and FinalCut.

07. ThinkVitamin

Founder(s) - Ryan and Gillian Carson
History - I’m not sure how long it’s been around but in March 2007 Vitamin won the SXSW Award for Best Educational Resource.
About the Brand - Largely discusses web applications and the development of social media applications. The site has a very distinctive look much like all the work of the Carsonified design team does. Outside of ThinkVitamin the Carsons also coordinate the massive Future Of web conferences that happen around the globe and use content recorded there to create insightful and useful podcasts.
Alexa.com Ranking - 132,185
Other Properties - carsonified.com, futureofwebapps.com, futureofmobile.com, futureofwebdesign.com and dropsend.com
Ideas for Growth - The Carsons are already media planners, web developers, bloggers and event planners there isn’t much left they don’t do! That said, I think their inevitable next big push should be into Branding, PR and Marketing, after all, they’re already experts!

06. Behance Network

Founder(s) - unknown
History - unknown
About the Brand - Behance has created a solid brand around beautiful professional and minimalist design. The logo itself, is excellent looking somewhat like an element on the periodic table. They’ve got a web magazine, a new social network for designers and incredible shop of unique and well designed products!
Alexa.com Ranking - 117,857
Other Properties - behance.net (social network), creativesoutfitter.com (store), and behancemag.com (web magazine)
Ideas for Growth - If I were in charge of Behance my next target would be the fashion industry tapping my social network of designers for ideas similar to threadless.com

Read Part 2

1. Quickly Find Page/Post ID

One question people often ask is how to find a Page or Post ID when you’re using custom permalinks. Custom permalinks rewrite your URLs to be easier to read and memorable. Finding the ID of a post is not as tricky as it looks. Simply log into to your admin panel and click “Manage” then select either posts or pages. Find the item that you need the ID of and click your post to edit it. In the navigation bar of your browser, you will see a IRL for editing this post. At the very end of this URL you’ll find your post or page ID number!

2. Custom Front Page

Another common problem is people having trouble figuring out how to create a custom front page that doesn’t look exactly like the rest of their blog. This has never been too obvious but it is simple enough to do.

1. 1. Open a blank document in a text editor. Then paste the following codes in it:

   	<?php
   	/*
   	Template Name: YourCustomPageTemplateName
   
   	*/
   	?>
   
   	<html>
   

2. 2. Save the new page template as a .php file. Something like static.php but make sure you do not call it page.php because that file already exists as part of your theme. Then upload it to your hosting account in the root folder of your current WordPress theme (http://yourblog/blog/wp-content/themes/default. Where default is the active theme.).
3. 3. Now you can design this page however you wish either in your text editor or in the ‘Design’ tab of Wordpress. I usually copy and paste everything I want to keep from the preexisting page.php that I want to keep, leaving out things like the sidebar and footer.
4. 4. When you create a new page under ‘Write’ you will notice a new area below the content area called “Page Template”.

   

   Here you will select ‘YourCustomPageTemplateName’. When you publish it, only this page will look like your design for ’static.php’ or whatever you called your custom page theme.

5. 5. To set this as the front page click ‘Options’ then the ‘Reading’ subpanel. Choose the Static Page option, specify your new custom page as the front page. To see this in action click here.

3. Password Protect Wordpress

A growing trend is to use Wordpress as a CMS to sell premium content. This means the owner may want certain sections of their blog to be free, while the rest is a paid premium. For example http://www.wpdesigner.com/ is a wordpress theme site that offers a free content but only people who subscribe get the premium content. How is this done? You’ll need to password protect wordpress. Here are some options for doing that:

Password Protect by User level - allows you to create member classes that can have different content privileges than other classes. (ex. premium subscribers)
.htaccess Password Generator - a free way to protect your content, this option password protects EVERYTHING
Bravenet - an inexpensive solution that offers protection for sites that it hosts

4. Protect from the ‘Digg Efect’ with HTML

Has Digg brought your site to a grinding halt? Are you sick of waking up to find out your site has been down for hours and you’ve had no idea? WP Super Cache will save your page from the hundreds of visitors per second that Digg can bring by caching pages and serving less server heavy html pages.

5. Stop Hackers

Occasionally you may attract some unwanted attention to your blog from either people jealous of your success or people just looking to cause damage. How can you discourage people from hacking your site? Try the following:

1. Protect the Admin Folder - This folder is the door to the rest of your blog so putting up a fortified fence will help prevent attacks.
2. Deny Access to Other Folders - Many web hosts by default allow people to browse a folder if there is no default index.html file. Adding a blank index.html file to these folders will add an extra level of protection.
3. Remove the Wordpress Version - Hackers look for vulnerabilities that they sometimes know exist in specific versions of your CMS, if they can’t figure out what version you’re using it will make it that much harder for them to know which vulnerabilities to exploit. Try this plugin which does exactly that.

So far I’ve released two themes: Tech Blogger and Unstandard Remix). A third, my first completely original theme, is still in development but I released it early for the sake of my tutorial.

What do you need to do when you’re releasing your first theme be it modified or bespoke? Here’s a checklist:

• Include a readme.txt file. This file should contain installation instructions, release info and any notes you want the reader to be aware of before using your theme. It really sucks when novices are downloading themes only to be 100% confused by what they’ve downloaded. It only means that they may delete your theme and download another one that they can more easily digest. If your goal is maximum adoption, that’s not the route you want to go.
• Test it. Think of every scenario you can possibly remember from your own blog use. Try to be the use, do all the things that you think no one would ever do because (rest assured) that person is out there. Are all your links functioning? Are all your pages displaying correctly? If not, is your 404.php page popping up when it should? Make sure you’ve thought of EVERY possible scenario before you release your theme. I can’t tell you how annoying it is download a theme that you like only to spend the next few hours debugging it to make it truly functional.



• Organize it. You want your theme to be well organized so that it doesn’t take any longer than necessary to install and use it. Put your actual theme in a parent folder labeled ‘theme’ so the user can just drag and drop. Place any plug-ins or widgets your theme uses in a parent folder called ‘plugins’ so that the user can do the same. If you’re including .psd label those in a folder that tells the user what it is.
• Compress it. You’ll be hard-pressed to find a file host that makes it easy to share uncompressed folders. This is because a folder is a directory and if you upload it virtually any service online it will be treated like a directory (if accepted at all). Compress the file as either a .zip, .sit, .gzip or .tar.gz file. This will make the files faster to download and it will allow the user to download with one click instead of several
• Publish it. Where will your theme live online? Do you want it on your own web server or do you want it hosted on at repository like themes.wordpress.net? I prefer to use repositories or file hosting services like mediafire.com
• Announce it. Unless a lot of people read your bog or visit your website, there’s no way for people to know what you’ve done. If you’ve posted your theme to a repository like themes.wordpress.net then the job is already done. However, you should tell your friends and submit it to some other sites so that the world is aware.

So far we’ve made a ton of progress with our theme design. We designed it in Photoshop, we converted to XHTML and then we began the somewhat tedious task of adding PHP. Now that we’ve created index.php, header.php, footer.php and sidebar.php, we can move on to creating the rest of the theme.

In “The Anatomy of a Wordpress Theme” we noted that Wordpress needs certain files for your theme to function properly. Here’s that list again:

1. 404 Template = 404.php
2. Archive Template = archive.php
3. Archive Index Page = archives.php
4. Comments Template = comments.php
5. Footer Template = footer.php
6. Header Template = header.php
7. Links = links.php
8. Main Template = index.php
9. Page Template = page.php
10. Popup Comments Template = comments-popup.php
11. Post Template = single.php
12. Search Form = searchform.php
13. Search Template = search.php
14. Sidebar Template = sidebar.php
15. Stylesheet = style.css

As you may have noticed, the items listed in bold are the only items we’ve created in our lessons thus far and there is still a lot of work to be done! Anything struck through is optional therefore this lesson won’t cover it but I have linked to pages where you can read about them on your own. While I can’t go into complete detail I will highlight some major points about each and then I’ll give you links to four sites that break the process down in detail and more thoroughly:

single.php

Single.php is the file referenced when someone clicks on the permalink for one of your posts. Thus it is the template for displaying a single post on your blog. On most blogs single.php an index.php are very similar except that in addition to querying <? the content(); ?> we also have to query the comments page. We do this just before we close the loop with:

	<?php comments_template(); ?>

page.php

Page.php is the template for any page in your theme that doesn’t have it’s own .php template or that is not a blog entry. This is also the template for the static “Pages” that you create within the Wordpress Admin panel. It is usually also just like index.php except that it doesn’t include the loop or the_content().

links.php

Ignores Page content and instead displays your links using get_links_list.

404.php

Where you users land when they follow a bad link on your blog or click through to something that’s been removed. Codex offers some advice….

While you work hard to make sure that every link actually goes to a specific web page on your site, there is always a chance that a link clicked will slam dunk and become a famous 404 ERROR PAGE NOT FOUND. Some errors are avoidable, you should regularly check and double check all your links. Also, if you are deleting a popular but out-of-date post, consider deleting the body of the post, and replacing it with a link referring visitors to the new page.

This concludes “Designing and Coding a Wordpress theme from Scratch” . This guide was written as a starting point and a reference guide I can always be contacted at jongos [at] gmail if you are having trouble or need advice. Alternatively I’ve compiled a list of resources that I often reference when creating themes below.

In this tutorial I mentioned a theme that I was developing quite a bit. You can download it along with the PSD used to create it here. Keep in mind that the version you’re downloading is an early beta release. It’s bulky, clunky, not very pretty under the covers and has a mind of it’s own so I’m dubbing it the Rosie O Donnell release. Feel free to give me feedback on it, use it to double check your own code, or modify it to suit your needs.

DOWNLOAD THE AQUA MARINA WORDPRESS THEME

Stepping_Into_Templates
HTML to XHTML
So You Want To Create Wordpress Themes
From XHTML/CSS to Wordpress
Tamba2’s Guide
Slizing a Wordpress Theme

Wordpress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability as the makers proudly proclaim at wordpress.org. The keyword there being ‘publishing’ and the most important part of the Wordpress publishing engine is the element that allows content to be published online easily and automatically. This element is called the the loop.

While I can’t get into all the operational mechanics of how Wordpress works here, I can refer you to a page that does offer more in depth analysis (here). What is important to this tutorial is that the Wordpress theme we designed in Photoshop needs this PHP function (along with a few others) to correctly fetch content from the database. Let’s examine four critical functions:

<?php query_posts();?>
Requests the database of content, should be placed near the top of index.php
just after the request <?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
this is The Loop and it should be placed prior to
where you want your content to print

<?php the_content(''); ?>
Calls and prints the content of your blog according to the settings in the
admin section or php functions called before it.  This should be placed wherever
you want your blog posts to go within the <div> tags.

<?php endif; ?>
Closes the loop.

Using the code from Part 7 as an example:

<?php get_header(); ?>
<?php query_posts();?>

    </div>

	<div id="post">
	  <div class="entry">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<div class="posts">
	<?php the_excerpt(''); ?>
     		</div>   

	<?php endif; ?>
	  </div>
     </div>

<?php get_footer(); ?>

You may notice that the <div> tags with id and class=”posts”elements. These are styling anything they contain. My id=”post” is printing my photoshoped content area. The area with id=”class” is formating how my content will be formated. Do I want to justify text? Do I want to use a text-transform on the first letter? Change the color of text? All those types of styles should be applied to this class to be passed on to the text inside the container.

These three lines alone are essentially all you need for index.php in your theme. However, you’ll notice that we’re missing a few important items. We need to call and style the posts name, permalink, and meta data individually. This means we need to add the following:

<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
Requests the post tile and links to it. Place this before the post content.

<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?>
<?php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?>
Requests various types of information related to the post.  Place this just after the previous line.

<?php the_category(', ') ?> <?php the_tags('| Tags: ', ', ', ''); ?>
<?php edit_post_link('| Edit', '', ''); ?></p>
This calls the footer meta information for each individual post.
Place this after the content but before you close the loop.

After placing these codes my index.php looks something like this:

<?php get_header(); ?>
<?php query_posts("showposts=2");?>

	<div id="post">
	<div class="entry">
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

   	<span class="postname"><a href="<?php the_permalink() ?>"><?php
 the_title(); ?></a></span>

    	<p class="postinfo">

		<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> <?
php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?></p>

	<div class="posts">
    		<?php the_content(''); ?>
         	<p class="postinfo">Posted in <?php the_category(', ') ?> <?php
 the_tags('| Tags: ', ', ', ''); ?> <?php edit_post_link('| Edit', '', ''); ?>
</p>

     	</div>   

		<?php endif; ?>
	</div>
	</div>

    		<?php get_footer(); ?>

In Part 9 we’ll be discussing how to correctly markup header.php, footer.php and footer.php and in Part 10 we’ll create the other pages Wordpress needs.