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.

Because Wordpress is fundamentally a PHP system we can add a few snippets of code to make our header, footer and sidebar files dynamic.

Marking Up Header.php

Your blog header file usually contains the title of your site linked to the homepage. In an HTML page we would simply add text or place an image and link to the homepage using <a href=”"></a>. The key to making our Wordpress theme, however, is we need to make all our links relative so that the end user can install the theme and use it with their own unique site with as little fuss as possible. It should just work.

How is this done? We use PHP requests to request and print the blog title allowing it to be dynamically relative to the database.

The code for a text blog title:

	<div class="blogtitle"><a href="<?php bloginfo('url'); ?>/">
	<?php bloginfo('name'); ?></a></div>

The code for an image blog title:

	<div class="blogtitle"><a href="<?php bloginfo('url'); ?>/">
	<img src="your/image/path.jpg" title="<?php bloginfo('name'); ?>" />
	</a></div>

These are the only two codes we need to place in our header.php file. In my case I needed to request other PHP documents that are meant to be displayed before the document continues: the sidebar and the center rotating headline areas. I this did using this code:

	<?php require('yourphpfile.php'); ?>
	<?php get_sidebar(); ?>

Still confused? The image below contains a region map of my theme’s index.php as it displays in a browser. The red region represents “header.php”, the purple region represents “center.php”, the blue region represents “sidebar.php” and the green is the post area, the code for which is contained in index.php.

Because the format of my blog is unique to my design this may not apply to your own design, I just want to make sure everything is throughly explained so that when you download my theme in Part 10 you’ll understand how everything works.

Marking Up Footer.php

Footer.php is even easier because there’s no crucial PHP requests that need to go here to make it function. This means it can be entirely HTML or you can add a dynamic request for the blog title like you did above. You may want to try something like this:

	<div class="footer">©2008 <a href="<?php bloginfo('url'); ?>/">
	<?php bloginfo('name'); ?></a></div>

…which would simply display the copyright and year followed by the blog title.

Marking Up Sidebar.php

Sidebar.php is essentially the same in that it can contain nothing more than HTML or it can also contain PHP queries. Here are some popular PHP queries often used in sidebar.php:

	<strong>Display the Blogroll:</strong>
	<?php get_links_list(); ?>

	<strong>Display the pages of the site:</strong>
	<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

	<strong>Display the site's categories:</strong>
	<?php wp_list_cats(); ?>

I recommend reading “Customizing Your Sidebar” if you’d like to explore your options a bit more. In Part 10 we’ll create the other pages of our theme and then we’ll learn all about“Packaging a Wordpress Theme for Distribution”

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.

In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

Thus, we need to separate our inline CSS and put it in a separate file called style.css

Cleaning up Your XHTML

Let’s start by creating a blank document called style.css in the same directory as your HTML file. Open the CSS file and add the following information:

/*
Theme Name: your-themes-name
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number-optional

General comments/License Statement if any.
*/

like so

Now let’s open the HTML file the Photoshop created for us which should look something like this.
The inline document is essentially divided for us already because everything between the <style> and </style> tags is going to be cut out of our html document and pasted into the CSS document just after the heading we just added. Let’s do that now, copy the style data out of the HTML document and into the CSS document and make sure that you close the tags once you’ve done so.

The resulting HTML file should now look like this:

and the CSS file like this:

Got it? Now lets do some major cleaning. Now that we’ve removed the style from our HTML we need to add it back. We’re going to replace the empty <style> tags with the following line:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

This line is telling our document some very useful information:

1. rel - the relationship of the linked document to the current document
2. href - the url to the linked document
3. type - the MIME (Multipurpose Internet Mail Extension) type of the target URL
4. media - denotes on which device the document is meant to be displayed

or the translation for humans: “Hello, the text file that lives at this URL is a stylesheet that was made for use with documents that would be displayed on computer monitors and screens.”

We have to do this because we’ve taken out the style information but since we still want to style our HTML document we have to tell it where the style information now lives. Next we want to empty all our <div> tags.

Since all our our photoshop images are essentially background images any line from our HTML document that looks like this:

   <div id="aqua-01_">
	<img id="yourfilename_01" src="yourfilename_01.png" width="549"
                  height="126" alt="" />
   </div>

Should be changed to look like this:

	<div id="aqua-01_">
	</div>

But only when you change the corresponding ID container the CSS document to look like this:

	#aqua-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:549px;
	height:126px;
	background:url(images/aqua_01.png);
	}

