If in the past you had to pay your web designer each time you needed to add new content on the website, I assume that waiting time until the site was updated and the involved costs were frustrating. Thanks to WordPress, you don’t need any coding knowledge, so you can manage the content yourself. Adding new pages, text, navigation links, images, galleries, even videos is super easy now from a control panel back-end.

I always tell my clients that if they can work with Microsoft Word, they can manage their site. It takes only 1-2 hours to get used with everything.

Search Engine Optimized

WordPress not only allows non-technical users easily manage their content easily but also has great SEO advantages, which means potential customers can find you easier in Google.

Installing few SEO plugins will enhance your visibility in Search Engines and that way you don’t need to pay a SEO company hundreds or thousands of dollars for a “Basic Setup Fee”. You’ll still need professional help for more advanced work but this will definitively get you started.

SEO Plugins

Here are few SEO plugins I recommend:

• Yoast WordPress SEO. Custom titles and descriptions.
• All in One SEO Pack. Similar and can be used instead of the above.
• Google XML Sitemaps. Will help Search Engines index your blog better and faster.
• Scribe SEO. Analyzes your content and suggest what you can improve.

Free Open Source platform

WordPress is a tool that you don’t have to pay for. Virtually you can get a WordPress site for free. That’s if you don’t need a custom design and / or functionality, where you’ll need the help of a web designer.

Open source means that general public has access and rights to modify it. WordPress is being constantly improved and developed by volunteering developers and is not likely to go anywhere for a long time.

It also has thousands of free plugins that can let you build almost anything with it.

Other Content management systems (CMS)

• Expression Engine is a $300 Premium CMS ideal for large sites. Content is harder and takes longer to manage, but is super flexible and powerfull.
• Concrete5 is a nice robust content management system. Free in the beginning you get to pay along the way for its add-ons. Can get quite costly.
• Silverstripe is dedicated CMS. It probably manages content better than WordPress but back-end interface is not as user friendly so clients still love WordPress more.

Conclusion

While WordPress is not perfect and not suited for every site, the ease of content management, large variety of plugins, simplicity of upgrading and the fact that is free, makes it the most popular choice nowadays for both clients and developers. Really, if there are millions using it, there is a good reason why they do: everyone loves it!

Related Posts

1. Grow your business using SEO
2. 8 Recommended Useful Plugins for WordPress
3. 10 Awesome WordPress plugins roundup with useful tips

For researching keywords we can brainstorm then refine the keywords using tools such: WordTracker or Google Keyword Tool

For a real chance showing up on the first page in Google search results, we should use specific instead of general keywords e.g: “Buy Modern White Long Dress” than “Nice Dress”

You may also want to maintain a WordPress blog and implement the write blog posts with certain keywords. That way you can use an indirect approach for bringing more traffic to your site. Many companies have great success using this strategy.

Link Building

This process can be the most time consuming but it’s considered the most important SEO factor after the content itself.

If you have great content or if you offer great products sometimes other websites link to you without asking it.

However, It doesn’t always work that way. As an alternative, guest blog post writing could work well. Paying for the links to premium related websites can be costly but gets the job done; although Google doesn’t encourage this practice it’s safe to use if the other site is legitimate.

If you’re active on forums or you often comment on other websites blog posts, always make sure you have a link back to your website in the signature or the link field.

Build your website using SEO techniques

Often neglected, if not done properly, how your site is built could affect negatively the overall SEO.

Here are few points to consider:

• Google takes in consideration the loading speed factor so make sure your site has optimized images for web, is built using optimized code and is not done entirely in flash.
• There should be only a heading1 headline on the page then using them decremental as needed, with few exceptions.
• Each page should have title and description tags with the researched keywords we talked above.
• The images should have ALT tag filled in with the keywords, where appropriate.
• When HTML5 has better browser support, you can take advantage of the hgroup and microdata SEO additions, for improved results. If older versions of Internet Explorer are not relevant, you can start using those HTML5 elements now!

Thank you for reading. Please leave your thoughts below.

Related Posts

1. How WordPress Can Help Your Business

I specialize in building custom WordPress sites and I was always looking for a good Ecommerce alternative for my clients. It is known that Ecommerce plugins for WordPress are buggy and the few premium versions available are limited in terms of functionality and flexibility.

