CSS3 Media Queries enable us to use conditionals depending on resolution. For example we can specify something like this: if browser’s width is 480px or smaller than hide sidebar and/or make the navigation horizontal.

Please see below how the next website behaves when it’s viewed at different browsers widths or resolutions: http://webdesignerwall.com/

Large resolutions

Medium resolutions or iPads (tablets)

Small resolutions or iPhones (smarthpones)

Adaptive Design and Media Queries Advantages

• You can serve only the most important content for smaller resolutions such as iPhones, thus eliminating clutter
• Higher chances that the website will lead to more conversions (better selling of products or services)
• If a significant portion of your audience are using mobile devices, an adaptive website makes sense.

Adaptive Design and Media Queries Disadvantages

• Adaptive websites take longer to code and are more expensive
• Those who expect the same pixel perfect layout for each resolution will be disappointed. However, this could be an advantage in certain cases
• Before investing in this option I recommend checking the analytics. If most of the visitors are using 1024px resolutions and up, an adaptive solution wouldn’t make sense
• The requirement is to always build first the Mobile version than customize it for larger resolutions
• Older browsers don’t support CSS3 media queries but there is a Javascript fallback. However a very small percentage of users, who don’t have Javascript enabled, will be forced to see the website version target for mobiles.
• Most of fixed websites show up reasonable well on smaller devices.

Conclusion

Adaptive designs would not always benefit all website owners and investing extra in this feature does not makes sense in all cases. However, certain business owners can greatly improve the browsing experience of their users. If a significant percentage of the visitors are browsing using mobile devices, providing them with an easier way to access the content could lead to higher profits.

Related posts:

1. Mistakes print/graphic designers do when design websites

First step for promoting your business is getting a website, no matter how basic. If the budget is low there are free solutions available that you can use to get started. You can always upgrade to a professional site later on. Along with the website it is important to use a professional domain name that would probably be used for the entire lifespan of the business. The domain name shouldn’t be too long, it could contain keywords related to the business and it should have an original name so it can be easily recognized in search engines.

Some business owners have success just by starting with a Facebook Fan page, which later, should be linked to and from your website.

Plan the content really well

Next step would be to figure out what content you’ll need and how to organize it in pages, so the potential customers can easily find it.

Content strategy for brochure websites

For smaller business, with a basic brochure site, some typical pages could include: Home page, About Us, Services, Photo Gallery, Contact page and perhaps a Blog which we will discuss later on.

• The Home page should always act like a directory that points to the most important sections of the site such as services, blog and contact pages. Using a short intro text is a great way to describe your company and is important for SEO purposes. A photo slideshow on home page can better help visitors understand your business and create a WOW factor.
• About Us could contain company information, team bios and even a short customer testimonial if it makes sense in the context.
• Services page can be divided in subpages, especially if you offer more types of services. On this page you could load related content, which will increase your chances of being discovered in search engines!
• Photo Gallery works well for certain business. “A picture equals thousand words” stands true in this case.
• The Contact page normally includes contact information (name, address, email, phone etc.), a contact form and a map for directions. I recommend all of those when applicable.

What not to do

• Do not create long pages which are hard to read. Keep it Short and simple.
• Do not load unprofessional photos. The images should be high quality with an optimal resolution.

Content strategy for Ecommerce websites

An Ecommerce website is more complex and among the pages mentioned above, a shopping site needs extra pages such: Categories, Product Details, Cart, Checkout, Customer Profile etc.

• Categories page contains a list of products with each product linked to its details page.
• Product Details is the place where, most of times, the customer decides if he/she will buy the product. This page needs a great looking image with multiple views and zooming option, price, description, reviews capability, related products and an easy to spot Add to Cart button.
• Cart page could be an optional stop in checkout process, where customers can view a summary of the ordered products, estimate shipping costs, apply discounts etc.
• Checkout process is built using more steps such as sign-in / creating user account, billing information, shipping information, payment and order confirmation. In some cases most of these steps can be combined in one page using a method called one step checkout. One step checkout can increase sales by minimizing customer clicks but it’s not ideal if the information required is really long. Breaking it into smaller steps makes more sense.
• Customer profile is for when a user created an account and they can later access their order history, wish-list, contact information etc. This is a must have feature for making the shopping experience easier for returning vistors.

Ecommerce Tips