What we’ve done is taken the image out of the <div> container in our HTML document and placed in the corresponding ID container in CSS. This is important because now we can put other things like text or other images into the HTML files <div> container. This will also allow our page to structure itself properly even if a few images are slow to load.

Finally we want to take anything that is an image and place it in a folder called “img” or “images”. If you look at the code above I’m telling the CSS to look for image files in a folder called “images”. We want to do this for organizational purposes. Of course this is entirely optional but it’s good practice and somewhat of an organizational standard.

Are you still confused?
Download these files and examine them to see if you can figure out what I did to make the page render properly.

In the next lesson we’re going learn how to optimize our page for speed using javascript. Sweating yet? Don’t worry we’re already a lot closer than when we started!

Photoshop to XHTML in 24 Hours

So we’ve all seen those ads for websites that say they can “Photoshop to XHTML/CSS in X Ammount of time” right? No? well here’s 39 of them. What exactly are these service doing that you can’t as the theme designer? Nothing. If you feel so inclined, save yourself the fee (usually around $100 or so dollars) and do it yourself!

• 1. Select File > Save For Web and Devices



• 2. Click the arrow in the top right to optimize your websites color and download time. I usually don’t optimize for anything slower than 56Kbps because I use another technique which you’ll find out about in Part 4.



• 3. Under preset select whether you want to use PNG, JPEG, or GIF formats and the various quality settings for each.
• 4. Click “Save”.
• 5. A window will pop up. Here You want to set Format to “HTML and Images”. Under settings select Other



• 6. You’re going to set four options. For HTML you want to make sure ‘Output XHTML’ is selected. For Slices you want to make sure ‘Generate CSS’ is selected instead of ‘Generate Table’. Skip the remaining two options Background and Saving Files, they aren’t particularly necessary.

  >

• 7. Save the file, navigate to and open the resulting HTML file in your text editor. You’ll notice that Photoshop CSS has annoyingly put all your images inline with your HTML, meaning it’s not in a separate stylesheet like it should be.

In the next step we’ll discuss how to go from inline XHTML to the two file (.html & .css) standard that will be needed to mark up the design to php.

Layout and Structure

This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:

Let’s compare the sketch to the finished theme:

As you can see my marked up design remains fundamentally similar to the original concept sketch.

Designing WordPress Themes in Photoshop

We’ve got our sketch, lets open up Photoshop and start designing. Since every design is different, I won’t bother explaining every single choice I made, instead I’m going to give you some tips on laying out your design so that it can be successfully marked up for the web.

1. 1. Work to a grid. I don’t necessarily mean the grid that you get when you type Command+’ but rather working to a structurally sound grid that corresponds to the golden ratio or the rule of thirds. This is because Photoshop has to ’slice’ your resulting design into rectangles and if you keep it in mind while you design, that can be done easily at the end.

In the above picture you can see that I worked to a grid that I created using guides. As my design progressed, the grid got incredibly convoluted but these lines correspond in some way to the layout and skeleton of the site. I’d say this is even more important for minimal designs like my own.



2. 2. The fewer the slices the better. So when you finish your design you’ll slice it into sectors that will then be marked up to xhtml and subsequently php to create your theme. This the last thing you want is a 100 different areas to code separately. If you study the image below you’ll see that I had about 16 ’sliced areas’.

   

   Try not to have more than 20. Why? Because each of these slices are images that have to be downloaded and displayed when someone visits your website. The more images, the slower the load time will be for people with slower connections. Although in Part 5 I’ll show you how to optimize your image based website for speed, it’s better practice to have fewer slices.

3. 3. Make each content area it’s own slice. I can’t stress how important this is! For someone new to XHTML it can be incredibly hard to figure out how to float < div > tags so that content areas remain separate. The laymans solution? Don’t bother! If all your content is contained in < div > ’s for a specific image or ’slice’ you won’t have to.

   Another reason to do this is that if you have a content area that is divided into slices that cut up the content space, you’re going to have a much harder time trying to make the content display correctly over two background images.

4. 4. Work in color proof mode. When I’m designing for the web I’ve learned to work entirely, start to finish, in color proof mode (command+Y for Mac / control+y for Pc). This is because colors in Photoshop can be deceiving and if you aren’t using websafe colors, you need to make sure everything translates as you want it to. I explained this in more detail in a previous article here.
5. 5. Think in 3D.Your design should not be thought of as a flat surface. It has depth and the things that are different elevations should be treated the same. For instance, if you have text or images ontop of content areas in your design, you may want to call on them in the stylesheet instead of leaving ‘flat’ as part of the background images. Thus all stylized text like your header text or social bookmarking links should be images that are displayed with CSS. This is the second and topmost layer of your design with the layout existing below

