Alexis Sellier — who also goes by Cloudhead — developed LESS to help himself and other coders write, well, less CSS.

Installing LESS

LESS is very simple to use. Just include the JavaScript file in the head section of an HTML document.

<script src="less-1.3.0.min.js"></script>

The stylesheet that contains the LESS descriptions, should proceed the library. Notice that the extension is “less” and the “rel” attribute value is “stylesheet/less.”

<link rel="stylesheet/less" media="all" href="style.less"/>
<script src="less-1.3.0.min.js"></script>

Using Variables with LESS

Variables, which are common in many languages, are not native to CSS, but LESS adds them. Declaring a LESS variable begins with the “@” symbol followed by the variable name, a colon, the value, and a semicolon.

Here are four examples that name font families, colors, and padding values.

@advert: 'Advent Pro', sans-serif;
@red: #9d0000;
@black: #111;
@pad: 5px 0 10px 50px;

These variables may be applied to any style definition. Notice the padding, background, and font-family declarations in the example.

header { 
	width: 100%;
	height: 35px;
	margin: 0;
	padding: @pad;
	background: @black * 7;
	color: white; 
	font-family: @advert;
	font-weight: normal;
}

LESS allows operations on variables too. Notice that the value of background declaration in the example above is actually the value of the @black variable times 7.

background: @black * 7;

Since the value of the variable @black is #111, when it is multiplied in LESS its value is changed to #777, which is a medium gray. To get a purer, if you will, black, 111 could have been subtracted from @black.

background: @black - 111;

Nested Rules

After variables, LESS’ nested rules are, perhaps, the most significant and useful tool the library provides, allowing rules to be applied to child elements in line with other style declarations.

As a minimal example, consider the case of adding a hover effect to a particular anchor tag.

a { 
	color: white;
	text-decoration: none;
	&:hover { text-decoration: underline; }	
}

Notice how both the standard and hover states are described in the same declaration. Below is how this same style description might look in CSS without LESS.

