Creating The Template File

In you are new to Magento then this will be kind of fun for you. First you need to create your .phtml file. In order to do that you need to navigate to your themes template pages folder. How to find that? Well if you are using the default Magento theme then you would first go to app -> frountend -> default -> default -> template -> page inside of there you will need to create you template file. So let say we want to create a 4coulmn template. You would just add a 4columns.phtml or whatever you would like to call it. Now you may be thinking you are all done. Nope if you go into your Magento Admin Panel or Dashboard and go under cms pages. You will see that you can not select your new template as a layout. Well this is because you need to first tell the Magento xml file to use the template.

Editing The XML

Lets locate those xml files. If you are still in the template -> page directory then all you have to do is go out one directory to layout. If you are not in the directory anymore you will have to navigate to app -> frountend -> default -> default -> layout. Inside this directory you are going to be looking for the page.xml file. Open it and navigate to the bottom. You should find some code like this

    <!-- Custom page layout handles -->
    <page_empty translate="label">
        <label>All Empty Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/empty.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_empty>
    <page_one_column translate="label">
        <label>All One-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_one_column>
    <page_two_columns_left translate="label">
        <label>All Two-Column Layout Pages (Left Column)</label>
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_two_columns_left>
    <page_two_columns_right translate="label">
        <label>All Two-Column Layout Pages (Right Column)</label>
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_two_columns_right>
    <page_three_columns translate="label">
        <label>All Three-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/3columns.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_three_columns>

Now you need to add your page teamplate to the end of the. So you would do something like this.

    <page_four_column translate="label">
        <label>Four Column Page Layout</label>
        <reference name="root">
            <action method="setTemplate"><template>page/4columns.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_four_column>

Once you have added that you should be good to go. If you do not see the layout in the drop down in the cms page area, you may need to refresh your Magento cache. To do this go the Magento Admin Panel or Dashboard and go to System->Cache Management. Refresh all the cache. If that does not work then you need to go back and make sure you have named everything correct.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with the biggest web companies in the Lansing Area and some all the way out to California. We would love to hear from you.

Add Your jQuery Scripts

We are going to use Google’s AJAX Library to add our jQuery library to our header. You may ask why we would do this well including the jQuery library from a external source will make less stress on your server and we all know that Google’s servers can handle the stress.

<head>
//Google Hosted
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
//Your Script
<script type="text/javascript">
   jQuery(document).ready(function($) {
      $(".cornerpeel").hover(function() { //Hover Over
         $(".cornerpeel img , .message").stop()
	 .animate({ //Expand the Message and the Hover Image
	    width: '138px',
	    height: '138px'
	 }, 600);
      } , function() {
         $(".cornerpeel img").stop() //Hover Out Go Back To Original
	 .animate({
	    width: '50px',
	    height: '50px'
	 }, 200);
	 $(".message").stop() //Hover Out Go Back To Original
	 .animate({
            width: '50px',
	    height: '50px'
	 }, 180); //This should be a tad faster than the image because IE is known to glitch
      });
   });
</script>
</head>

Create Your Styles

These are your styles and can be changed up depending on where your image is and what size you want to start out with.

.cornerpeel {position: relative;}
.cornerpeel img {
  width: 50px; 
  height: 50px;
  z-index: 101;
  position: absolute;
  right: 0; 
  top: 0;
}
.cornerpeel .message {
  width: 50px; 
  height: 50px;
  position: absolute;
  z-index: 100;
  right: 0; 
  top: 0;
  background: #fffcf9 url(http://www.shanestrong.com/jQuery/cornerpeel/rss.jpg) no-repeat right top;
  text-indent: -9999px;
}

Create Your Corner Peice

This is were you create your hoverable corner piece. This will be placed somewhere in your header area or right inside your body tag.

<div class="cornerpeel">
   <a href="http://feeds.feedburner.com/ShaneStrong">
      <img src="http://www.shanestrong.com/jQuery/cornerpeel/corner_img.png" alt="" />
      <span class="message">Subscribe To My Feed</span>
   </a>
</div>

Your Finished

Well that was it, that is all that you need to create your self a corner peel. If you would like to see this in action you can download my script at the bottom. There is a ton of things that you can do with jQuery that can make your site seem more flashy without having to find a flash developer. jQuery is one of the fastest growing languages around. If you have any tutorials that you would like to publish on my site please go to my contact page.