I wanted a self-hosted solution because it’s not always profitable for clients to pay commissions to the cloud hosted solutions such as Shopify, Volusion, and BigCommerce. Moreover, you have access to the database, which is important if you need full access and rights to your store. I researched a few options for self-hosted shopping carts.

Here is the list I considered:

Magento

Magento is a free Ecommerce solution, probably the most popular for complex sites but it’s also renowned for the steep learning curve, hard to maintain, and overkill for most clients.

DigiShop

Digishop is the self hosted version of CoreCommerce. It’s robust, but the price ($800-$1000) is too high compared to other alternatives. Also, I don’t think it’s straight forward to update.

CS-Cart

This cart was actually my first option and I would have considered it over Lemonstand since it has many functions. However, upgrading the cart overrides your custom theme (there is a method to build the theme so you can avoid that but it’s not straight forward). The support is located in Russia so you usually have to wait 12 to 24 hours for support, which is inconvenient.
The price is an affordable $300.

Lemonstand

I wanted something new, affordable, easy to maintain, upgrade, and develop, and easy for clients to manage the content. Lemonstand is a modern solution, started in 2010. It is complex but flexible and easy to develop with. Here is a link to their demo site.

Cool Lemonstand features

I won’t go over all their features (you can see those on their site), so here are a few things that made me choose Lemonstand:

One Click Upgrades

Someone finally made a self hosted solution super easy to update without any work on the developer’s part. Click upgrade and you’re done! Your website files are untouched and your cart is up to date with the latest features and fixes. Easy and cheap to maintain.

100% HTML / CSS Customizable

I’ve never been a fan of taking an existing theme and customizing it to make it look like the original design. The site gets too cluttered with a lot of unnecessary code and it’s DIFFICULT to make it pixel perfect. That’s why I believe that creating everything from scratch is the way to go.

I can now start by coding the static site like I always do, then just copy and paste the HTML/CSS/jQuery in the Lemonstand back-end. If you can build WordPress sites, you definitely can built Ecommerce sites using Lemonstand.

Flexibility

You not only have 100% full access to the HTML / CSS but you can also alter the way the site works. You can build a custom check-out process, change how the pages interact with one another, and you’re not locked in a certain way to make things work.

Everything is straight forward to understand: the implementation consists of Pages, Templates, and Partials. Pages represent the content base. You can use Templates when you want different layouts for some Pages. Partials are code blocks that you can pull into your Pages or Templates (e.g. when you create a partial named Header with your header info).

If it doesn’t support certain functionality, then you can go ahead and develop a custom module for it or you can easily find other developers to do so.

Back-end

The back-end was another reason why I love the system. All main functions are organized in a drop-down and as you select each one, the secondary options load in a top menu. It’s easy to find your way around and this is one of the main reasons why clients have no trouble managing the content.

You can also edit the CSS and the PHP code in the back-end by default, so you don’t have to work locally then upload the files, but there is an option to do so if you want to. I figured out it’s easier to use the provided page editor, which includes syntax highlighting. You can even save a page from keyboard (CTRL+S / CMD+S).

Great Customer Service

The staff is very helpful and responsive and that is super important for somebody new to the system. Their documentation is helpful, but it’s still nice to see somebody covers your back.

The forums are good for starting out, but for existing clients they have a ticketing system in place where you get faster responses and help with more advanced questions.

Would be nice to have

Lemonstand is still in its early stages and may lack certain features, but it’s being improved continuously and it’s evolving fast.

Here are few areas where I think it could use improvements:

It needs more modules

Lemonstand has almost all the bells and whistles, but not quite all of them. The modules are being developed and more functionality is added to the core regularly.

Small glitch in placing orders logic

The only drawback I found in the checkout functionality is that Lemonstand requires an order to be placed before somebody can pay for it. If customers get to the Payment page and they change their mind without completing the payment, the order is placed in the back-end. Luckily, the orders are being marked in back-end as paid/unpaid so you won’t ship unpaid orders.