a {
	color: white;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

When just a single nested declaration is used, the LESS feature may not seem like it is doing much, but as the nested structure becomes more complicated, the benefits start to become obvious. Consider this style declaration for a nav element. Notice that the anchor tags, unordered list, and list items are all nested.

nav{ 
	width: 100%;
	margin: 10px 0 0 0;
	padding: @pad;
	background: @red;
	font-family: @advert; 
	font-size: 20px;
	a { 
		color: white;
		text-decoration: none;
		&:hover { text-decoration: underline; }	
	}
	ul{
		margin: 0;
		padding: 0;
		list-style: none;	
		li { 
			margin-right: 25px; 
			margin-top: 5px;
			display: inline; 
		}
	}
}

Applying Mixins

Another popular LESS feature is the ability to include mixins. Simply put, a mixin applies the style declarations from one class to another.

.science-fiction { margin: 50px 0 0 50px; }
#books { .science-fiction; }

In this example, both the science-fiction class and the books element would have the same margin value.

Mixins may also include variable values, similar to functions in other languages. In the example, below the science-fiction class would have a margin of 50px all around while the books element would have a margin of 25px all around.

.science-fiction ( @margin: 50px ) { margin: @margin}
#books { .science-fiction( 25px ); }

Summing Up

LESS is a JavaScript library built to extend CSS and allow coders to write effective and more concise style declarations. The library adds many features to CSS, including the support for variables, nested rules, and mixins, as described here.

This is just scratching the surface of what can be done with LESS, but it is a good start.

Lists, as a user interface, are not hard to describe. Simply, they list links, specifications, options, or navigation to make those elements easier for users to understand and use. A list’s versatility is the reason that list views are a very frequent component in mobile design.

A Basic List View

In the context of the jQuery Mobile Framework, the most basic list view is an unordered list with the data-role attribute of “listview.”

<ul data-role="listview" >
	<li><a href="suits.html">Suits</a></li>
	<li><a href="shirts.html">Shirts</a></li>
	<li><a href="ties.html">Ties</a></li>
	<li><a href="shoes.html">Shoes</a></li>
</ul>

The jQuery Mobile Framework will use a theme to render the unordered list as a finger-friendly interface. Don’t forget that for a list item to be tappable it should include an anchor element.

A basic list view example using jQuery Mobile Framework.

One point to remember is that jQuery Mobile will not wrap the list item’s content. Rather if the content width exceeds the available space, ellipses are used. As a rule, therefore, it is a good idea to limit the list item’s content.

Divided Lists

jQuery Mobile is also able to make divided lists or lists with sub-heads. These can be helpful for adding informational content. To create one of these dividers, which can be styled individually, add the data-role “divider” to a list item, which does not include a link.

<ul data-role="listview" >
	<li data-role="divider">Clothing</li>
	<li><a href="suits.html">Suits</a></li>
	<li><a href="shirts.html">Shirts</a></li>
	<li><a href="ties.html">Ties</a></li>
	<li data-role="divider" data-theme="g">Footwear</li>
	<li><a href="shoes.html">Shoes</a></li>
</ul>

jQuery Mobile also makes divided list views.

Creating Nested Lists

jQuery Mobile also supports using nested lists, which the platform treats like sub-pages. As an example, when a user clicks on an item in the parent list, the nested list is shown as a separate page. It is important to note that jQuery Mobile does not necessarily require each and every page to be a new HTML document. Rather a single HTML file many contain many mobile pages.

<ul data-role="listview" >
	<li><a href="womens.html">Women's</a></li>
	<li>Men's
		<ul data-role="listview" >
			<li data-role="divider">Clothing</li>
			<li><a href="suits.html">Suits</a></li>
			<li><a href="shirts.html">Shirts</a></li>
			<li><a href="ties.html">Ties</a></li>
			<li data-role="divider">Footwear</li>
			<li><a href="shoes.html">Shoes</a></li>
		</ul>
	</li>
</ul>

Nested lists show on a new mobile page.

Summing Up

The jQuery Mobile Framework supports enhanced list views. This article demonstrates three of the most basic forms of these lists, but there is almost infinitely more complexity available for the motivated mobile developer.

I have taken a pause, if you will, in the Alien Authority development, project to look back and make sure that I have the site functioning just the way I want it before move into the next major section of development.

This article in the 54th installment of a series created to demonstrate how to use WordPress to develop an ecommerce site that sells virtual products from start to finish. The series addresses the (a) site-planning process, (b) graphic design, (c) plugin selection, (d) payment processing setup, and (e) virtual product delivery. This series also provides specific site-coding examples.

The Series to Date

• Part One: Defining the Project
• Part Two: Logo and Color Palette
• Part Three: CSS Grid, Home Page Design
• Part Four: Facing Design Challenges
• Part Five: Install WordPress, Copy Theme
• Part Six: Create a Custom Post Type
• Part Seven: More Functions for the Custom Post Type
• Part Eight: Draft HTML5 Markup
• Part Nine: CSS Begins, Font Glitch
• Part Ten: CSS Work Continues
• Part 11: jQuery Lends a Hand
• Part 12: CSS for Articles, Newsletter
• Part 13: CSS for Social Links, the Footer
• Part 14: Tablet Layout Begins
• Part 15: Tablet Layout Continues
• Part 16: Articles and Videos Styled
• Part 17: 480-Pixel-Wide Footer
• Part 18: 480-Pixel CSS Coloring
• Part 19: Colors Like a Rainbow
• Part 20: The Next Size Up
• Part 21: Finishing the 640-pixel Wide Layout
• Part 22: The Remaining Layouts
• Part 23: Completing Remaining Layouts
• Part 24: Theme Building Begins
• Part 25: Switching Style Sheets
• Part 26: Completing the Header.php File
• Part 27: The WordPress Loop
• Part 28, Managing Thumbnails and Article Teasers
• Part 29: A Third Loop and the Footer
• Part 30: Newsletter Page Template and Database
• Part 31: Composing the Newsletter Form
• Part 32: Processing Newsletter Form Data
• Part 33: Integrating MailChimp
• Part 34: Modifying the Page Template
• Part 35: The Contact Form
• Part 36: When Users Submit
• Part 37: Additional CSS, and Getting Ready for RSS
• Part 38: Plugin Localization and Settings Link
• Part 39: Connecting to the Database Table
• Part 40: Adding a Style Sheet to a Plugin
• Part 41: Cloning Form Elements
• Part 42: Populating The Options Form
• Part 43: Showing and Hiding Options
• Part 44: Cleaning Up the Plugin
• Part 45: Get the RSS
• Part 46: Working the Feeds
• Part 47: Timing Cron-like Events in WordPress
• Part 48: Creating the First Digital Product
• Part 49: Presenting Individual Products
• Part 50: Displaying Category Pages
• Part 51: Adding Text to a PDF
• Part 52: Font Problems
• Part 53: Search the Past

In the previous article, I mentioned that I don’t believe there is any such thing as a perfect development project, and frankly when I am building a site as an illustration for an article series that project can become even more disjointed.

As such, I took a step back from my development schedule to really look through the Alien Authority website, which as you may know from earlier articles in this series will sell alien abduction certificates.

In the last installment, I made changes to the search form and the search results page.

In a similar fashion, in this article I am going to update the Alien Authority’s article and video category pages, or rather the template for these pages. At the moment this page does not display properly.

The Alien Authority site’s category pages were not displaying properly.

Create an Archive Page Template

To reformat this page — and give it the appropriate content — I created a new PHP document and gave it the standard WordPress template comment.

<?php
/**
 * The template for displaying Archive pages.
 *
 *
 * @package WordPress
 * @subpackage aa
 * @since aa 1.0
 */

get_header(); ?>

This file needs to be called archive.php or category.php, so that WordPress knows when to use it.

WordPress uses a template hierarchy to decide which template to use for a particular request. The archive.php file is the most generic archive-type template. For the Alien Authority site, it will be fine to manage category pages housing lists of articles, but I could have also chosen to be a bit more specific and named this file category.php. It is also possible to have archive type templates for authors, tags, taxonomies, dates, or even custom post types.

Next, the archive.php file needs a WordPress loop. The loop has been a common feature on every template created for the Alien Authority site.

<div id="content" role="main">

	<h1 class="page-title"><?php single_cat_title(); ?> </h1>
	<?php query_posts( 'posts_per_page=10' ); ?>
	<?php if ( have_posts() ) : ?>
	<?php /* Start the Loop */ ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<ul id="category-list">
				<li>
					<h3><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h3>		
					<?php the_excerpt(); ?>					
				</li>
			</ul>
		<?php endwhile; ?>
	<div class="pagination">
		<?php previous_posts_link(__('Newer Entries')) ?>
		<?php next_posts_link(__('Older Entries')) ?>
	</div> <!-- end .pagination -->

	<?php else : ?>

	<article id="post-0" class="post no-results not-found">
		<h1 class="entry-title">Nothing Found</h1>
	</article><!-- #post-0 -->

	<?php endif; wp_reset_query(); ?>

</div><!-- #content -->

For this particular loop, notice that I am setting the first h1 element to a value of the category’s title using the WordPress function single_cat_title().

<h1 class="page-title"><?php single_cat_title(); ?> </h1>

As with other loops, the content is added to the page using a while statement. One difference here, however, is that I have limited the page so that it shows just the most recent ten posts.

<?php query_posts( 'posts_per_page=10' ); ?>

Lower in the code, I reset the query.

<?php endif; wp_reset_query(); ?>

I also added pagination, so that users can click to see the next ten posts.

<div class="pagination">
	<?php previous_posts_link(__('Newer Entries')) ?>
	<?php next_posts_link(__('Older Entries')) ?>
</div> <!-- end .pagination -->

I also added the WordPress footer.

<?php get_footer(); ?>

I added some styles, leveraging the code used in the previous article. This code was from style.css.

/* SERP and Catalog */
ul#serp-list, ul#category-list { 
	margin: 0;
	padding: 0;
	list-style: none;
}

ul#serp-list li h3, ul#category-list li h3 { margin-bottom: 5px; }
ul#serp-list li p, ul#category-list li p { margin-top: 0; }

ul#category-list li { margin-bottom: 20px; border-bottom: 1px dotted #282828; }
ul#category-list li:last-child { border-bottom: none; }

With these changes, the category pages are now properly laid out.

The updated archive.php file lays out the category page.

Summing Up

In this article, I updated the archive.php file responsible for adding content to and laying out the category pages on the Alien Authority website.

Related Articles

• Book Review: The WordPress Anthology
• 29 New WordPress Tutorials
• WordPress Theme Development Part 1: Installation and Graphic Design

Here is a list of tools and tutorials for creating CSS3 buttons. There are CSS3 button generators, tutorials for creating buttons entirely in CSS3, and sets of CSS3 buttons to use in your design. All of these resources are free.

CSS3 Button Tools and Tutorials