jQuery Corner Peel: Corner Peel Trial

Download: jQuery Corner Peel (353)

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

How to use jQuery Accordion

You do not have to use this for WordPress, you can use this on almost anything to make more space. Here is how you would go about using the Accordion widget.

Include your scripts

These should go into your head section of your web page.

<head>
//Default jQuery Style Sheet
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
//Google Hosted
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/ui.accordion.js"></script>
</head>

What happens next?

Now you have to create your accordion script. This is going to be hard for anyone who has never worked with jQuery so get ready.

//Your accordion script
<script type="text/javascript">
$(function() {
    $("your_id or your_class").accordion();
});
</script>

That code can either go in your head section or your footer. Ok so I kind of lied about that part being hard to do. But this next part is going to be even harder yet.

//This is where you create you info
<div id="your_id" class="your_class">
//You only need either a class or a id.
//What ever you want to use the Accordion widget
//should have the same HTML element after your class
//or ID.
    <h3><a href="#">This will be the first area's heading</a></h3>
        <div>
            <p>This is your content in area 1</p>
        </div>
    <h3><a href="#">This will be the second area's heading</a></h3>       
        <div>
            <p>This is your content in area 2</p>
            <img src="http://www.shanestrong.com/wp-content/uploads/2009/07/jQuery-hover.jpg" />
        </div>
    <h3><a href="#">This will be the third area's heading</a></h3>
        <div>
            <p>This is your content in area 3</p>
            <p>Another paragraph</p>
        </div>
    <h3><a href="#">This will be the fourth area's heading</a></h3>
        <div>
            <p>This is your content in area 4</p>
            <ul>
                <li>List Item One</li>
                <li>List Item Two</li>
                <li>List Item Three</li>
            </ul>
        </div>
</div>

That is all there is to jQuery Accordion

The only thing left to do is check it out for yourself I have created a page that has all the code. If you would like to just see jQuery Accordion in action you can go to the link below. If you would like to save the page you can just go to it and (Right Click and go to Save Page As).

jQuery Accordion: jQuery Accordion Trial

Download: jQuery Accordion (323)

jQuery Accordion Extras

If you would like to learn more about this great jQuery widget just go to Here

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Website Design , Development, and SEO Marketing

If you need assistance with web design, web development, search engine optimization, editing, content creation or marketing done to one of your sites please feel free to contact me or Chosen. Chosen is a small, but growing Lansing-based firm offering Web Development, Web Design, Web Hosting, Web Editing, and Web Marketing skills. We have done work for clients and companies, by preference, but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Top Ten SEO Tool List

Search Engine Genie
Website Grader
Google Adwords
Google Analytics
SEO Quake
SiteExplorer
Google Trends
Search Status
seomoz.org
Word Tracker

What The SEO Tool Does

Search Engine Genie – This site is not well known but it has quite a few really nice SEO tools that are free to use and they have a ton of really helpful articles.
Website Grader by HubSpot – I use this site to get a good idea of where a site is and where it might need to be and get to. HubSpot has a paid version of this that has a ton of really great SEO tools. They have a free week trial of the system if I were you I would jump at the trial and see if you like it.
Google Adwords – This is a great way to find out how heavily a keyword is being targeted. I use this when ever i am looking for the really good keyword to get a site going.
Google Analytics – Great tool if you are not using it you are loosing out. My main use for this is to see what is bringing traffic into my site or my client sites. With the name Google behind this you know that you are going to 1 get it for free and 2 get something that is great.
SEO Quake – This is a plugin for Firefox that gives you a ton of really useful info that you need for SEO. I know a few different people that this is the only tool that they use for SEO.
Site Explorer by Yahoo – This is a useful tool for the yahoo search engine. I prefer Google’s Analytics over this because it has more to it.
Google Trand – Great tool by Google this lets you find the trends of the time so that you can find the really good keywords and SEO articles to write for traffic purposes.
Search Status – I really enjoy using Search Status because of its simplicity. I am a Firefox user and this is a Firefox plugin.
seomoz.org – These people really know what they are doing with SEO. They have a ton of free tools and they also have some really great paid tools.
Word tracker – I personally have not used this service but i have heard from a ton of people that they are great. It is a paid service but they do have a free trial.