By default, when you get to the Payment page the cart empties, so if the customers wants to go and add another product they will lose all cart contents. Thankfully, there is a workaround for keeping the cart contents, but using that, it will show up in the back-end as multiple unpaid orders for each time this happens. This is not a deal breaker but it could lead to inaccurate reporting.

Navigation

Currently, Lemonstand does not allow clients to easily customize their site navigation links. WordPress custom menus would be awesome here.

Conclusion

Despite the few drawbacks Lemonstand has, its strengths outweigh the weaknesses. It’s an affordable solution that also saves me development time when building Ecommerce sites for my clients.

Please share your thoughts below

Related Posts

No related posts.

The initial settings are based on the following blog post: Can we capture HTTP REFERER information upon form submission using Contact Form 7?, however that method will allow you track only visitors who go directly to the contact page, where the form is. If the visitor comes from Google, browses the site, the referral will show the last page within your site, not initial Google link.

Contact Form 7 initial settings

We will follow the same initial steps like Tony mentioned in his blog post:

• You must have WordPress installed and Contact Form 7 configured to receive emails.
• Add a Text Field element with a css class referer-page: [text referer-page class:referer-page]
• Add the following css to your styles.css: input.referer-page { display:none; }
• Add the following to the Contact Form 7 Message body (under Mail): Referer Page: [referer-page]

Here is a screenshot that explains better what happens in Contact form 7 settings:

Improved tracking based on visitor IP

In order to make it all work we need to add the following code in the function.php within your theme folder.

	//--------------- Referer code for contact form 7
function getIP() {
 
	$sProxy = '';
	if ( getenv( 'HTTP_CLIENT_IP' ) ) { 
		$sProxy = $_SERVER['REMOTE_ADDR'];
		$sIP    = getenv( 'HTTP_CLIENT_IP' ) ; 
	} elseif( $_SERVER['HTTP_X_FORWARDED_FOR'] ) { 
		$sProxy = $_SERVER['REMOTE_ADDR'];
		$sIP    = $_SERVER['HTTP_X_FORWARDED_FOR']; 
	} else { 
		$sIP    = $_SERVER['REMOTE_ADDR'];
	}
	if ( ! empty( $sProxy ) ) {
		$sIP = $sIP . 'via-proxy:' . $sProxy; 
	}
	return $sIP;
}
 
function setRefererTransient( $uniqueID ) {
	if ( false === ( $void = get_transient( $uniqueID ) ) ) {
		// set a transient for 2 hours
		set_transient( $uniqueID, $_SERVER['HTTP_REFERER'], 60*60*2 ); 
	}
}
 
function getRefererPage( $form_tag ) {	
	if ( $form_tag['name'] == 'referer-page' ) {
		$uniqueID = getIP();
		setRefererTransient( $uniqueID );
		$form_tag['values'][] =  get_transient( $uniqueID );
	}
	return $form_tag;
}
 
if ( !is_admin() ) {
	add_filter( 'wpcf7_form_tag', 'getRefererPage' );
}

The code will store the referral page at the moment the customer comes on the site for 2 hours. If they submit the form within this time, no matter how many pages the visited on the site, it will still show the initial referral.

The final result

After somebody submits the message through contact form, this is how it should look like in your email client:

Other notes:

No tracking method, including Google Analytics is not 100% precise, as there are people with JS disabled, with cookies turned off, people who actually cannot be tracked using standard methods.

Same with this method, at times you might receive emails with a blank value for referral part. However the method works well for most time, enough to get real time feedback for your marketing efforts.

Related Posts

1. How to load Javascript on specific pages in WordPress
2. 8 Recommended Useful Plugins for WordPress
3. 10 Awesome WordPress plugins roundup with useful tips

There are two other methods you might want to try out, which are explained in this article, so I won’t go over them. The methods will throw a deprecated error if your hosting provider is using PHP5.

The shopping cart I used (Lemonstand) had the error reporting turned on, with no (easy) way to turn it of and so, the solutions didn’t worked with this platform, although they worked with a basic .php file.

Please follow the instructions closely, otherwise it will fail to work.

The JSON / jQuery method

1. Enable JSON API in the WordPress blog

First thing you need to install the following plugin in WordPress: http://wordpress.org/extend/plugins/json-api/.
Without it, we cannot pull the post information we need so make sure you also run a test to see if it works. The plugin is well documented so that should be straight forward.