CSS3 Button Generator. CSS3 Button Generator is a nice generator that displays a big red funky button to manipulate. It provides advanced options for font/text, box, border, background and hover.

Change the settings and view the results of this button generator.

–

CSS3-Tricks Button Maker. CSS3-Tricks Button Maker is a button generator with color selectors for top gradient, bottom gradient, top border, hover background, text, hover text, and active background.

Adjust this button generator’s selectors and preview the results.

–

CSS3 Linear Gradient Buttons Generator. This button maker allows you to adjust gradient, border, box, text, and button states. Enter your preferences and preview, then press Get Code.

Set this button generator, preview, then press Get Code.

–

CSS3 Button Generator. This is a simple button generator with options for background, border/padding, drop shadow, inner shadow, text font, and text shadows.

Create a button with background, border, shadow and text.

–

CSS Social Buttons. The purpose of CSS Social Buttons is to provide a cross-browser, consistent and versatile CSS that can be applied in any design, app or theme. Basically, it is one master style-sheet that contains various design styles.

Use these CSS social buttons in sizes and styles.

–

Animated Buttons with CSS3. This tutorial covers some CSS3 button experiments. The idea is to create some animated link elements with different styles, hover effects and active states.

Use this tutorial to create CSS3 button experiments.

–

Just Some Other Awesome CSS3 Buttons. In this tutorial, build some nice CSS3 buttons with icons. To create the icons, this set of CSS3 buttons uses HTML entities, gradients, shadows, and many other CSS3 features.

Build CSS3 buttons with icons.

–

Orman Clark’s Chunky 3D Web Buttons: The CSS3 Version. In this tutorial, learn to make CSS3 buttons based on a popular freebie Orman Clark made for his website Premium Pixel.

Learn to make chunky 3D CSS3 buttons.

–

CSS Buttons with Pseudo-elements. This tutorial shows you hot to create buttons with a twist, using one anchor tag per button and the power of CSS.

Create buttons with one anchor tag and CSS.

–

A Bunch of Soft, Customizable Pressure Buttons in CSS. This tutorial demonstrates how to create pressure style buttons. It uses multiple box shadows, a useful technique for adding depth when you don’t want to use gradients.

Create pressure style buttons in CSS, using box shadows.

–

A Set of Simple CSS3 Buttons. This is a simple set of pre-made but extensible CSS3 buttons available in several different colors, configurations or sizes.

Here is a set of CSS3 buttons in colors and sizes.

–

Code an Awesome Animated Download Button with CSS3. This tutorial creates a simple and fun download button using some fancy CSS3, border-radius, box-shadow, linear-gradients, z-index and transitions to achieve a unique double sliding drawer effect on hover.

Create a CSS3 download button with fancy effects.

–

How to Create CSS3 Buttons. In this tutorial, make some cool CSS3 buttons. These buttons are based on the Futurico User Interface by Vladimir Kudinov. Try to make a precise copy of them.

Create cool CSS3 buttons from a well-known design.

–

Free CSS3 Button Styles. These are 16 preset buttons included in this tutorial. Each one is very easy to modify and tweak to match the theme of your site. They are fully scalable and pure CSS.

Here is a set of pure CSS buttons to adjust for your site.

–

Fancy 3D-Button. Here is a simple button, styled with different box-shadows for a 3D-look. The first value of the box-shadow is to give height and depth to the button and the second value is to give shadow to it. There is nothing else in this buttons except this clever use of box shadows.

This is button uses box-shadows for a 3D appearance.

–

How to Create a Stylish Button Entirely with CSS3. This tutorial creates a button graphic entirely with CSS. Look at how CSS gradients, shadows, borders and transitions can all be combined to create a stylish button for your website.

Create a button entirely with CSS.

–

CSS3 Buttons Tutorial. CSS3 buttons have the advantage of being easier for screen readers to process, as well as being lighter on your page load times. This tutorial demonstrates how to use CSS to style links to look like buttons, with minimal hassle.

Use CSS to style links to look like buttons.

–

CSS3 Box-Shadow with Inset Values – The Aqua Button ReReVisited! This tutorial demonstrates how to create a cool CSS3 aqua button with no images.

Create a CSS3 aqua button.

–

Zardi. Zardi is a pack of CSS3-only buttons. Free and ready to use in various shapes and colors. These buttons were made by Horacio Bella in the creative space provided by Beew.

Use this pack of CSS3-only buttons.

Read More

- 18 HTML5 and CSS3 Generators
- 19 New CSS3 Tutorials
- 26 Resources for CSS3

Once downloaded and installed, jQuery Mobile can treat content from a single HTML5 file as separate pages. As an example, several similar products might be loaded in a single HTML5 file and then displayed as individual product detail pages.

This article takes a quick look at starting a jQuery mobile web application, and demonstrates how to treat sections of a single HTML5 document like individual pages.

Downloading and Including jQuery Mobile

At a minimum, employing the jQuery Mobile framework requires that you add to JavaScript libraries to the HTML5 markup. The first of these JavaScript files is the jQuery JavaScript Library, which may be downloaded from the jQuery website.

The jQuery Library may also be added to a mobile project from a content delivery network, which is recommended for most applications. But if it is important for the mobile web application to function offline, it may be better to actually download and include the library.

The second JavaScript file necessary, is — not surprisingly — the jQuery Mobile Framework.

These files should be added to the HTML5 markup so that the jQuery Library is listed before jQuery Mobile.

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.1.1.js"></script>

jQuery Mobile also requires a CSS file.

<link rel="stylesheet" media="all" href="jquery.mobile-1.1.1.css"/>

As mentioned above these files may also have been added from a content delivery network, or CDN.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

Create a Page

With the jQuery Mobile framework, it is possible to have more than one page in a single HTML5 file.

As an example, take a look at the following HTML5 markup, and notice the use the HTML5 data-* attributes.

<section data-role="page" id="pageone">
	<header data-role="header">
		<h1>Asics GELNimbus</h1>	
	</header>
	<div data-role="content" class="product-detail">
		<section class="ui-grid-a">
			<img class="ui-block-a" src="mens-asics-gel-nimbus-14-neon-yellow-navy-lightning.jpg" alt="Asics Gel-Nimbus 14 In Yellow">
			<div class="ui-block-b">
				<p>The GEL-Nimbus 14 brings with it a sleeker profile than its predecessors while maintaining its famously plush, yet stable ride.</p>
				<p id="price">$159.99</p>
			</div>
		</section>
		<button data-role="button">Add to Cart</button>	
		<a href="#pagetwo">Also available in Black</a>	
	</div>