• For Ecommerce sites, where users need to insert sensitive billing information, lacking SSL certificate can make many customers shy away. While I don’t heart GoDaddy hosting provider, it offers one of the best price for an SSL. It’s really not that expensive.
• Lacking good product photos or meaningful description, can turn off customers.
• Price it’s one of the main factors in purchasing decision. Charging too much might not sell and going too low can hurt your business or customers will think the product is cheap. Finding a balance is the way to go.

Web Design quality

While the products and services are important, the package sells them, which in our case is the design part. A great looking modern web design will represent you in a professional light and could land you more customers, while a bad design can hurt your business.

While you can start with a cheap website as I explain in the beginning of the article, in long run it is more profitable to invest in a good looking website.

Branding is equally important, and while a logo designed by your nephew may be good enough for your personal website, it just won’t do it for a professional business website.

Marketing your website

Word of mouth

Your friends and family can always be a great resource for promoting your business. That’s a reason why you should always carry professional business cards, which will also contain a link to your website where your new connections can go and learn more.

Blogging for marketing

A blog is a great and relatively inexpensive way to promote yourself. Using a blog, you can keep your customers updated with latest information and establish yourself as an expert in the field. Search engines also love freshly posted content that’s why you’re more likely to land on the first page in Google.

Social media

Social media may be a very effective way for connecting with potential customers or leads.

Popular social networks currently are: Facebook, Twitter, Youtube, Linkedin, Pinterest and Google+ which are a great way to build a fan base.

Since you know your business and customers the best, this is something that you can do all by yourself. If you don’t have time, energy or knowledge, seeking for professional advice is the right decision because you need to be there!

Search Engine Optimization

Search Engine Optimization or simply called SEO it’s what helps you get more traffic on the website. While professional advice and SEO service is costly, first you should make sure the website has a nice design and everything else mentioned above is checked. There is no reason to have many visitors, if your site is not able to convert them to customers.

There is more information on this subject than I could ever hope to fit in one article, but some tips to consider are:

• Researched keywords implemented in title tags
• Link Building: as more quality websites link back to your website, as better your site ranks
• Analyzing and optimizing traffic data. Installing Google Analytics for tracking your visitors, can help you refine your keywords and content. Having many visitors and no sales means that you probably need a redesign.
• If you have the cash for paid search, taking advantage of Google Adwords can quickly boost your website on the first page.

Conclusion

Investing in a great looking professional site and branding, marketing it efficiently using word of mouth, blogging, social media and SEO, can grow your business and lead you to profits.

No related posts.

Custom fields allow us to add content blocks in different areas of a given page. Let’s take as an example a website home page, where we need to show a video and a slideshow. In WordPress back-end the default text area could let us easily post those one after another, but what if I want to show the video in a sidebar and the slideshow in the main content area in our home page? I also don’t want to show the video on contact page where I want to have a map instead.

In following site we need the slideshow above, main content at bottom left and the video at the bottom right in our website layout.

The solution is that we need to split the content in different content blocks and pull them in our website layout using Custom Fields and as I will show later, it’s easy to place them wherever we need in our HTML.

An important point is that Custom Fields let us decide which content block goes where on a specific page.

Custom Field Template plugin enhances the default WordPress custom fields. The difference is that it adds a nice look to these fields and give us more flexibility and power.

Using this method we can be creative and flexible with our content management and we can place those content blocks anywhere on our home page.

The difference between Custom Fields, Custom Post Types and Widgets

But wait! What if I want to show those content blocks, for example the video, on other pages of the website?

Custom fields alone are best for creating content blocks for specific pages. If you need to re-use the same slideshow or video on different pages of the site then we need to use Custom Post Types or Widgets, which are defined globally. That means you upload the video once and it’s being pulled on other pages automatically. We could do that with Custom Fields as well, but nobody wants to upload the same video ten times for ten different pages. And what if we need change that video later on? Change it again on the ten pages individually?

That’s why we need to analyze in the beginning where we’ll need to use the content blocks and that way we can decide which method to apply.

When should we use each method?

• For example if we want to show a slideshow containing customer testimonials, in a sidebar, on almost each page of the site, I’d definitively go with custom post types method.
• However, for displaying text, latest blog posts or blog archives in the sidebar on a certain number of blog pages in our site, I’d choose Widgets.
• And last, we choose Custom Fields if we have to specify different content blocks for a single page or use those content blocks with different content for multiple pages. For example, under same layout position we want a video for home page but on contact page we want to show a map. We specify the Custom Field once in our template and update different content on each page using the Custom Fields area.