Make sure the core option is activated and the API base has api as extension.

2. Include jQuery in the outside WordPress file

From this point on, we will work outside of WordPress where you want to show the latest post(s). For testing purposes you can even create a index.html file on your computer.

Next, we need to make sure we have the jQuery library included. You can link from the Google CDN for better performance:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'></script>

Or, you can also leave it included from WordPress so it will upgrade automatically along with WordPress (recommended)

3. Include the JSON / jQuery code within head tags

<script type="text/javascript">
var MYBLOG_LIMIT = 1;
var MYWRAPPER_CLASS = 'homeblog';
 
var WP={open:function(b){var a={posts:function(){var d=MYBLOG_LIMIT;var e=0;var c={all:function(g){var f=b+"/api/get_recent_posts/";f+="?count="+d+"&page="+e+"&callback=?";jQuery.getJSON(f,function(l){var k=l.posts;for(var j=0;j<k.length;j++){var h=k[j];h.createComment=function(i,m){i.postId=h.id;a.comments().create(i,m)}}g(k)})},findBySlug:function(f,h){var g=b+"/api/get_post/";g+="?slug="+f+"&callback=?";jQuery.getJSON(g,function(i){h(i.post)})},limit:function(f){d=f;return c},page:function(f){e=f;return c}};return c},pages:function(){var c={findBySlug:function(d,f){var e=b+"/api/get_page/";e+="?slug="+d+"&callback=?";jQuery.getJSON(e,function(g){f(g.page)})}};return c},categories:function(){var c={all:function(e){var d=b+"/api/get_category_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.categories)})}};return c},tags:function(){var c={all:function(e){var d=b+"/api/get_tag_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.tags)})}};return c},comments:function(){var c={create:function(f,e){var d=b+"/api/submit_comment/";d+="?post_id="+f.postId+"&name="+f.name+"&email="+f.email+"&content="+f.content+"&callback=?";jQuery.getJSON(d,function(g){e(g)})}};return c}};return a}};
 
var blog = WP.open('http://www.fldtrace.com/');
blog.posts().all(function(posts){
  for(var i = 0; i < posts.length; i++){
    jQuery('.'+MYWRAPPER_CLASS).append(function(){
      return (posts[i].thumbnail) ? '<a class="lastpost_title" href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></a><a href="'+posts[i].url+'"><img src="'+posts[i].thumbnail+'"/></a>' : '<a href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></a>';
 
    });
  }
});
</script>

You need to configure the next options