</section><!-- #pageone -->

The primary section element has a data-role attribute of page. This attribute tells jQuery to treat this section as if it was its own page.

For the header element inside of this page a similar data-role is used. It will tell jQuery mobile to treat this element as the page header.

<header data-role="header">
	<h1>Asics GELNimbus</h1>	
</header>

Although it is only a section in an HTML5 document, this section is displayed like a page.

Notice also that the section element with the page data-role has an id of “pageone.” In jQuery Mobile, links between pages that are contained in a single HTML5 file are managed by calling the desired page’s (element’s) id. An example of this is found in the link near the bottom of the example code.

<a href="#pagetwo">Also available in Black</a>	

Add Columns

jQuery Mobile also makes it easy to display content in columns. To get a two-column layout, I added the class ui-grid-a to the included section element containing the product image and the product description.

Then each of the child elements in this section is also assigned a class name, ui-block-a and ui-block-b respectively.

<section class="ui-grid-a">
	<img class="ui-block-a" src="mens-asics-gel-nimbus-14-neon-yellow-navy-lightning.jpg" alt="Asics Gel-Nimbus 14 In Yellow">
	<div class="ui-block-b">
		<p>The GEL-Nimbus 14 brings with it a sleeker profile than its predecessors while maintaining its famously plush, yet stable ride.</p>
		<p id="price">$159.99</p>
	</div>
</section>

jQuery Mobile has other column options too. If the parent element — the section in the code above — had been given the class ui-grid-b, a three-column layout would have been implied. A class of ui-grid-c is for four-column layouts, and ui-grid-d is for five-column layouts.

The blocks within the parent element are also give class names wherein the trailing letter indicates the order.

Page in the Context of a Single File

To put this jQuery Mobile page into context, consider the HTML below. Notice that this is a single file, but that it contains two jQuery Mobile pages.

<!doctype html>
<html>

	<head>
		<meta charset="utf-8"/>
		
		<link rel="stylesheet" media="all" href="jquery.mobile-1.1.1.css"/>
		<script src="jquery-1.8.2.min.js"></script>
		<script src="jquery.mobile-1.1.1.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<style>
			.product-detail p { padding-left: 5px;}
			.product-detail img { border: 2px solid whitesmoke; }
		</style>
	</head>
	
	<body lang="en">
		<section data-role="page" id="pageone">
			<header data-role="header">
				<h1>Asics GELNimbus</h1>	
			</header>
			<div data-role="content" class="product-detail">
				<section class="ui-grid-a">
					<img class="ui-block-a" src="mens-asics-gel-nimbus-14-neon-yellow-navy-lightning.jpg" alt="Asics Gel-Nimbus 14 In Yellow">
					<div class="ui-block-b">
						<p>The GEL-Nimbus 14 brings with it a sleeker profile than its predecessors while maintaining its famously plush, yet stable ride.</p>
						<p id="price">$159.99</p>
					</div>
				</section>
				<button data-role="button">Add to Cart</button>	
				<a href="#pagetwo">Also available in Black</a>	
			</div>
		</section><!-- #pageone -->
		
		<section data-role="page" id="pagetwo">
			<header data-role="header">
				<h1>Asics GELNimbus</h1>	
			</header>
			<div data-role="content" class="product-detail">
				<section class="ui-grid-a">
					<img class="ui-block-a" src="mens-asics-gel-nimbus-14-black-digital-neon-orange.jpg" alt="Asics Gel-Nimbus 14 In Black">
					<div class="ui-block-b">
						<p>The GEL-Nimbus 14 brings with it a sleeker profile than its predecessors while maintaining its famously plush, yet stable ride.</p>
						<p id="price">$159.99</p>
					</div>
				</section>
				<button data-role="button">Add to Cart</button>	
				<a href="#pageone">Also available in Yellow</a>	
			</div>
		</section><!-- #pagetwo -->
		
	</body>
	
</html>

Clicking the link at the bottom of a page will initiate a page transition to the second enclosed page. As far as the app’s users will be concerned, these are separate pages.

Although the jQuery Mobile pages are in the same document they are displayed and linked as individual pages.

Summing Up

This article briefly described how to set up a jQuery Mobile application, create pages, and link between pages. Needles to say, the framework can be used to develop significantly more complex applications.

The Yii Framework was first released in December of 2008. It is built to (a) be very high performance, (b) use model, view, controller application architecture, and (c) promote clean, DRY (do not repeat yourself) code.

The framework’s creator, Qiang Xue, based much of Yii on his earlier PHP framework, Prado. In fact, Yii builds on everything Xue learned in Prado and was an effort to make a better, higher performance framework option for PHP developers. Yii also employs the convention-over-configuration paradigm made popular with Ruby on Rails, and is integrated with jQuery for Ajax and other client-side interaction.

Download and Unpack the Yii Framework

To get started with Yii, download the most recent stable version from the Yii website.

Unpack the associated archive file in the directory you want Yii to live. Not all of Yii’s files need to be in a web-accessible directory, so you have some flexibility.

The Yii download should contain three directories, demos, framework, and requirements as well as a few text documents including a copy of the license. The various framework components are located — not surprisingly — in the framework directory.

Check that Yii Requirements are Met

The requirements directory is home to an application that will compare a web server’s configuration to Yii’s basic requirements and dependencies. To run this requirements checker, simply point to the requirements directory from a web browser.

As an example, if Yii is installed on a local Apache2 web server in a directory called “yii” the path to the requirements checker would be http://127.0.0.1/yii/requirements.

The Yii requirements checker tests the current web server’s configuration for the framework’s dependencies.

Strictly speaking, while the first five items in the requirement checker are absolutely requires for Yii to run, these items can be identified in the “Required By” column, since the are necessary for the Yii framework itself.

The requirements checker shows both required and suggested dependencies.

Create a Basic Web Application

Like Ruby on Rails, Yii can use convention to rapidly bring up a working skeleton application.

To create a Yii skeleton application, navigate to the directory wherein the new application will reside using the server’s shell interface (the command line).

In the command line, execute the yiic command. The path to this command will be the path to the Yii Framework’s framework directory.

The yiic command will take the method webapp and the name of the new application. In the example, the new application is called “ecd.”

A Yii application can be created from the command line.

It may be necessary to preface this command with “php” depending on your environment.

Yii will ask you if you are certain that you want to create the new application. An answer in the affirmative creates the new application. This application will be instantly available in a web browser.

The new application shown in the browser.

