How the cs-cart cart work

Install cs-cart on your server, when you add a product it will use ajax to post the data to the server then get back the new cart information and update the cart, so as we know this, we can easy to use same ajax function to add the cs-cart cart in the wordpress pages by ajax call.

First, we need rip the css of the cart (under the main navigation) to the wordpress , you may need adjust the css so it can looks well in your wordpress blog, then you need add the understand the cs-cart ajax function and write your own ajax function in the wordpress blog,at last test it, all ok , that’s it!!!

see a live sample there :http://www.ebusinesshosting.ca/ , and this is the cs-cart store http://www.ebusinesshosting.ca/store/I will try to make it work as plugin.
To be continued

Are you want to add featured posts , easy to manage the ads on your wordpress site or show a special category posts on your home page ? Add theme options for your wordpress theme ,you will know it’s so easy !!!

Prepare

First , we should know two important wordpress tags : add_theme_page , add_action and two wordpress api : update_option , delete_option

add_theme_page : add_theme_page( page_title, menu_title, capability, handle, [function]);

page_title

Set the page title of the options page

menu_title

The anchor text of the menu .

capability

The minimum capability required to display and use this menu page. Go to wordpress capability page for more details .

handle/file

If the function parameter is omitted, this should be the PHP file that handles the display of the menu page content. Otherwise, and more commonly, it will be a unique “handle” for the page. e.g. “my-awesome-plugin-settings”

function

The function that displays the options page content for the menu page.

add_action : add_action( $tag, $function_to_add, $priority, $accepted_args );

$tag

(required) The name of the action you wish to hook onto ,check Plugin API/Action Reference for the action list .

$function_to_add

(required) The name of the function you wish to be called .

$priority

(optional) Default: 10 this define the function execute order , lower number first . eg. if a function set priority to 5 that’s means this function run earlier than which priority is 10

$accepted_args

(optional) Default: 1 This define the arguments your function takes.

update_option : update_option( $option_name, $newvalue );
this use to store the option value .
delete_option : delete_option($name);
delete the name of the option .
get_option :get_option( $name, $default )
get the option value .

Reference : Function Reference/update option

Add to the theme

From the above knowledge , we can easy to add theme options for our wordpress site now . First , let’s do a ‘hello world’ demo . add footer links manage option for the last free wordpress theme ,you may notice the footer links home ,contact …. those are hand-coded in the theme . so now we need add it to the theme options in order to make it editable via admin panel .

Save following codes in the functions.php in the wordpress theme .

<?php 
function bright_addThemePage() {
   $ThemeName=get_current_theme();
    if ( $_GET['page'] == basename(__FILE__) ) {	
	    // save settings
		if ( 'save' == $_REQUEST['action'] ) { 		
			check_admin_referer( 'save-theme-properties' );  
			update_option( 'bright_foot', stripslashes($_REQUEST[ 'bright_foot'] ));	 
			// goto theme edit page
			header("Location: themes.php?page=functions.php&saved=true");
			die;
  		// reset settings
		} else if( 'reset' == $_REQUEST['action'] ) { 
			delete_option( 'bright_foot');		 
			// goto theme edit page
			header("Location: themes.php?page=functions.php&reset=true");
			die;
		}
	}
	add_theme_page( $ThemeName . ' Theme Options', $ThemeName . ' Options', 'edit_themes', basename(__FILE__), 'bright_themePage' );
}
 
function bright_themePage() 
{
       $ThemeName=get_current_theme(); 
	if ( $_REQUEST[ 'saved' ] ) echo '<div id="message" class="updated fade"><p><strong>Settings saved.</strong></p></div>';
	if ( $_REQUEST[ 'reset' ] ) echo '<div id="message" class="updated fade"><p><strong>Settings reset.</strong></p></div>';
?>
 <div class="wrap"> 
		<h2 style="border-bottom:none;"><?php echo $ThemeName; ?> Theme Configuration</h2> 
		<form method="post"> 
			<?php if ( function_exists('wp_nonce_field') ) { wp_nonce_field( 'save-theme-properties' ); } ?> 	<div style="width:575px;float:left;padding-bottom:30px;">
		  <h3>Footer Links Management</h3>
				<p>Manage footer links here.</p> 
				<table width="100%" cellspacing="2" cellpadding="5" class="editform form-table"> 
				<tr><th>  footer links </th>
				<td style='width:80%'> <textarea name="bright_foot" id="bright_foot" style="width: 100%; height: 10em;" class="code"><?php echo get_settings("bright_foot") ; ?></textarea>  </td>
				</tr> 
				</table>		 
				<input type="hidden" name="action" value="save" /> 
				 <p class="submit" align="right"><input name="save" type="submit" value="Save Settings" /></p>
				</form>
				<br style="clear:both;" />	
			</div>
 
<?php	
}//end of themepage function
  add_action( 'admin_menu', 'bright_addThemePage' );
  ?>