SEO Packages

If you are in need of any Search Engine Optimization I do have packages and I can teach people how to do SEO. My monthly packages for SEO all depend on how much you want done. I charge $25US an hour. With that my recommended package would be 20 hours a month this will give you the best outcome. Of course the more hours you do the better outcome you will get but at 20 hours a month I can really get enough done to your site that it will show improvement a lot quicker and will make you more money faster. I also have a bunch more different packages and prices for web based projects, you can go to Work Prices.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Practical

Now for a little practical look at SEO. If someone came to me and said I want to be number one for the word Google I would look at you and tell you to talk to this company called Google. Some things are not able to happen. One of the biggest things with SEO is that it takes time. Look at my site for instance I live in Michigan around the Lansing Area. Now I am trying to get to the top for Lansing Web Design, Lansing Web Development, Michigan Web Design, Michigan Web Development, and a ton of other Michigan and Lansing combination’s. Well I am finally getting there after 5 months of hard work. One thing that most people don’t understand is that in order to get to the top for a certain word or phrase you have to beat out the competition. That means you have to do research on what other people do, how they do it, where there flaws are, and how can you beat them.

SEO Consists

SEO and SEM are two totally different things people think that one goes with the other. Well they are kind of right in the fact that they both assist each other. SEM is Search Engine Marketing, this consists of stuff like Google Adsence, Post Writing, Building Backlinks, and a bunch of other things. SEO is mainly focused around Meta tags and search engine submissions. Meta tags are not a really big thing for SEO. That is what people say. Well I feel that they are still a very big thing. Meta tags direct search engines on what to index on your site. There are a ton’s of different Meta tag that you can use in SEO but the most important ones are Keywords, Descriptions, and Titles. The last thing that I will leave you with is that everyone can do SEO and SEM. SEM is a little easier for people because of all the social media places out there. SEO is really hard and takes a lot of planning. I would recommend everyone to leave SEO to the people that consider them self experts. I am not saying don’t try to learn SEO or teach your self SEO because you could become one of those experts.

SEO Packages

If you are in need of any Search Engine Optimization I do have packages and I can teach people how to do SEO. My monthly packages for SEO all depend on how much you want done. I charge $25US an hour. With that my recommended package would be 20 hours a month this will give you the best outcome. Of course the more hours you do the better outcome you will get but at 20 hours a month I can really get enough done to your site that it will show improvement a lot quicker and will make you more money faster. I also have a bunch more different packages and prices for web based projects, you can go to Work Prices.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

jQuery Hover State

So to show you how to do this I am going to use my site under my main post on the homepage I have some of my recent post. Now I want to have the full post area to have a jQuery hover state that changes the background. So I would do this.

$(document).ready(function() {
    //call the jQuery Hover Over and Out
    $('#YOURID').hover(over, out);
    //Tell the browser to change the background when hovered over
    function over(event) {
        $(this).css("background", "url('Path To Your Image')");
	$(this).css("cursor", "pointer");
    }
    //tell the browser to change the background to nothing when 
    //going outside the object area
    function out(event) {
	    $(this).css("background", "");
	}
});

jQuery Hover with a click event

If you want jQuery to do a hover state only then that will work for you but if you want to get the a tags href, so that when you click on the object area it will take you to that page. You would have to add this after your jQuery hover code. So now your jQuery code should be.

$(document).ready(function() {
    //call the jQuery Hover Over and Out
    $('#YOURID').hover(over, out);
    //Tell the browser to change the background when hovered over
    function over(event) {
        $(this).css("background", "url('Path To Your Image')");
	$(this).css("cursor", "pointer");
    }
    //tell the browser to change the background to nothing 
    //when going outside the object area
    function out(event) {
	$(this).css("background", "");
    }
    //This adds the click event to your object and tells it where to go
    $('#YOURID').click(function() {
	window.location=$(this).find("a").attr("href");
    });
});

This is very useful to get around the IE problem and if someone checks your site they can see that you know jQuery. If you need any help with this just let me know. I would be more than willing to help.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Magento CMS Manage Pages

Now that you have these folder in your Magento site we have to go through the admin to tell the site to use the new theme. First log in to your admin and go to the CMS tab and them manage pages.

Custom Design Pages