This application will include a few pages and two forms. The first form is for contacts. The second is for authentication.

This very basically application will, of course, need to be customized, but it is pretty neat to have something up and running so quickly.

The application’s structure is built for MVC, and includes many of the files and classes a developer would want.

Learn Yii

The Yii community has a significant amount of support. For example, Jeffrey Winesett, who is part of the current Yii development team, has posted several screencasts to help developers learn Yii.

Winesett has also written a book, Agile Web Application Development with Yii 1.1 and PHP5, that will help beginners become familiar with the framework.

Another book, Yii 1.1 Application Development Cookbook, from Yii development team member Alexander Makarov, is also a good resource for learning the framework.

Finally, the Yii Framework site also has good documentation for getting started.

CSS is the Internet’s style and layout language. It is responsible for describing how a web page or application should look, where component elements should be positioned, and even how some basic interactions should be managed.

Increasingly, many tasks that might have been handled in HTML markup or even with a server-side scripting language like PHP or Python are becoming part of the CSS domain. As an example, earlier in the mobile Internet revolution, developers would build separate websites or applications for the desktop and mobile versions of a site. Now most savvy web designers and developers rely on CSS to adapt to the device regardless of whether that device is a desktop, a laptop, a tablet, a smartphone, or even a television.

Similarly, many site animations, including some content sliders, are now written with CSS transitions or key frame animations.

CSS is Becoming More Complex

This trend toward doing more with CSS has made the language more complex and has given rise to a number of frameworks and extensions. SASS — Syntactically Awesome Style Sheets, which adds nested rules, variables, mixins, and more to CSS — would be an example.

One constant with seemingly every new CSS feature, framework, or extension is that a web designer or developer must list out, if you will, all of the elements in the HMTL markup or order to systematically write the necessary style declarations.

Sometimes this CSS “templating” process — that is the listing out of each applicable element — takes place element by element as the web designer or developer moves through the markup. Other times an entire skeleton is created, organizing the parts by function or position. But again, almost regardless of whether or not a CSS framework is used or which framework is used, at some point the specific elements in a given page’s markup must be enumerated and organized in a style sheet.

Bear CSS Provides a Nice Starting Point

It is this specific task, outlining or templating a web page’s elements that Bear CSS does.

Imagine that the code below represents the markup for some new web page.

<!doctype html>
<html>

	<head>
		<meta charset="utf-8"/>
		
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" media="all" href=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
	</head>
	
	<body lang="en">
		<header>
			<h1>Fast Style Sheets</h1>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>	
					<li><a href="#">Away</a></li>				
				</ul>
			</nav>
		</header>
		<div id="main">
			<form>
				<label for="first-name">Your First Name:</label>
				<input name="first-name" id="first-name" type="text">
				<label for="last-name">Your Last Name:</label>
				<input name="last-name" id="last-name" type="text">
				<input type="submit" value="Submit" />
			</form>
			<aside>
				<p>The form will let you submit your name for something or other.</p>
			</aside>
		</div><!-- #main -->
		<footer>
			<p>Some footer copy</p>
		</footer>
	</body>
	
</html>

Navigating to the Bear CSS website, a web designer or developer could easily upload a copy of the markup using the site’s large “Upload HTML” button.

Bear CSS is a simple two-step process. The first step is to upload an HTML file.

The button opens up a standard file selection window. The Bear CSS application quickly processes the HTML file and generates a CSS template or outline that may be downloaded.

In the second step, a web designer or developer will simply download the style sheet template.

The style sheet template will open in a new browser window, from which it can easily be copied and employed in the web project.

For example, here is the style sheet template or outline that Bear CSS generated based on the example HTML shown above.

html { 


} 

body { 


} 


/*******************************************************************
LAYOUT
*******************************************************************/

div { 


} 

#main { 


} 

header { 


} 

nav { 


} 

footer { 


} 

aside { 


} 


/*******************************************************************
LINKS
*******************************************************************/

a { 


} 


/*******************************************************************
TYPOGRAPHY
*******************************************************************/

h1 { 


} 

p { 


} 


/*******************************************************************
FORMS
*******************************************************************/

form { 


} 

label { 


} 

input { 


} 

#first-name { 


} 

#last-name { 


} 


/*******************************************************************
LISTS
*******************************************************************/

ul { 


} 

li { 


} 

The style sheet outline is bare, but it has also saved a bit of time that would have otherwise been spent doing a boring and repetitive task.

The template is also relatively well organized, and may help a web designer or developer avoid repeating style descriptions.

Summing Up

Bear CSS is a fast and helpful application that creates a bare — assuming that the developers intended the pun — style sheet template.

Developer Kyle Gawley and multi-discipline designer Jordan Henderson, both from Ireland, clearly created the app to take on a simple but repetitive task common to nearly every website and web application project.

Related Articles

• Building Pure CSS Mega Menus
• 19 New CSS3 Tutorials
• CSS3 Image Filters in the Near Future

Here is a list of recent tutorials for Illustrator CS6. Practice Illustrator’s new features to strengthen your scalable vector design. Utilize image trace, create repeatable patterns, apply 3D effects, and more.

New Illustrator Tutorials

Learn Illustrator CS6. Learn the basics of Illustrator CS6 with “Getting Started” and “New Features” tutorials by product experts. This series of short tutorials will get you up and running with Illustrator CS6 and its new tools.

Discover the new features of Adobe Illustrator CS6.

–

Why You Should Use Adobe Illustrator to Create User Interfaces. Novice designers always come up with a question about which application to use to create user interfaces. Most choose a bitmap editor such as Photoshop. However, vector editors are better suited for this purpose.

Create a user interface with a vector editor.

–

How to Easily Outline Curly Letters. Making smooth looking curves and curls in vector can be tricky, especially if you’re working with hand drawn forms. This tutorial shows the process of outlining extremely curly letters that have been hand drawn and scanned into the computer.

Learn to outline extremely curly letters.

–

Create a Retro Triangular Pattern Design in Illustrator. Follow this step-by-step tutorial to create a popular retro pattern of colorful squares and triangles. Use tools to accurately align elements, then see how the Pathfinder can easily create custom shapes.

Align elements and create custom shapes to produce a pattern.

–

Create a Simple Drop-Down Menu. In this tutorial, learn how to create a simple drop-down menu. Start with rectangles and simple paths, some basic vector shape building techniques and the Rounded Corners effect. Then use multiple fills and strokes along with the Drop Shadow effect and some simple blending techniques.

Build a drop-down menu with basic shapes and Illustrator effects.