First Look at Custom Fields and at Their Functions

Now let’s see a Custom Field Template main advantage and compare the look of default Custom Fields with those of our plugin.

Default Custom Fields

As you can see all custom content fields from all over the site are grouped in a drop down menu with no explanations. If the site is bigger content management gets clumsy and hard to use. Those fields also don’t have text styling options.

Custom Field Template Plugin

Like I mentioned in the beginning, after Custom Field Template plugin installation, our content fields will become easier to manage.

Wow. What just happened? Our default content fields transformed in something beautiful and easy to use.

If you notice, now we only have content fields specific to our home page, where each one is grouped in its own fieldset and has an explanatory label. We ca now easily throw in images, videos, text which we can style etc.

Custom Field Template Plugin Configuration

From this point on I assume you are familiar with WordPress back-end and although coding experience it’s not required, next section is dedicated to developers, both beginners or advanced. So our first step is to install our plugin and head out to the configuration page which is in Settings -> Custom Field Template.

Custom Field Template Plugin Settings Page

Next we will define the Custom Field for the Video.

• The template title gives a name to our Custom Field. I recommend using the same page name where we will use the Custom Fields so we can better keep track of everything. If the Custom Fields are used on all pages, the template name can be something general like “All Pages Content Fields”
• Templates Instruction let us specify instructions for the client or just for us developers. As long we use labels for each Custom Field I don’t see this part particularly helpful.
• Post Type lets us select where we want to display the Custom Fields. It can be shown on all blog posts, pages or both. Normally blog posts don’t require custom fields and I usually enable those just for pages.
• Custom post type – you can tie custom fields to custom post types for ultimate content management! Just insert the custom post type name that you created and those custom fields will show under that Custom Post Type. The Custom Post Type must support custom fields and you define that when you create it.
• Post Id which is a Page Id as well, let us define this template with its Custom Fields on a specific page. In my example the home page has an id of 4. This way we don’t clutter other pages with the Custom Fields that won’t be used anyway. Category ID uses the same principle.
• Post template file name – let us show our Custom Fields on pages that share same layout. It’s a nice way for giving us more control.

Template Content

[Youtube_fieldset]
type = fieldset_open
legend = Youtube Video


[Youtube]
type = textarea
rows = 4
cols = 40
tinyMCE = true
htmlEditor = true
mediaButton = true
hideKey = true
label = Insert here video using the Youtube Icon

[Youtube_fieldset]
type = fieldset_close

Within the same template, right after first Custom Field, we can add another one for our slideshow images (We assume we already have created the frontend using a jQuery slideshow plugin)

[Slideshow_fieldset]
type = fieldset_open
legend = Slideshow area

[Slideshow]
type = textarea
rows = 4
cols = 40
tinyMCE = true
htmlEditor = true
mediaButton = true
label = Upload Slideshow Images Here using Medium Size - 540 Wide X 405 High
hideKey = true

[Slideshow_Text]
type = textarea
rows = 4
cols = 40
tinyMCE = true
htmlEditor = true
mediaButton = true
hideKey = true
label = Insert Slideshow Comments

[Slideshow_fieldset]
type = fieldset_close

Code explained and few tips

For usability purposes I recommend wrapping each Custom field in a fieldset. Clients will send you Christmas gifts for that. In our first example, the fieldset name is [Youtube_fieldset] and should be changed for each new Custom Field.

Using hideKey = true we hide our custom field name and with label we replace that with a useful explanation. The other code pieces are self explanatory and more options are named in plugins Option List.

Another mention is that the plugin Custom Field Template won’t replace by default the regular Custom Fields shown above and you should go under plugin configuration and choose in Global Settings area Disable the default custom fields

Including Custom Fields in our template files

First we define the custom fields in the loop on our home_page.php:

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post();
	$yt = do_shortcode(get_post_meta($post->ID, 'Youtube', true));	
	$slideshow = get_post_meta($post->ID, 'Slideshow', true);
	$slideshow_text = get_post_meta($post->ID, 'Slideshow_Text', true);
	$home_bottom = get_post_meta($post->ID, 'Home_Bottom', true);      		
?>