Inside there you will have to change every pages custom design to your new theme name you installed.

System Configure Design

Next you will have to go to the System tab and then Configure. Inside the Configuration section go under Design and change all of the relevant fields to your new theme name. Make sure you save everything and your theme should be up and ready to go.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Lets do the easy toggles first

Top To Bottom

I am doing this for the comments section of most WordPress sites. First you have to give the identify what the outer most container is of your comments section. Mine is id comments. So just to the top of my comments section I need to create a button but you don’t have to use a button it is just the easiest to explain. So you should have something that looks like this.

<button id="comments_bottom">This Is A Toggle Button</button>
<div id="comment">
//Your Comment Code
</div>

You will notice that I gave the button a id that is so that jQuery can find it. Next you have to create your js file. I would name it something like toggle.js. It should look like this depending on which way you want your content to toggle.

//Top To Bottom
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({height: "toggle"}, 1000);
	});
});
//Left To Right Or Right To Left
//In order to do either you must float your #comment 
//the direction you want your content to come from!
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({width: "toggle"}, 1000);
	});
});
//Upper Left To Lower Right Or Upper Right To Lower Left
//These ones you also have to float from the direction 
//they are coming from!
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({width: "toggle", 
                    height: "toggle"}, 1000);
	});
});

Now all you have to do is call your jQuery script and a jQuery library and your toggle up to down should work. I use the Google library because of how quick it is. You can find more info about the Google library here jQuery Library

Other Ways To Toggle

There are a few other ways to do a toggle like from bottom to top and bottom corners to top corners. There is also some other things that you can do with toggle like fading. jQuery has a lot of really easy and light things that you can do to your site to make it just that much better. If I were you I would take a look at their site jQuery.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Traffic Meta Breakdown

Back in the day all traffic came from your meta tags and your keywords. Don’t get me wrong these are still very useful but they don’t build you as much traffic because of the millions of website out there. To give you an example I would love to be the number 1 site on Google for web design well that really isn’t practical it is possible but when you search web design you get 343,000,000 that is how many pages are being crawled with the words web design. Now I am not saying don’t try to get to the top of the list. Defiantly try but try for something a little smaller like for instance I am from Michigan and so I am trying to get top for Lansing Web Design and Michigan Web Design. If you search Lansing Web Design I am close to the top. Now if I use keywords like that and try to focus on a smaller scale my site will rise on the bigger scale.
Your keyword meta tag is important but you have two other tags that are even more important your title meta tag and description meta tag. Your title meta tag is different from your normal title tag because it is what the browsers look at first and way a lot of their decisions on. The regular title tag is also very important it should be used everywhere that it is possible.

Best Ways To Produce Traffic

Here is a list of some really good ways to build traffic to your site.
1) Submitting – You must submit your site to search engines.
2) Use a favicon.ico
3) Depending on what your site is about submit it to other sites with that kind of material.
4) Have a lot of content. This still has to be good content. Pictures really bring in lots of traffic.
5) Use your META tags effectively. META help
6) Advertise with google or other advertising companies.
7) Use Social Media by talking about your site.

Probably the fastest way to get traffic to your site is pay per click. Yes it is going to cost you but in the long run of things it will be worth it. Some people think that after doing these things your site will just magically appear at the top of Google or Yahoo but it won’t. Building a vast amount of traffic takes time and some times money.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

With the new release of WordPress 2.8 the developers really took in what people had to say and made some vast changes to the content management system. One of the biggest changes that the team made that the end user and really the admin won’t really see is the database changes. The WordPress team made the database much more efficient and much faster that allows for faster page load in the admin and load for the site. WordPress added some much needed functionality that helps the developer perform much faster. Some of those changes include.

Functionality Changes

• Theme and Plugin Editor
• Theme Installer
• Plugin Management

WordPress Changes

These are just some of the changes that WordPress implemented in the 2.8 release. All three of these changes speed up the development process on creating a theme for a site. I will be the first one to say that I use previously developed themes and recreate off of them because it is much faster just to use already created code. With using a already created theme it used to be a pain to have to ftp into your site and add the theme into the theme directory for your site. With the implementation of the Theme Installer you can upload a theme in its zip file or you can search the WordPress database for a theme. Much faster than having to go out and download the theme and then upload it to the theme folder. Now I have always been against using the theme/plugin editor that was built into the content management system but now that it is changed I have been using it for little changes but I still use a outside code editor. They made some great changes with it like the ability for line numbers and the function dropdown at the bottom of it. The new creation of how you manage plugins is great with the ability to deactivate each plugin individually and delete each one without having to go to the top of the page and click the dropdown and select delete. Probably the best thing with the plugin managment upgrade is the update feature that allows you to update each plugin right there.