Now , we need change the footer.php

<div id="footer">
   <?=get_option( "bright_foot" )?>
    <h1> &copy; 2009 www.brightyoursite.com All Rights Reserved.</h1>
  </div>
</div>  
<?php wp_footer(); ?>
</body>
</html>

Take a notice with the delete_option( ‘bright_foot’) , update_option( ‘bright_foot’, stripslashes($_REQUEST[ 'bright_foot'] )) , get_option( “bright_foot” ) ‘bright_foot’ that’s the key of option , it must the same . $_REQUEST[ 'bright_foot'] <textarea name=”bright_foot”> also the same .

More applications

From the hello world demo, we can easy to add more options and change it to manage advertisement , we also can use this to add specific category to home page as featured posts , for instance :

<div id="featured">
<?php
wp_reset_query();
$count = get_option('theme_featured_count');
query_posts('showposts=' . $count . '&cat=' . get_cat_ID(get_option('featured')));
if (have_posts()) : while (have_posts()) : the_post(); 
?>
<div class="post">
<div class="featured-body"> 
<div class="featured-text"><h1><a href="<?php the_permalink() ?>" class="featured-title"><?php the_title(); ?></a></h1>
<p><?php excerpt('30'); ?></p>
</div>
</div>
</div><!-- END Post -->
 
<?php endwhile; endif; wp_reset_query(); ?>
</div><!-- END featured -->

put those in your index.php also add two more options in the function.php theme_featured_count and featured . You also can customize it do add a slider images.

Download

Theme option hello world demo

Now,let’s make all together (w3c valid 2 columns xhtml ,ul li css none-js SEO friendly sub-menu),we get a full wordpress home page html template–Click HERE to view.It looks nice simple & usefull, right ？let’s start to convert it to wordpress theme.

First,We should know some basic wordpress theme Knowledge:
What’s a basic theme include ?

• css style (required,style.css,style the page also put your personal info. like theme name , author …)
• index.php (required,WordPress Theme start with this file if without the home.php)
• a screenshot (optionally,screenshot.png)
• single.php (optionally,this file to generate the structure for a single post,if no such a file the wordpress will use index.php to generate the structure )
• page.php (optionally,this file to generate the structure for a single page,similar as single.php)

so we know a very minimum wordpress theme should include (index.php,style.css) .but usually in order to keep the site in a more good structure and can maxmum reuse , flexible .The page’s structure is separated to
several parts:

• header.php
• sidebar.php
• footer.php
• comments.php
• comments-popup.php

reference those in the template php file is very easy.For instance,header.php :

<?php get_headerer(); ?>

the comment, use the comments_template() template tag.
the sidebar, use the get_sidebar() template tag.
the footer, use the get_footer() template tag.

Also can use

include(TEMPLATEPATH . '/script.php');

to reference any php file in the template folder.

Start coding wordpress theme now

First ,we need declare the theme in style.css .For instance

/*
Theme Name: red theme
Theme URI: http://www.brightyoursite.com/blog/2010/01/11/your-first-normal-wordpress-template/
Description:Your first wordpress theme
Version: 1.6
Author: alex 
Author URI:  http://www.brightyoursite.com
Tags: red, fixed width, two columns, widgets 
*/

you can see the define theme name , url version aurhor …. there .
Next , do the page segmentation and create the header.php , footer.php , sidebar.php and index.php .
to make it easier we can copy the those files from the wordpress default theme . we just need copy our html codes and do some adjustment. for instace change the menu to wordpress page list ：

  <div id="menus">
  <ul>
 <?php wp_list_pages("title_li=&depth=2"); ?>
 </ul>
  </div>

the main posts loop:

<?php if (have_posts()) : ?> 
  <?php while (have_posts()) : the_post(); ?>
       <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
       <div class="item_head">
       <div class="item_header_text"><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a</h1</div>					
	 </div> 
	 <div class="item_description"><?php the_content('Read the rest of this entry &raquo;'); ?></div>
         <div class="tags" ><?php the_tags('Tags: ', ', ', '<br />');  ?> </div>  
	 </div> 
	 <?php endwhile; ?> 
	 <div class="navigation">
		 <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
		 <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
	 </div> 
	  <?php else : ?>
		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?> 
         <?php endif; ?>

Online demo and free wordpress theme download

Preview red theme (1773)

Download there

1. How to code a w3c valid 2 columns xhtml layout–step 1
2. How to code a w3c valid 2 columns xhtml layout–step 2
3. ul li css none-js SEO friendly sub-menu
4. Your first normal wordpress template
5. add theme options for your wordpress theme