Then we call each Custom Field in different areas of the same page.

<div class="post-wrap">
		<?php echo $yt ?>
</div>
 
<div class="post-wrap">
 
	<div class="slideshow flexslider">
		<?php echo $slideshow ?>
	</div>
		<?php echo $slideshow_text ?>
 
</div>

Custom Fields Outside the loop

We can use just next snippet:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'Youtube', true);
?>
</php>

Where Youtube should be replaced with your custom field name. This way we can place our custom fields anywhere in our WordPress templates!

Don’t show Custom Fields if empty

<?php if($home_bottom !== '') { ?>
	<div class="post-wrap">
		<?php echo $home_bottom ?>
	</div>
<?php } ?>

This would be useful as each post-wrap has a border-bottom. If the custom field is empty you don’t want to show that border by itself. In future, when the client decides to add content in that custom field, everything will show up.

Show/Hide Content If A Custom field Has A Specific Value

Expanding the idea above we can achieve this too.

In this example we have a testimonial Quotes Slideshow published via post types in a sidebar of each page. Now if the client doesn’t want to show the quotes on certain pages, we can give him the option with radio buttons used as custom fields. In our Custom Field Template Settings page, we create a new template, enable it for all pages and we have:

[Enable_Sidebar_Quotes]
type = radio
value = yes # no
default = yes
hideKey = true
label = Show Sidebar Quotes slideshow on this page?

In our sidebar.php file we insert following:

<?php $quotes_true = get_post_meta($post->ID, 'Enable_Sidebar_Quotes', true); ?>
<?php if($quotes_true !== 'no') { ?>
 
<div class="quotes-wrap clearfix">
	<img class="left" src="<?php bloginfo('template_directory'); ?>/i/quotes-top.png" alt="quotes-top" alt=""/>
	<div class="quotes flexslider">
		<ul class="slides">
		<?php remove_filter( 'the_content', 'wpautop' );?>
			<?php $loop = new WP_Query( array( 'post_type' => 'quotes', 'orderby'   => 'menu_order', 'order' => 'ASC', 'posts_per_page' => -1 ) ); ?>
 
			<?php while ( $loop->have_posts() ) : $loop->the_post();
			?>
 
				<li>
					"<?php the_content(); ?>"
					<span class="name">- <?php the_title() ?></span>
				</li>
			<?php endwhile ?>
		</ul>
	</div>
	<img class="left" src="<?php bloginfo('template_directory'); ?>/i/quotes-btm.png" alt="quotes-btm" alt="" />
</div>
 
<?php } ?>

On each page we can now select if we want to show the testimonial slideshow or not.

Use wpautop function

Under Global Settings select Use wpautop function. This will automatically add paragraphs and it will enable the editor buttons on text fields for our Custom Field Template.

Now we may have an area where we don’t want to output paragraphs. Our testimonial slideshow block is built using lists. In sidebar.php, before our slideshow loop, just add the following code which will output only text without paragraphs or other HTML elements that can mess up our nice slideshow.

<?php remove_filter( 'the_content', 'wpautop' );?>

Other Custom Field Template Usage Ideas

• Using same idea we can create a custom field type date and set an expiration date for a Custom Post Type or post! Let’s say we have events pulled on hour home page and after a certain date the post will be removed from our Latest Events list.
• Instead of using Custom Post Types, we can also use multiply button although this can be quite buggy sometimes.
• We can give different colors to different sections of the website, like I used within this site: ettostudio.com
• Using shortcodes, we can basically implement those custom fields directly in the text area in back-end instead of the PHP templates, but I don’t recommend that approach for complex websites.

Conclusion

Using Custom Fields and taking advantage of Custom Field Template plugin gives us great flexibility and turns WordPress in a full capable Content Management System.

I wanted to mention that there are other plugins similar with Custom Fields Template and few offers the power and stability such as this one. I have developed WordPress websites using Custom Field Template since 2009 and I never had a problem after upgrading. Magic Fields could be a nice alternative, as it manages Custom Post Types and Custom Fields all in one, but I’m afraid that upgrades could break it, so I’m still going with the classic fail proof method.

Do you have better methods or questions? Please comment below!

Related posts:

1. WordPress custom post types, custom back-end columns and post thumbnails
2. WordPress Custom Post Types Numeric Title Order
3. 10 Awesome WordPress plugins roundup with useful tips

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

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