–

Create a 3D Custom Map in Illustrator. Learn how to create isometric icons that you can build up into a 3D custom map or cityscape image. Once you get the hang of drawing the simplest shapes in this isometric style, you can draw just about anything.

Create isometric icons to build a 3D map.

–

Create Retro Graphics in Illustrator. In this tutorial, create a cool graphic with a retro feel in just a few simple steps. Form simple vector shapes with the Pen tool and then add textures for a retro aesthetic.

Form simple vector shapes and add textures to create a retro graphic.

–

Create a Textured Vector Cityscape. Create a cityscape using vectors and points, with either lines or blocks of color, and a combination of a build-up of layers within Illustrator. It is deliberately limited in its technique to achieve the hard edges of modern architecture.

Build a cityscape with layers of vector shapes.

–

How to Create a Vector Sponge Art Effect in Illustrator. Today designers and illustrators strive to add vintage style to their work with textures. In this tutorial, create a cute kids style illustration complete with a vector sponge stamp effect for a vintage look.

Create a vintage look with a vector sponge effect.

–

Bring “Happy” to an Illustration. With a carefully constructed composition that makes creative use of color, it’s possible to create an image rich in magic and positivity without it being sickly sweet. Recreate the feeling of discovering the unexpected, using as few shapes and colors as possible.

Create a magic image with only a few shapes and colors.

–

Create Art Deco Type. This tutorial focuses on the process of making iconic art deco letters. Learn to create, select and position elements, without resorting to any great wizardry.

Learn to create art deco letters with basic Illustrator tools.

–

How to Illustrate a 3D Fire Torch. Create a flaming torch with vector illustration techniques. Along the way, harness powerful Illustrator tools, such as 3D, Bristle brushes, and Meshes.

Use powerful tools to create a 3D torch.

–

Create a Vector Space Composition in Illustrator. In this tutorial, learn how to create a vector space composition featuring the planet Saturn. Use simple shapes, various Blending Modes, and follow a straightforward workflow that is as simple as a basic circle.

Use simple shapes and tools to create a vector space composition.

–

How to Draw an Apricot with the Mesh Tool. Follow this detailed quick tip and learn how to draw an apricot using the Mesh Tool. It includes step-by-step instructions on how to create all the mesh points and lines, plus all the color shades used so you can draw a realistic apricot from scratch.

Learn how to draw an apricot with the Mesh tool.

–

How to Create Hand-painted Sign in Adobe Illustrator. In this tutorial, learn how to create an inscription in a retro style. In the process, learn something about letter anatomy. The techniques described here will be useful not only for the work with typography, but also for the work with any vector objects.

Create an inscription with a retro style.

–

Creating the Sole of a Sports Shoe with the Appearance Panel. In this tutorial, use the Appearance panel to create a stylized version of the bottom of a sneaker. It’s a great exercise for those who are just learning to navigate the Appearance panel.

Use the Appearance panel to create the soles of sneakers.

Read More

• Design By Grid in Photoshop or Illustrator
• Create Detailed ‘Wavy’ Elements in Photoshop and Illustrator
• Working Across Adobe Photoshop and Illustrator

Hypertext Transfer Protocol, or HTTP, is the Internet’s most basic method of data communication, and it supports a few request protocols, including GET. The GET method is often used in conjunction with web forms and passes form parameters in the open via the page URL.

At the time of writing, the main search form on Amazon’s website was an example of a GET-based form. Looking at the site’s HTML markup, the associated form element clearly states its method.

<form action='/s/ref=nb_sb_noss' method='get' name='site-search' class='nav-searchbar-inner' >

The popular Amazon online store uses the GET method for its site search form.

Dissect the Form

When trying to automate form submission, this sort of markup is just the place to start. Not only does it explicitly state that the server is expecting information via GET, it can provide other insight about the key and value pairs the server requires.

In his book, _Webbots, Spiders, and Screen Scrapers, a Guide to Developing Internet Agents with PHP/cURL_, author and web developer Michael Schrenk said that “it’s important to submit forms exactly as the webserver expects them to be submitted, or the server may generate errors in its log files.”

These errors can cause two sorts of problems. First, it may be that the webbot will not return the desired information or achieve the expected goal. Second, a webbot designer doesn’t want to interfere with the site’s normal operation.

Looking carefully at a form’s structure in the markup makes it possible to understand what sort of information the server is expecting from the form and how that information should be formatted.

Here is the complete markup for the site search form from Amazon’s home page. The code sample was taken on September 4, 2012.

<div>
	<form action='/s/ref=nb_sb_noss' method='get' name='site-search' class='nav-searchbar-inner'>   
            	<span id='nav-search-in' class='nav-sprite'>
              		<span id='nav-search-in-content' data-value="search-alias=aps">
All</span>
              		<span class='nav-down-arrow nav-sprite'></span>
             		 <select name="url" id="searchDropdownBox" class="searchSelect" title="Search in"   >
				<option value="search-alias=aps" selected="selected">All Departments</option>
				<option value="search-alias=instant-video">Amazon Instant Video</option>
				<option value="search-alias=appliances">Appliances</option>
				<option value="search-alias=mobile-apps">Apps for Android
</option>
				<option value="search-alias=arts-crafts">Arts, Crafts & Sewing</option>
				<option value="search-alias=automotive">Automotive</option>
				<option value="search-alias=baby-products">Baby</option>
				<option value="search-alias=beauty">Beauty</option>
				<option value="search-alias=stripbooks">Books</option>
				<option value="search-alias=mobile">Cell Phones & Accessories</option>
				<option value="search-alias=apparel">Clothing & Accessories</option>
				<option value="search-alias=collectibles">Collectibles</option>
				<option value="search-alias=computers">Computers</option>
				<option value="search-alias=electronics">Electronics</option>
				<option value="search-alias=gift-cards">Gift Cards Store</option>
				<option value="search-alias=grocery">Grocery & Gourmet Food</option>
				<option value="search-alias=hpc">Health & Personal Care</option>
				<option value="search-alias=garden">Home & Kitchen</option>
				<option value="search-alias=industrial">Industrial & Scientific</option>
				<option value="search-alias=jewelry">Jewelry</option>
				<option value="search-alias=digital-text">Kindle Store</option>
				<option value="search-alias=magazines">Magazine Subscriptions</option>
				<option value="search-alias=movies-tv">Movies & TV</option>
				<option value="search-alias=digital-music">MP3 Downloads</option>
				<option value="search-alias=popular">Music</option>
				<option value="search-alias=mi">Musical Instruments</option>
				<option value="search-alias=office-products">Office Products</option>
				<option value="search-alias=lawngarden">Patio, Lawn & Garden</option>
				<option value="search-alias=pets">Pet Supplies</option>
				<option value="search-alias=shoes">Shoes</option>
				<option value="search-alias=software">Software</option>
				<option value="search-alias=sporting">Sports & Outdoors</option>
				<option value="search-alias=tools">Tools & Home Improvement</option>
				<option value="search-alias=toys-and-games">Toys & Games</option>
				<option value="search-alias=videogames">Video Games</option>
				<option value="search-alias=watches">Watches</option></select>
          		</span>

            <div class='nav-searchfield-outer nav-sprite'>
              <div class='nav-searchfield-inner nav-sprite'>
                <div class='nav-searchfield-width'>
                  <div id='nav-iss-attach'>
                    <input type='text' id='twotabsearchtextbox' title='Search For' value='' name='field-keywords' autocomplete='off'>
                  </div>
                </div>
                <!--[if IE ]><div class='nav-ie-min-width' style='width: 360px'></div><![endif]-->
              </div>
            </div>

            <div class='nav-submit-button nav-sprite'>
              <input type='submit' value='Go' class='nav-submit-input' title='Go'>
            </div>

          </form>
        </div>