Got all that? Let’s move on to Part 3 - Photoshop to XHTML in 24 Hours!

Tools for the Task

For clarification, here are all the tools I used in the making of this theme:

• A text editor like jEdit for hardcoding
• Photoshop CS3
• Wordpress 2.5
• MAMP
• Color Schemer Studio
• Firefox + Web Developer Extension (for Local Validation)
• NetRenderer (to see how your theme looks across browsers)

You don’t have to use the same tools, those are just the ones I use in my workflow.

Preparation

It’s important to remember these three things as well:

1. Take your time. If this is your first attempt at a wordpress theme, you’ll make a lot of mistakes. Just learn from them, the first time is never the best.
2. Use W3schools.com religiously! Why do people validate code, to maximize the exposure of their work. Learning to validate as you go will improve the quality of the work you produce and eventually make you faster.
3. Ask a lot of questions. If you get stuck please feel free to come back to this column and post questions as comments. Alternatively you can e-mail me at jongos [at] gmail to seek out additional advice but since I like to make information public, if you email me privately your questions may be posted here to help others.

The End Result:



Like what you see? Without further adieu let’s get started.

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-1-143/feed/ http://www.developertutorials.com/blog/web/whats-the-deal-with-open-source-licenses-73/ http://www.developertutorials.com/blog/web/whats-the-deal-with-open-source-licenses-73/#comments Sun, 09 Mar 2008 08:44:24 +0000 Akash Mehta http://www.developertutorials.com/blog/web/whats-the-deal-with-open-source-licenses-73/ So, you’re a decent web developer. You’ve written some nifty code, and now you want to share it with the world. But wait - what about licensing? Here’s a brief run down on what you need to know about open source licenses.

Disclaimer: Akash isn’t really a lawyer, and he’s certainly not your lawyer. None of this should be taken as legal advice; always research licenses and legalities before consenting to them. If in doubt, seek legal advice or try the Software Freedom Law Center.

When it comes to the legalities of open source licensing, there are arguments for all the different options - and there are hundreds. For open source PHP code, the most popular license is the GPL, however most major projects write their own license to suit their intentions. While this is a little over the top for just releasing a few snippets of code, or maybe a small application, it’s worth noting that not all licenses suit everyone, and it’s important to be aware of what releasing your code under a particular license means for you.

There are four main issues with open source licenses:

• Commercial / proprietary use of the code / software
• Obligation to release modifications to the code back to the community
• Obligation to make the code available to downstream users
• Revocability of the license at your discretion

You will have to consider your target audience and how flexible you want to be when deciding. For example, many die-hard open source fans balk at the mere idea of allowing a commercial entity to use their code. I recently contributed some code to a particular open source project, and was discussing licenses over MSN. When suggesting that “I wanted a particular company to use my code”, they quickly replied, “[this] is not the project for you.”.

You may not be terribly interested in licensing issues; in fact, have a read through the Wikipedia article on Beerware - it may be the best option for you.

If you want to know what’s going on with your code, consider using the GPL. With GPL licensed code, any modifications must be made available to the general community, and users of derivatives of your code must have access to the code. However, be aware that this could cause serious problems when working with other code licensed under a different license. In general, GPL code works best when used with other GPL code.

If you want to be a bit more lenient, try the BSD license, which permits proprietary use of your code. There’s also the MIT license - have a read through it - which basically gives your end users a lot of flexibility while protecting your liabilities.

Revocability is the final key issue. For example, take Trellis Desk, a product recently reviewed here on the DT blog as a “promising open source project”. ACCORD5, which develops Trellis Desk, essentially makes the code available. And that’s about it. By definition it isn’t actually open source; have a read through the license. They reserve the right to revoce your license to use the software at any time, and if they so desire, they can send you a notice within 48 hours of which you have to “destroy all copies of the software”. Open source inasfar as they provide the source code, but there’s no way they’d get that past the Open Source Initiative, which decides if a license is actually open source.

In general, if you must you can revoke a license, even if you don’t explicitly declare so in the license terms (unless, of course, you explicitly declare otherwise in the license terms) - although this can change based on geographic laws as well, e.g. a license in the United States may not hold up in Czech Republic.

A mature, well-written open source license will help you take care of legalities quickly and get on with writing code. My advice: pick one and stick with it. If in doubt, use the GPL; if you want to get your code out to more people, try BSD. If you really don’t care, go for Beerware, and if you want maximum flexibility, there’s always public domain.

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/web/whats-the-deal-with-open-source-licenses-73/feed/