• var MYBLOG_LIMIT = 1; will define how many posts will show. By default is 1.
• var MYWRAPPER_CLASS = ‘homeblog’; – the class name of HTML element where the post(s) will be shown.
• var blog = WP.open(‘http://www.fldtrace.com/’); – this should link to your blog main domain (mandatory)
• by default, will be shown the post thumbnail and title both linked. The rest is CSS customization, including adjusting the thumbnail size.

4. Define the place where the post should show up

Apply the following class to an element somewhere within body tags:

<div class="homeblog">
</div>​

Notes

Additionally you can pull more post information using the plugin’s JSON API documentation.

I’d say this method gives us a lot of freedom of showing posts from WordPress anywhere you need, compared to the PHP method where we have limitations.

Related Posts

1. Center a DropDown Menu Using CSS and jQuery
2. WordPress custom post types, custom back-end columns and post thumbnails
3. WordPress Custom Post Types Numeric Title Order

• Web Designer Depot is my favorite one, as you get to learn best practices and it keeps you informed about other useful resources on the web. They publish articles almost each day and you get to learn even more, if you follow them on twitter. visit site
• CSS Tricks – Chris Coyer, the owner of the blog, delights the web design community not only with “CSS tricks” but also jQuery and other cool implementations. A must follow. visit site
• Perishable Press – Jeff Star, shares CSS tips and tricks along with WordPress advice but also offers unique insights on certain subjects. For example, I enjoyed reading one of his article “Switching from PC to MAC”, especially I’m planning do this move. visit site
• NetTuts – you can find here all kind of useful tutorials from how to make an illustration to how to code a website. visit site
• SitePoint Blogs – Web design news and “how to” tutorials varying from PHP coding to jQuery, makes SitePoint an important resource and community website. visit site
• Web Designer Wall is renowned for CSS techniques tutorials and best practices for how to build a website. The website itself can be taken as great example on how to build a responsive design. visit site
• 24Ways – I haven’t seen them posting in 3 months already, but it’s good to keep an eye for their further publications, as they provide high quality content. visit site
• Smashing Magazine is one of the most popular Blogs around. They post articles very often and have long high quality materials, while addressing to a broad audience. That’s also their disadvantage. Materials are super long to read and you’ll not always find something that might interest you. visit site
• A List Apart represents the elite of web design community. They rarely post, but when they do so, you can rest assured that will become the trend. visit site

WordPress related resources

• Digging Into WordPress is one of the best WordPress resources around here. They even launched a book that I recommend purchasing. visit site
• WP Engineer comes up often with useful hacks and techniques for WordPress installs. visit site
• Justin Tadlock one of the WordPress core developers, always provides good tutorials for new functionalities in WordPress. visit site
• Cats Who Code is another very useful resource for WordPress but not limited to. visit site
• WP Recipes provides short snippets of code that you can just go and try on your site. visit site
• Weblog Tools Collection keeps the WordPress community updated with important news, new free themes and plugins. visit site

Search Engine Optimization

• SEO Moz comes up with great SEO tips and general SEO advices.
• visit site
• Search Engine Journal – if you are subscribed to this one, you are pretty much covered on all SEO news and general SEO strategies. visit site

Freelancing

• Freelance Folder is a great community of freelancers where you can discover different advices and resources. visit site
• Freelance Switch is the most popular website for freelance community. You can find out here very useful posts for freelancers, a job board, forum and their featured hourly rate calculator. visit site

Tips for keeping up with everything

• Reading so many Blogs, might get overwhelming at some point, that’s why make sure you use an RSS reader. Google Reader is a great free tool.
• If you use Twitter make sure you follow them too.
• Allocate a time of the day for this task, so you can be productive.

If you have other great Web Design resources, not mentioned here, please share in the comments.

Related Posts

1. FLDtrace 2.0 – New Design

It is my favorite because allows you to define fields on write post/page and it is the most robust solution of this kind with little bugs and awesome support. You can also show certain custom fields on specific pages, posts, custom posts or templates eliminating the clutter.

My tips: use the duplicate fields function; add field labels for instructions, enable wpautop for automatic paragraphs; leave enabled only the upload image icon (mediaOffImage = true). Your client will be your fan.

Official link

2. Contact Form 7

This does exactly what it says and is the most popular contact form plugin for WordPress. It also supports translations so it works great with WPML translate plugin.

My tip: activate Akismet and integrate it with this plugin. No more Captcha and great anti-spam protection. Use the watermark feature for having the input title showing over the field itself.

Official link

3. Image Widget

This plugin is perfect for uploading images to sidebars, or other regions in the site. The good part is that allows you to edit them too, so you don’t have to visit Media Library just for that!

My tip: the widget will also output the title, so if you don’t want that showing in the site, when you define the widget in your functions.php file, wrap the the widget’s title output in than in CSS you hide that class: .invisible {position: absolute; text-indent: -9999px}.

Official link

4. Subscribe2

Subscribe2 will allow your visitors to subscribe with their emails for new posts notifications. It will also act as a newsletter for subscribed users, so you can send periodic messages. You can import email addresses and has unsubscribe option, so those who don’t want to receive updates anymore, can easily unsubscribe.

My tip: The form subscription inputs, don’t have any classes / ids assigned by default. If you want to style it make sure you make use of the attributes selectors: input[name="Subscribe"] {css button styling here..}

Official link

5. MapPress Easy Google Maps

If you ever tried to include an iFrame Google map in the WordPress editor, than later re-saved the page, you probably noticed that the map was gone. That’s because the editor strips the iframe code. There is a work-around for that, but there is a far better solution such as this great plugin.

What is awesome, is that when you click on directions, you get those within the site! See it in action on a website I built.

My tip: set the pop-up description to stay open all the time. You can use inline CSS to customize the text inside.

Official link

6. Ozh’ Admin Drop Down Menu

It simplifies the back-end interface and places the navigation on horizontal, as it is supposed to be, for easier access. It also has nice colors and improved contrast.

Without this plugin, I could barely find my way around in a default WordPress installation. It’s the first I install, always!

Official link

7. White Label CMS

White Label CMS is one of my ultimate WordPress powers. It simplifies the back-end by removing unnecessary links for Editor role and ads a nice professional touch to the control panel interface. It also simplifies dashboard and let you upload custom logos for log-in page, header logo and footer.

My tip: assign an editor role for your client and use together with Capability Manager, see next plugin.

Official link

8. Capability Manager

This plugin let’s you tweak each user role. It is great when you want to give “admin like” rights with some limitations.

Create an editor role for your client and make sure you eliminate functions that he doesn’t need or he might use to mess things up.

Official link

9. Easy FancyBox

This is what I currently use for my portfolio lightbox. I love it because doesn’t creates any interferences with other jQuery plugins, it’s fast and has a great animation.

My tip is more related to the CSS part, but it is a nice touch to make all thumbnails that link to a large image, have a custom cursor on focus:
a.fancybox {cursor: url(“images/cursor-zoom.png”), pointer}
a.fancybox {cursor: url(“images/cursor-zoom.png”), -moz-zoom-in} – make sure to add both lines for browser compatibility and link to your cursor image.

Official link

10. Disqus Comment System

If you ever tried to customize the look and maybe functionality of a WordPress commenting section, you know it is not quite piece of cake. This plugin replaces the commenting form with a more advanced functionality and has a nice design.

You’ll need to create an account but this would be a great addition to any blog and is great when the client is on a budget.

Official link

Your turn

I left out on purpose the most popular ones that everyone knows such: All in one SEO and DB backup, but if you can recommend a great plugin not listed here, please share.

Related Posts

1. 8 Recommended Useful Plugins for WordPress
2. Show subpages only for the current parent page in WordPress
3. How to load Javascript on specific pages in WordPress

First, I want to compare them by price. While Godaddy provides a cheaper offer at $4.99/month, compared by the number of features offered, Bluehost comes first at only $6.95/month at unlimited databases and emails. The same unlimited plan costs $14.99/month at Godaddy.

Bluehost is Cheaper!

2. Speed and Downtime

While every hosting provider has periods of downtime, I have noticed about the same down-time for both, whenever they have a maintenance going on.

The sites powered by WordPress are loading noticeable faster on Bluehost. Here, I refer mainly at the time the connection is made to database, before even the site is being loaded. At Godaddy, that waiting is longer by 1-3 seconds depending on the database size. I do not even want to mention the hosting provider FatCow where this waiting time is 15-20 seconds!

Bluehost is Faster!

3. Features supported on the server

In case you want to have plug-ins or additional functionality running properly, DON’T sign up with Godaddy!

I remember I had a very bad experience in the past, when a client of mine wanted a newsletter software installed on his Godaddy server. I managed to install it, but than, it would not send mass emails. Testing the same functionality on Bluehost, it worked with no problems.

Speaking with Godaddy technical support, they told me we need to upgrade the account and pay like $150/month, so we can have that feature supported! No thanks.

Bluehost has more features configured and installed!

4. Automatic Database Back-ups

Another bitter experience with Godaddy, it was when we have lost information on a website we were developing, with no manual back-up at that time. After we figured out some problems with the content and that after few days, we found out that Godaddy only stores the back-ups for 1 day. If you need to go to an earlier date, their programmers need to go in there manually and restore it for you for the cost of $150. Your mistake your pay!

In exchange, on Bluehost they store the back-ups for 30 days so you don’t even have to worry about using your own back-up manager.

Bluehost is more trusted! Godaddy plays dirty!

5. Database and username setup waiting time

For some unexplained reason, on Godaddy, whenever we make a fresh install of WordPress we need to wait at least 30 minutes for the database and username to get created. In case you need to change the FTP password you need to wait another 30 minutes, waiting precious time just waiting when you have that deadline in few days.

I haven’t heard of such non-sens on other hosting providers including Bluehost.

Bluehost saves developers time!

6. Customer service and support

Both companies respond in pretty quick to phone calls, however on Godaddy the waiting is higher due is a large company with more clients.

What I liked on Bluehost, is that sometimes they do things for you and they really want to help without charging you extra.

On Godaddy, they always try to up-sell or have no clue about my problem.

Bluehost support is more professional!

Bluehost is the winner!

Because I love working with WordPress on Bluehost, save me time and money to clients in long run, I became a proudly Bluehost affiliate; in case you still haven’t decided on a hosting provider I strongly recommend you sign-up: http://www.bluehost.com/track/fldtrace/CODE13.

Your experience

While Godaddy is a very large company and can focus on marketing better, that’s a reason why everyone heard about and trust them, while they should not.

What is your experience with both? Is there any other good hosting provider worth considering?

Related Posts

No related posts.

At this point, I assume we already have created the custom post type for our top 10 and I will focus only on the ordering part. In my last article, I have already explained how to create custom post types and improve the back-end interface.

Numeric Custom Post Ordering in Front End and Back End view

First step would be to create the custom post types and give them numbers as titles

Add the following code in active theme’s functions.php file:

 //order numeric posts 
 function orderby_post_title_int( $orderby ) { return '(wp_posts.post_title+0) ASC'; }
 
 //order back-end posts in numeric order
 function set_custom_post_types_admin_order($wp_query) {
   if (is_admin()) {
   // Get the post type from the query  
     $post_type = $wp_query->query['post_type']; 
 
   	  if ( $post_type == 'reviews') { 
     	add_filter('posts_orderby', 'orderby_post_title_int' );
	  }
   }  
 }  
 add_filter('pre_get_posts', 'set_custom_post_types_admin_order');

In your theme file (e.g index.php), where you want to display the list with the custom post types, add the code before the loop:

<?php
add_filter('posts_orderby', 'orderby_post_title_int' );
$loop = new WP_Query( array( 'post_type' => 'reviews', 'orderby' => 'title', 'order' => 'ASC', 'posts_per_page' => 10 ) );
remove_filter('posts_orderby', 'orderby_post_title_int' );
?>

Note that our custom post type is called reviews and you need to replace that name with yours.

Final Thoughts

The method uses a filter posts_orderby, which in an unofficial blog it states that is not included in WordPress 3, however I can see that it works; in future major releases it might become deprecated but I don’t see it very likely.

I hope this will help other developers who encountered this issues; let me know if you have any troubles with the code.

Related Posts

1. WordPress custom post types, custom back-end columns and post thumbnails
2. How To Display Parent Page Title in WordPress
3. Display Latest Post Outside of WordPress with JSON and jQuery

While the possibilities of using custom post types are limitless, for the sake of simplicity, I will use as example a simple investment website, which will feature a title, description and a thumbnail with a property.

Register and calling the custom post type

First, I want to exemplify how the back-end of our custom post type will look like. As you can see, the interface is simplified and contains only the necessary editing areas.

Register the custom post type

In the functions.php file from the active theme directory, add the following code:

//-----------register custom post type
  register_post_type( 'investments',
    array(
      'labels' => array(
        'name' => __( 'Investments' ), //this name will be used when will will call the investments in our theme
        'singular_name' => __( 'Investment' ),
		'add_new' => _x('Add New', 'investment'),
		'add_new_item' => __('Add New Investment'), //custom name to show up instead of Add New Post. Same for the following
		'edit_item' => __('Edit Investment'),
		'new_item' => __('New Investment'),
		'view_item' => __('View Investment'),
      ),
      'public' => true,
	  'show_ui' => true,
	  'hierarchical' => false, //it means we cannot have parent and sub pages
	  'capability_type' => 'post', //will act like a normal post
	  'rewrite' => 'investment', //this is used for rewriting the permalinks
	  'query_var' => false,
	  'supports' => array( 'title',	'editor', 'thumbnail', 'excerpts', 'revisions') //the editing regions that will support
    )
  );

For more information regarding register_post_type please visit the official codex documentation: http://codex.wordpress.org/Function_Reference/register_post_type.

At this point, you can go ahead in back-end and add a new investment, which will show up next in our site, after we do the following step.

Creating and calling the custom post type in our template

Next, we will create a file called investments.php and add the following code to it:

<?php
/*
Template Name: Investments
*/
?>
<?php get_header(); ?>
 
                    <?php $loop = new WP_Query( array( 'post_type' => 'investments', 'posts_per_page' => 10 ) ); ?>
 
					<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                                <div class="invest_thumb"> 
                                    <?php
										if ( has_post_thumbnail() ) { ?>
											<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
										<?php } else { ?>
											<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory') ;?>/i/post-no-img.png" alt=" "/></a>
										<?php }
									?> 
                                </div>
                                <div class="investment_info">
                                    <h2><?php the_title() ?></h2>
                                    <?php the_content(); ?>
                                </div>
                    <?php endwhile; ?>
 
<?php get_footer(); ?>

As you can see at the top, we specified to this page a special template name. In back-end, we have to create a page, which we can be named investments (or any other name), than assign it our newly created template. This page, will display our investments and now we can organize our general navigation easily.

We specified that our custom post type should behave like a post, which means we can have single post view. We can do that by duplicating our investments.php file and name it: investments-single.php. For this file we don’t need anymore the template name anymore at the top, so make sure you remove that part, so we don’t mess up the first template.

Custom post thumbnails in edit post / custom type overview

Starting with WordPress 2.9, we have the ability to easily attach to any post or page a featured image. Our purpose is to show up a preview of this thumbnails in our investments back-end overview.

In functions.php file add the following code:

//ENABLE POST THUMBNAILS FOR ALL POSTS AND PAGES
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 125, true ); // hard crop mode true
 