Stuff Not Really Noticed

WordPress has implemented quite a few thing that the end user will not really notice but will be really affective like the ability to automatically update time when it is daylight savings time. Also the ability to control the columns on the dashboard page is also a plus for the admin so they can stay updated with whatever it is they have on the dashboard. Another little change that helps the admin users is the recreation of the widget panel. Now with more intuitive activity, it makes it easier to add widgets to the sidebars. One of my favorite things that WordPress implemented is a popup banner to inform the admin that they have not changed the auto generated password.

Your Questions

The only question about this new installation of WordPress is what could they possibly do to the platform next to make it even better? If you have any ideas and don’t want to submit them please leave a comment on the post and I will submit them for you.

Most Valuable Function

I am going to start off this functions post talking about probably the most heavily used WordPress function called bloginfo. This is a really useful function if you can understand it. It is quite easy to start the function because it is built in to WordPress all you have to do is call the function and give it what parameters you would like it to have. The code to call this function looks something like this < ?php bloginfo(‘YOUR PARAMETERS’); ?>. As you can see it is quite easy to call this function but in order to understand what you can do with this function is another hurdle.

List of the Parameters

• admin_email
• atom_url
• charset
• comments_atom_url
• comments_rss2_url
• description
• home
• html_type
• language
• name
• pingback_url
• rdf_url

• rss2_url
• rss_url
• siteurl
• stylesheet_directory
• stylesheet_url
• template_directory
• template_url
• text_direction
• url
• version
• wpurl

Well that looks like a long list of stuff but a lot of those come in handy quite often. I am not going to go into what they all do but I will talk to you about a couple of them so that you have some idea of what you can do with them.

Most Common Parameters

The first one that I am going to talk about is the url. Well to me this one is self explanatory what this does for your site is echos out the url of the site. So if your site is http://www.example.com then the bloginfo function for url would echo out your url. So if you needed to do an a tag and you wanted to echo out your url all you would have to do is say now a lot of people would look at that and say why wouldn’t I just write my url in their instead. Well if you write your url in there it will only work for your url and so if you are creating a theme then you wouldn’t be able to sell this theme. now I am going to move on to another parameter known as name. All that this does is echos out what you called your blog and you can change this inside the admin section of WordPress. So a practical use for this would be putting it inside of the a tag that we just used so it would look like this <?php bloginfo(‘name’); ?>. That way if you named your blog EXAMPLE the link would say EXAMPLE. The last parameter that I am going to talk about is description this is also known as your tag line. You can also set this up inside of the admin section of your blog. This comes in handy quite often in the header and footer sections of a site. Mainly because almost every company has a tag line or MATO that they try to emphasize on. So by saying <?php bloginfo(‘description’); ?> you can plaster your MATO all over your site. Well that is my last example for you I really hope that you start messing around with the other parameters because they can come in really great use to you and your site.

Additional Help – Chosen LLC

If you are in need of some help with your WordPress site or any other web related issues you can either contact me or you can go to the Chosen Development site for more help. We are based out of Saint Johns, Michigan and we specialize in Design and Development we do seminars in the Lansing Area on all different types of web information. Chosen is a growing company of about 8 people 4 full time and 4 part time. We would love to hear from you about possible Design or Development work and if you are from the Lansing Area we would be willing to meet with you.

The Start

Well to start the header it is just like you would start any other page.

This tells the browser which type of markup language the page is written in: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

This is your HTML tag with a WordPress language attribute: <html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>

This is your HEAD tag: <head>

This is your TITLE tag which looks a lot different than the normal TITLE tag: <title><?php bloginfo(‘name’); ?><?php wp_title(‘-’); ?></title>.