This markup acts like a specification for what the server is looking for when this form is submitted.

As an example, the form’s action describes the path to the script meant to process the form. In this case that script is located at /s/ref=nb_sb_noss.

<form action='/s/ref=nb_sb_noss' method='get' name='site-search' class='nav-searchbar-inner'> 

The method tells us that the server is expecting GET, meaning the GET request will begin like the following, since the parent directory is “www.amazon.com” and the path to the script is “/s/ref=nb_sb_noss_1.”

http://www.amazon.com/s/ref=nb_sb_noss_1

The first form input is a select with the name “url.” This will be the first key in a series of key and value pairs.

<select name="url" id="searchDropdownBox" class="searchSelect" title="Search in"   >

GET requests always start with a “?” so the GET request would now look something like the following.

http://www.amazon.com/s/ref=nb_sb_noss_1?url=

The value for the “url” key should match the value set for one of the options.

For example, if one wanted to search all of Amazon, this value would be “search-alias=aps.” Notice that this matches the value field for the option shown below.

<option value="search-alias=aps" selected="selected">All Departments</option>

If the search was to be limited to books, the desired value would be “search-alias=stripbooks.”

<option value="search-alias=stripbooks">Books</option>

In GET responses, values from options are often HTML encoded. In this example, the equals sign (=) would be replaced with the entity code “%3D” so that the resulting value would be — using the All Departments example — “search-alias%3Daps”.

As a result, a GET request would look like the following.

http://www.amazon.com/s/ref=nb_sb_noss_1?url=search-alias%3Daps

With GET, additional key and value pairs are prefaced with an ampersand (&). The Amazon search form has another input field with the name “field-keywords.”

<input type='text' id='twotabsearchtextbox' title='Search For' value='' name='field-keywords' autocomplete='off'>

This name is the next key to be added to the GET request.

http://www.amazon.com/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=

The final value is a text string as the input field’s type indicates. For the example, the search could be for “webbot.”

http://www.amazon.com/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=webbot

In typical GET fashion, a multi-word query would use plus signs (+) rather than spaces, so a search for “making webbots” would result in the following GET request. This can be added programmatically with the PHP function urlencode().

http://www.amazon.com/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=making+webbots

As a test, one could copy the GET Request URL and paste it into a browser window. Submitting it should return an Amazon search results page.

The GET request successfully generates results in a browser.

Automating the Process

If one stopped with just the GET request URL, the entire process would be something of a waste, since it would have been a lot simpler to just use the actual Amazon web form.

Having dissected the form and built a proper request, this process can now be automated with a webbot.

As an example, imagine that Amazon was a competitor, and a merchant wanted to monitor which books Amazon carried for certain topics — such as webbots, process automation, and web development.

A webbot (script) could be built to search Amazon for three, thirty, or three hundred terms each day, parse the resulting web pages, and store the data, so that trends in available products or prices could be monitored over time.

Similarly, a merchant could monitor dozens of competitors in this way.

Without going into the details of how to actually parse the web page content, let’s describe what a very basic, search-form-completing bot might look like.

First, there would be a source of search queries. For this example, an array is used.

<?php
$keywords = array('webbots', 'process automation', 'web development');

A function would be written to retrieve the search results page. This function could use cURL.

function get_search($url){
	$ch = curl_init();
	curl_setopt( $ch, CURLOPT_URL, $url);
	curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1);
	$html = curl_exec($ch);
	
	// code to parse and store the results page goes here.
	
	curl_close($ch);
	
}	

Finally, a foreach statement would call the get_search function for every search query.

foreach( $keywords as $keyword){
	$keyword = urlencode($keyword);
	$url = "http://www.amazon.com/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=" . $keyword;
	get_search($url);
}
	
?>

Short of the code for parsing the HTML page, this webbot will automatically search for each query on the Amazon site.

Summing Up

With an understanding of what kind of response a server is looking for and a relatively few lines of code, it is possible to build a PHP-based webbot that will automatically complete GET-method web forms.

The same principles used here could be applied to automating all sorts of online form activity.

I am at an important milestone in the Alien Authority site development — on the verge of adding the product catalog and payment processing capability — so I decided to take a look back at the site I’ve been building.

This article in the 53rd installment of a series created to demonstrate how to use WordPress to develop an ecommerce site that sells virtual products from start to finish. The series addresses the (a) site-planning process, (b) graphic design, (c) plugin selection, (d) payment processing setup, and (e) virtual product delivery. This series also provides specific site-coding examples.

The Series to Date