//------enable post thumbnail preview for custom columns 
if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {
 
	// for post and investments
 
	function fb_AddThumbColumn($cols) { 
		$cols['thumbnail'] = __('Thumbnail'); 
		return $cols;
	}
 
	function fb_AddThumbValue($column_name, $post_id) {
 
			$width = (int) 200;
			$height = (int) 125;
 
 
			if ( 'thumbnail' == $column_name ) {
				// thumbnail of WP 2.9
				$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
				// image from gallery
				$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
				if ($thumbnail_id)
					$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
				elseif ($attachments) {
					foreach ( $attachments as $attachment_id => $attachment ) {
						$thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
					}
				}
					if ( isset($thumb) && $thumb ) {
						echo $thumb;
					} else {
						echo __('None');
					}
			}
	}
 
	// for posts
	add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );
	add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );
 
	// for investments
	add_filter( 'manage_investments_columns', 'fb_AddThumbColumn' );
	add_action( 'manage_investments_custom_column', 'fb_AddThumbValue', 10, 2 );
}

Custom back-end columns overview

By default, any WordPress post or page will display the title, author, categories, date which is not relevant to our investment page, where we want to display only title, description and the investment thumbnail, like in following image:

The only left thing to do, is to add in functions.php file the next code:

//----------------edit custom columns display for back-end 
add_action("manage_posts_custom_column", "my_custom_columns");
add_filter("manage_edit-investments_columns", "my_investments_columns");
 
function my_investments_columns($columns) //this function display the columns headings
{
	$columns = array(
		"cb" => "<input type=\"checkbox\" />",
		"title" => "Investment Title",
		"description" => "Description",
		"thumbnail" => "Thumbnail"
	);
	return $columns;
}
 
function my_custom_columns($column)
{
	global $post;
	if ("ID" == $column) echo $post->ID; //displays title
	elseif ("description" == $column) echo $post->post_content; //displays the content excerpt
	elseif ("thumbnail" == $column) echo $post->post_thumbnail; //shows up our post thumbnail that we previously created.
}

Resources

Custom columns:

http://kovshenin.com/archives/custom-post-types-in-wordpress-3-0/

Post thumbnail post and page overview:

http://wpengineer.com/1960/display-post-thumbnail-post-page-overview/

Conclusion

Using custom post types we can provide easy to use content management systems, yet powerful and flexible.

Going the extra mile and customize the WordPress back-end, it makes a difference between good developers and great developers, while our clients can enjoy their polished and simple to use websites.

Related Posts

1. WordPress Custom Post Types Numeric Title Order
2. Display Latest Post Outside of WordPress with JSON and jQuery
3. How to load Javascript on specific pages in WordPress