This is because WordPress has a function called bloginfo which can do quite a bit of different things and I will leave you to find these out.  But in this instance we are using blog info NAME, this is just the name to which you gave your site.  Also the wp_title is just the title of the page you are on so if you are on your about page it would look like this(Your Blog Name – About).  The wp_title function you can also do quite a bit with.  This is not everything that you can do for your TITLE and if you are using my Wooden Default theme you will see some other things that you can do and dont stop there you can find much more at wordpress.org.

This is to connect to your STYLE Sheet which we will talk more about in another session:<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

This is your RSS FEED: <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />

There is quite a few different things that you can do with this and you can check them out at wordpress.org.

This is your PINGBACK so people and servers can ping you: <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />.

As you can see with this we are using another WordPress bloginfo function.

This is a WordPress function to denote the end of the HEAD section: <?php wp_head(); ?>

This is the Closing tag for the HEAD section: </head>

With just these you can start your header section but you can add more depending on what you want the site to do.  If you would like to have more stuff on every page I would start your BODY tag: <body>.  After that I would make a class wrapper that way you can make sure everything in your site stays inside the wrapper class.  With my Wooden Default theme that I hope everyone is using you can see that I have added quite a few different things to the header.  These include a header section and a nav section.  These are most of the time standard for WordPress themes.  Inside the header section you can create your LOGO, your RSS link, your site description, your register and admin functions.

Wooden Default Theme

I am going to go into some of the thing that are in the Wooden Default theme so if you have not downloaded it I would so you understand.  If you look at the DIV PAGE section you will see some more bloginfo functions one being url which just echos out the site url.  So if you need to put this anywhere on your site you can use this.  Or if you want to call a specific page you can use this so that you do not have to use your actual url.  The bloginfo name just echos out your blog/site name.  The bloginfo description echos out your description that can be set up in the admin section.  The bloginfo rss2_url if your RSS2 url.  These all can be used to make your site much easier to read and there are quite a few other bloginfo functions on the wordpress.org site.  Some of the other things that are found in the Wooden Default header are wp_list_pages, wp_register, wp_loginout, is_home, and get_option all of these can be used through out the development of your WordPress theme.

Well that wraps up the header section of a WordPress theme, there is alot of different thing that you can do with the header section and in one post I am not able to tell you them all and I dont know them all.  One thing I would ask of you is to go out and experiment with all the different things that you can do with your header section.  Go to the themes section of wordpress.org and download a simple theme and see what they have used in the header.  Research the bloginfo function it is used quite a bit in your theme development.  Well next time I am going to talk about the index page which can be really easy or really confusing depending on how much you research.

Pages List

• The 404 page is your error page which I will talk about a little later.
• The archive page is for when you search.
• The comment page is for your comments.
• The footer page is for your footer.
• The functions page is for any functions your would like to create.
• The header page is your header for every page.
• The index is your home page so that it can have a different layout than all the other pages.
• The page page is the layout page for all the pages you create in the admin.
• The search is the layout for the page when you search for something.
• The searchform is just what you have the search form doing.
• The sidebar is creating the sidebar so when you add it to pages it will go through the functions.
• The single page is for when you click on a post it will take you to the single post.

To Have Successful Theme

All of these pages are a must for you to have a successfully working WordPress theme. There are quite a few thing that you can do with these pages and other pages that I will talk about some other time. With everything that you can do with these page it will take much more than one blog post to explain so I am going to leave the first one short and sweet. I am going to go into a somewhat step by step walk through on how to make each page. One of the first thing that I would do as a new theme developer is find a free theme somewhere on the web preferably wordpress.org/extend/themes and if you would like to make this easy search for wooden default and this is my theme that is really simply and easy to understand. Now that you have your theme take a look at the pages in your theme folder you should either have all of these pages or more. If you don’t have these pages I will eventually teach you how to create them. Well I am going to leave everyone with this task and post the next part in a couple days. If you do not download my theme please leave me a comment on what one’s you do download. Or if you are a designer and would not like to take the time to develop a theme please feel free to send your mockups/psds over to me and I will develop the theme. Of course I will host it on my site and expect a link to my site in the footer. But that is standard for all themes.

Website Design , Development, and SEO Marketing

If you need assistance with web design, web development, search engine optimization, or marketing done to one of your sites please feel free to contact me or Chosen. Chosen is a small, but growing Lansing-based firm offering Web Development, Web Design, Web Hosting, and Web Marketing skills. We have done work for clients and companies, by preference, but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.