• Part One: Defining the Project
• Part Two: Logo and Color Palette
• Part Three: CSS Grid, Home Page Design
• Part Four: Facing Design Challenges
• Part Five: Install WordPress, Copy Theme
• Part Six: Create a Custom Post Type
• Part Seven: More Functions for the Custom Post Type
• Part Eight: Draft HTML5 Markup
• Part Nine: CSS Begins, Font Glitch
• Part Ten: CSS Work Continues
• Part 11: jQuery Lends a Hand
• Part 12: CSS for Articles, Newsletter
• Part 13: CSS for Social Links, the Footer
• Part 14: Tablet Layout Begins
• Part 15: Tablet Layout Continues
• Part 16: Articles and Videos Styled
• Part 17: 480-Pixel-Wide Footer
• Part 18: 480-Pixel CSS Coloring
• Part 19: Colors Like a Rainbow
• Part 20: The Next Size Up
• Part 21: Finishing the 640-pixel Wide Layout
• Part 22: The Remaining Layouts
• Part 23: Completing Remaining Layouts
• Part 24: Theme Building Begins
• Part 25: Switching Style Sheets
• Part 26: Completing the Header.php File
• Part 27: The WordPress Loop
• Part 28, Managing Thumbnails and Article Teasers
• Part 29: A Third Loop and the Footer
• Part 30: Newsletter Page Template and Database
• Part 31: Composing the Newsletter Form
• Part 32: Processing Newsletter Form Data
• Part 33: Integrating MailChimp
• Part 34: Modifying the Page Template
• Part 35: The Contact Form
• Part 36: When Users Submit
• Part 37: Additional CSS, and Getting Ready for RSS
• Part 38: Plugin Localization and Settings Link
• Part 39: Connecting to the Database Table
• Part 40: Adding a Style Sheet to a Plugin
• Part 41: Cloning Form Elements
• Part 42: Populating The Options Form
• Part 43: Showing and Hiding Options
• Part 44: Cleaning Up the Plugin
• Part 45: Get the RSS
• Part 46: Working the Feeds
• Part 47: Timing Cron-like Events in WordPress
• Part 48: Creating the First Digital Product
• Part 49: Presenting Individual Products
• Part 50: Displaying Category Pages
• Part 51: Adding Text to a PDF
• Part 52: Font Problems

The Alien Authority website will sell alien abduction certificates that users can download, print out, and frame. As the series’ title implies, the site is being built using the popular WordPress platform.

The Alien Authority website will sell abduction certificates.

As I mentioned above, for this article, I took a look back, if you will, at a couple sections of the site that I thought I had completed, only to discover that I still needed to do a bit of fine-tuning and fixing.

The Search Form

Perhaps the most embarrassing of these look backs had to do with the search form present on every page of the Alien Authority site.

The search form appears on every page of the site, but it was broken.

When I tried to search the site for “asteroids,” nothing happened.

It turned out that I had made a mistake in the searchform.php file found in the Alien Authority WordPress theme. Here is the code from that file. Notice my mistake?

<?php
/**
 * The template for displaying search forms 
 *
 * @package WordPress
 * @subpackage aa
 */
?>
	<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
		<input type="text" name="searchform" id="searchform" placeholder="Seek and Find">
		<input type="submit" name="searchsubmit" id="searchsubmit" value=">" > 
	</form>

I had inadvertently given both the form element and the first input element the same id value. Id’s need to be unique or bad things can occur — like messing up a search form. In this case, not only was the CSS off, but the script meant to process search queries was not receiving the field data it was expecting.

I modified the input element’s id, and the search form worked again.

	<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
		<input type="text" name="s" id="s" placeholder="Seek and Find">
		<input type="submit" name="searchsubmit" id="searchsubmit" value=">" > 
	</form>

The search form now looked completely different since I had pulled the proverbial rug out from under my CSS declarations.

Fixing the input field messed up the CSS.

If you’ve been reading through this WordPress article series, recall that the Alien Authority website changes colors schemes based on the time of day or day of the year. This is swell normally, but it meant that I needed to update multiple files to fix my CSS issues.

The first change was made to style.css. At about line 92 of that file, I changed the id value for the input. Here is that code before the change.

	input#searchform { 
		width: 160px; 
		height: 60px; 
		margin: 0;
		padding: 0;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 3px; 
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		overflow: hidden;
		
	}

Here is the beginning of the same style declaration with the new id value.

input#s { 

I made similar changes at lines 106, 275, 411, 560, 668, 690, 706, and 723. These updates generally got the search form back into shape, but I still needed to update the style sheets responsible for adding colors to the input.

The next CSS file I updated was aa-night-header.css. I updated the input id value at lines 16 and 53. Similar, updates were made to aa-day-header.css at lines 19 and 54. This process continued in aa-red-header.css, aa-gray-red-header.ccs, aa-gray-pink-header.ccs, aa-gray-green-header.ccs, aa-gray-blue-header.ccs, and aa-gray-black-header.ccs.

With these changes the search form was both functional and handsome.

The Search Page

Suddenly having a functional search form lead to another discovery in my quest to look back at the Alien Authority site and do a bit of clean up. That discovery was that my search results page did not lay out properly.

The search results page did not lay out properly.

To fix this oversight, I needed to create a new file named search.php. This file would serve as the template for the search results page.

This page began just like every other WordPress template, with a comment declaring it.

<?php
/**
 * The template for displaying Search Results pages.
 *
 * @package WordPress
 * @subpackage aa
 * @since aa
 */

get_header(); ?>

The main section of this file is devoted to a simple WordPress loop.

<div id="content" role="main">

	<h1 class="page-title">Search Results:</h1>
	<?php if ( have_posts() ) : ?>
		<?php /* Start the Loop */ ?>
		<?php while ( have_posts() ) : the_post(); ?>
		<ul id="serp-list">
			<li>
				<h3><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h3>		
				<?php the_excerpt(); ?>					
			</li>
		</ul>
		<?php endwhile; ?>

		<?php else : ?>

		<article id="post-0" class="post no-results not-found">
			<h1 class="entry-title">Nothing Found</h1>
		</article><!-- #post-0 -->

	<?php endif; ?>

</div><!-- #content -->

<?php get_footer(); ?>

Notice that each individual search result will be a list item.

Next, I had to add style declarations for the search results page in style.css, aa-day.css, and aa-night.css.

/* SERP */
ul#serp-list { 
	margin: 0;
	padding: 0;
	list-style: none;
}

ul#serp-list li h3 { margin-bottom: 5px; }
ul#serp-list li p { margin-top: 0; }

ul#serp-list li h3 a { color: rgb(5,198,0); }

ul#serp-list li h3 a { color: rgb(32,135,26); }

Now, the Alien Authority has a respectable search results page.

The search results page is now complete and showing results.

Summing Up

At various points in any development project, it is a good idea to look back and ensure that everything is working as you expect. In my case, I found a faulty search form and search results page. I am going to continue with a bit more clean up in the next installment, before adding the ecommerce plumbing, if you will, to the Alien Authority website.

Related Articles

• Book Review: The WordPress Anthology
• 29 New WordPress Tutorials
• WordPress Theme Development Part 1: Installation and Graphic Design