Anything Graphic - WordPress Website Designer & Developer http://anythinggraphic.net Website designer and WordPress developer in Albuquerque, Rio Rancho, New Mexico Sun, 20 Apr 2014 22:35:32 +0000 en-US hourly 1 Scrolling Black & White to Color Images http://anythinggraphic.net/scrolling-black-white-to-color-images/ http://anythinggraphic.net/scrolling-black-white-to-color-images/#comments Wed, 15 Jan 2014 03:18:19 +0000 http://anythinggraphic.net/?p=1314 In my last post, I showed you how to make background images go from black and white to color, or vise versa, even using a Parallax effect.

This time, I am going to use a different technique, utilizing the jQuery.BlackAndWhite plugin along with some custom code to fade regular inline black and white images out when it is in view. Unlike the last post it works in all browsers because we aren’t relying on CSS background transitions.

View The Demo

Step 1: Include jQuery and jQuery.BlackAndWhite

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scripts/jquery.BlackAndWhite.js"></script>

Step 2: The Markup and CSS

Your image needs to be contained. Give it a class, as we will use this class in our CSS and jQuery.

<div class="bw">
     <img src="images/desert2.jpg">
</div>
.bw {
	position: relative;
}

Step 3: Custom jQuery

Make sure to change your selector to whatever you named the container of the image.

function animationToggle() {
	var wWidth = $(window).width();
	var wHeight = $(window).height();

	var scrollTopPos = $(document).scrollTop();
	var screenMiddle = scrollTopPos + (wHeight / 2);
	
	// Add the 'animate' class when the .bw div is in view.
	$('.bw').each(function() {
		var divheight = $(this).height();
		if (($(this).offset().top < screenMiddle - 100) && (($(this).offset().top + divheight - 100) >= scrollTopPos)) {
			$(this).addClass("animate");
		} else {
			$(this).removeClass("animate");
		}
	});
}

$(document).scroll(function() {
	animationToggle();
	// Fade out the B&W image when the 'animate' class is visible
	$('.bw.animate canvas, .bw.animate .BWfade').fadeOut('slow');
});

Let’s break this one down… The animationToggle function at the top gives any div in view a class of animate. We then fade the canvas element that is created from the black and white jQuery script when its container has the animate class. Pretty simple huh?

View The Demo

What do you think of this effect? Got another way of doing something similar? Share it!

]]>
http://anythinggraphic.net/scrolling-black-white-to-color-images/feed/ 1
Black & White to Color Background Images http://anythinggraphic.net/black-white-to-color-background-images-on-parallax-scroll/ http://anythinggraphic.net/black-white-to-color-background-images-on-parallax-scroll/#comments Mon, 13 Jan 2014 19:29:57 +0000 http://anythinggraphic.net/?p=1283 I recently worked on a website for a startup company I am involved with. I can’t talk much about it yet :-) We wanted to add a scrolling effect to the Parallax we’re using that would turn the background images from black and white to color when you scrolled.

Check out my other tutorial if you want normal inline images to go from black and white to color as you scroll.

It’s actually fairly simple since I had some code I recently used for another freelance project. Basically, you define your default images in your stylesheet. In this case, we are starting with black and white images. We add some Javascript at the top of your page to preload the color images. This will prevent flickering during the transition because the image doesn’t have to load right when it is being called at the scroll point. We add another jQuery script that gives the div holding the background image a class of animate when it is scrolled into view. In our CSS, we define #yourdiv.animate to have the color version of the image. With Webkit browsers, we can use the transition: background; property to ease the images in. Let’s get to it! View The Demo

Step 1: Preload Your Images

Copy and paste this into your webpage under your script tag to load jQuery.

<!-- Preload black and white images for smoother transitions upon scrolling -->
<script type="text/javascript">
	<!--//--><![CDATA[//><!--
		var images = new Array()
		function preload() {
			for (i = 0; i < preload.arguments.length; i++) {
				images[i] = new Image()
				images[i].src = preload.arguments[i]
			}
		}
		preload(
			"images/image1-bw.jpg",
			"images/image2-bw.jpg"
		)
	//--><!]]>
</script>

Step 2: Include your Parallax Script

If you are going to use Parallax, go ahead and follow the instructions for your script. This technique does not require Parallax at all. It can be used independent of that. The demo uses the jQuery Parallax plugin.

Step 3: Define Your Background Images In Your Stylesheet

Now, let’s dive into our stylesheet and define our background images.

#first {
	background:url(images/image1-bw.jpg) no-repeat center 0;
}

#second {
	background:url(images/image2-bw.jpg) no-repeat center 0;
}

#third {
	background:url(images/image2-bw.jpg) no-repeat center 0;
}

/* We are using jQuery to add a class of 'animate' when the div is in view */
#second.animate {
	background:url(images/image2-color.jpg) no-repeat center 0;
}

#third.animate {
	background:url(images/image2-color.jpg) no-repeat center 0;
}

Step 4: Add A Class To The Div When It Is In View

The way we tell the browser to switch the images is by adding a class of animate to a given div class (or ID if you are only doing one div) when it comes into view. Remember to change your selector!

function animationToggle() {
	var wWidth = $(window).width();
	var wHeight = $(window).height();

	var scrollTopPos = $(document).scrollTop();
	var screenMiddle = scrollTopPos + (wHeight / 2);
	
	// Add the 'animate' class when the .bw div is in view.
	$('.yourdivclass').each(function() {
		var divheight = $(this).height();
		if (($(this).offset().top < screenMiddle - 100) && (($(this).offset().top + divheight - 100) >= scrollTopPos)) {
			$(this).addClass("animate");
		} else {
			$(this).removeClass("animate");
		}
	});
});

Step 5: Add Finesse

Unfortunately, doing the above steps without some CSS finesse creates the images to change abruptly. Luckily, CSS3 allows us to fade the images in and out. The only downside to this at the moment is that only Webkit browsers support the transition: background; property. Let’s add it.

.slide {
	-moz-transition: background-image 0.6s ease-in-out 0s;
	-webkit-transition: background-image 0.6s ease-in-out 0s;
	transition: background-image 0.6s ease-in-out 0s;
}

We’re Done

That’s all there is to it. Pretty simple right? Again, no need for Parallax to make this work. I will post a tutorial next time on how to make normal (not background) images change from black and white to color (or vise versa) using a different technique. Do you have another way of accomplishing the same effect? Is there anything wrong with the code above that you see can be better written? Let us know! View The Demo

]]>
http://anythinggraphic.net/black-white-to-color-background-images-on-parallax-scroll/feed/ 3
AgentPress Search With No Results http://anythinggraphic.net/message-on-agentpress-search-with-no-results/ http://anythinggraphic.net/message-on-agentpress-search-with-no-results/#comments Sat, 04 Jan 2014 19:55:12 +0000 http://anythinggraphic.net/?p=1286 I use the Genesis Framework for all of my client websites and rarely (really only once) use a premium child theme. I had a client website using the AgentPress child theme from StudioPress and ran into a few issues with the functionality, or lack thereof, of the AgentPress Listings plugin.

The biggest issue I ran into was finding a way to insert a message to display on a search that results in ‘No Listings Found.’ I searched high and low and didn’t find anything. I ran into a blog post from Ryan Stokes called “Fixing AgentPress” which has some really good tips. However, his technique on displaying a message on the empty listing page didn’t work for me.

This is when I decided to use the power of jQuery to help achieve the message. Copy and paste this code into your own jQuery file and edit the text as you wish.

// Add text/html if there are no listings found
	if( jQuery('body.post-type-archive-listing #content .listing').length ) {
	} else {
		jQuery('body.post-type-archive-listing .archive-description, body.post-type-archive-listing .taxonomy-description').hide();
		jQuery('body.post-type-archive-listing #content').append("<h3>No listings found</h3><p>We're sorry. We don't have properties that meet your current search requirements. Please search again using the search pull downs above or browse <a href='http://www.yourdomain.com/listings'>all our properties in South Jersey.</a></p><br>");
	}

You shouldn’t have to change anything except for the message you want displayed. The selectors are standard within the AgentPress theme.

]]>
http://anythinggraphic.net/message-on-agentpress-search-with-no-results/feed/ 2
CSS-Only Responsive Mobile Navigation http://anythinggraphic.net/responsive-mobile-navigation-techniques/ http://anythinggraphic.net/responsive-mobile-navigation-techniques/#comments Fri, 04 Oct 2013 06:11:27 +0000 http://anythinggraphic.net/?p=1132 A tutorial showing you how to implement a functional and usable responsive navigation menu in WordPress.

]]>
This article was originally written for Software Developer’s Journal, Vol. 2 No. 13, 10/2/13

The number of total website traffic is going to increase as data speeds accommodate for the things people want. And they want things fast. With the growth of traffic on mobile devices doubling since last year to 24%, the responsiveness of mobile apps and websites has skyrocketed. It is more important than ever to deliver a usable experience to mobile users.

This tutorial is going to walk you through one of the most practical, functional, and usable ways to deliver navigation menus that users will recognize and find easy to use. Screen real estate is of the utmost importance and not paying attention to your navigation menu can take up a whole lot of it. You will learn a CSS method for turning navigation menus into sleek elements for these smaller screens.

View The Demo

What You Should Know

Since this is a WordPress tutorial, you should know the basics of how navigation menus work in a fresh install. You should also have a basic understanding of how a child theme works and why you should not edit core files of a purchased premium theme or framework. If you wish to dig deeper into this subject, checkout the WordPress Codex: Child Themes. Also, knowledge of HTML, CSS, and media queries are essential.

Before We Start

I personally develop using the Genesis framework for WordPress and build on top of that with custom child themes that I make for my clients. I also develop with progressive enhancement, meaning that users with newer browsers get the best experience while users with older browsers (namely Internet Explorer 8/9 and below) get a usable experience. They won’t know the difference because they aren’t switching browsers and testing the website like we do (which you should be doing).

If you are building your own custom theme or working in another theme, the line numbers mentioned in this tutorial may not match up. The Twenty Twelve and Twenty Thirteen themes already have a navigation system for mobile menus, but we want our own. Since I’ll be using Twenty Twelve as an example, we will be removing these lines for the sake of this tutorial. You will need to look at your theme and adjust what to remove and where to add the new code. This CSS technique can be applied anywhere.

Let’s Begin

This particular method is very easy to implement. It’s called Navigataur and was put together by Mike King, an Interaction Designer at Ikayzo. Follow him on Twitter: @micjamking.

I’ll be implementing his technique into WordPress by changing selectors in the CSS and updating our header.php with two lines of new markup. Navigataur utilizes an input, a label, and CSS properties to make our navigation mobile friendly. View the Github Repository.

The Markup

Below is some simple markup for navigation that displays with a default WordPress install using the Twenty Twelve theme.

*Note that I have removed classes on the <li> elements to shorten the length of the code for the example.

<div class="menu-main-nav-container">
    <ul class="nav-menu" id="menu-main-nav">
        <li class="menu-item"><a href="#">Home</a></li>
        <li class="menu-item"><a href="#">About</a></li>
        <li class="menu-item"><a href="#">Services</a></li>
        <li class="menu-item"><a href="#">Portfolio</a></li>
        <li class="menu-item"><a href="#">Contact</a></li>
    </ul>
</div>

What we need to do is include two extra elements in the code directly above our menu container. To do this, copy header.php from your parent theme’s folder (in this case it is twentytwelve) and paste it into your child theme’s folder. Always use child themes so you can develop in an upgrade-safe manner.

Now open up your new header.php file in your favorite text editor. In the default install of Twenty Twelve, look for line 43 and delete it. This is the default theme’s code for mobile navigation. Again, we want our own. Your particular theme may not have this.

<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>

Now look for this line right below what we just removed.

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

Put the following code directly above the code above.

<input type='checkbox' id='toggle'/>
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu" onclick></label>

Here’s a quick explanation

The checkbox input box is hidden in our stylesheet, but when you click the menu it will become ‘checked.’ We will reference the checked state of the input in our CSS with a pseudo-class of :checked. When the input is checked, we will display the navigation menu. Genius.

The label element puts a label on our menu and has two attributes: data-open and data-close. In our CSS, we will target the content property within our selector to change the text on the menu depending on whether it is open or closed.

The content property allows us to add text and images to the markup using only CSS. It’s not really considered markup anymore, but can be styled any way you choose. Note that this property only works with the :before and :after pseudo selectors. Chris Coyier has an awesome post about the content property along with a slew of other tips and tricks.

The CSS

Here’s where all the magic happens — the styles! If you look at the comments, the CSS is broken up into two pieces: essentials for functionality and styles for presentation.

/* Functional Styles (Required) */
/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after {
     content: "";
     display: table;
}
.clearfix:after {
     clear: both;
}

#masthead {
     position: relative;
}

#toggle, .toggle {
     display: none;
}

.nav-menu > li {
     float:left;
     list-style: none;
}

@media only screen and (max-width: 768px) {
     .nav-menu {
          display: none;
          opacity: 0;
          position: absolute;
          right: 0;
          width: 100%;
     }

     .nav-menu li {
          display: block;
          margin: 0;
          width: 100%;
     }

     .nav-menu li a {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          display: block;
          text-decoration: none;
          width: 100%;
     }

     .toggle {
          cursor: pointer;
          display: block;
          position: relative; 
          -webkit-touch-callout: none; /* Disables OS callout when touching and holding a link */
          -webkit-user-select: none;
          user-select: none;
     }

     #toggle:checked ~ .nav-menu, .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
          display: block;
          opacity: 1;
     }
}

/*--------------------------------
 Presentation Styles (Editable)
---------------------------------*/
#masthead {
     height: 100%;
     min-height: 100px;
     padding: 0 20px;
}

#masthead > h1 {
     color: #DFDFDF;
     float: left;		
     font-family: Georgia;
     font-size: 28px;
     font-style: italic;
     padding: 30px 0 0;
}

.menu-main-nav-container { 
     display: block; 
     float: left; 
}

.nav-menu, .nav-menu > li, .nav-menu > li > a { 
     height: 100%; 
}

.nav-menu li a {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box; 
     box-sizing: border-box;
     display: block;
     font-weight: normal;
     font-size: 16px;
     line-height: 1;
     padding: 10px 20px;
     text-align: left;
     text-decoration: none;
     -webkit-transition: all 0.25s linear;
     -moz-transition: all 0.25s linear;
     -o-transition: all 0.25s linear;
     transition: all 0.25s linear;
}

.nav-menu li a:hover, .nav-menu li a:focus {
     background: #F2F2F2;
     box-shadow: inset 5px 0 0 #51C1F1;
     color: #51C1F1;
     padding-left: 30px;
}

.toggle {
     margin: 0 auto;
     width: 200px;
     z-index: 2; 
}

@media only screen and (max-width: 768px){
     .nav-menu {
          background: #FFF;
          border-top: 1px solid #51C1F1;
          padding-top: 1em;
     }

     .nav-menu, .nav-menu > li, .nav-menu > li > a {
          height: auto;
     }

     .nav-menu > li > a{
          padding: 15px 15px;
     }

     .nav-menu > li > a:hover, .nav-menu > li > a:focus {
          background: #F2F2F2;
          box-shadow: inset 5px 0px #51C1F1;
          padding: 15px 15px 15px 25px;
     }

     .toggle:after {
          background: #51C1F1;
          -webkit-border-radius: 2px;
          border-radius: 2px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box; 
          color: #FFFFFF;
          content: attr(data-open);
          display: block;
          font-size: 12px;
          margin: 33px 0;
          padding: 10px 50px;
          text-align: center;
          -webkit-transition: all 0.5s linear;
          -moz-transition: all 0.5s linear;
          -o-transition: all 0.5s linear;
          transition: all 0.5s linear;
          width: 200px;
     }

     .toggle:hover:after {
	     background: #45ABD6;
     }

     #toggle:checked + .toggle:after {
	     content: attr(data-close);
     }
}

@media only screen and (max-width: 479px){
     #masthead > h1 { 
          text-align: center;
     }

     #masthead > h1, .toggle:after { 
          float: none; 
     }

     .toggle:after { 
          text-align: center; width: 100%; 
     }
}

You will have to change the selectors depending on your markup. As always, style the visual properties as you wish. You now have a functional, usable, CSS-only responsive navigation menu that works great on mobile devices.

For now, let’s go through some of the CSS techniques we used above. First is the bugfix at the very top that targets Android 4.1.2 and below. There is a bug in the Android operating system and it doesn’t completely understand the pseudo-class + general selector.

Below that, we are declaring a clearfix hack that gives us a way to contain floats without resorting to using presentational markup. Next, we hide the checkbox input. We also hide the label on viewports higher than 769px. When the viewport of the device (or the width of your browser) is 768px or below, we will display the label and hide the navigation.

When a user clicks on the label, the checkbox becomes checked and then pseudo selectors tell the menu to show and the label to change. You can fancy this up by adding some styles of your own. It’s a very simple approach and is one of my favorites. It can be implemented for large navigation menus with secondary menu items as well. Just add some styling to the nested lists!

The reason I prefer CSS methods like this one is because it doesn’t add a lot of weight to your site like a lot of the jQuery methods out there. If you pay attention to the world of search engine optimization, load times have an impact and building for speed is something everyone should do, if only for speed limitations on mobile networks.

On the other hand, there are a few nice looking jQuery methods out there that look and function really well. That is a tutorial for another day.

View The Demo

A Thank You

I want to give a big “Thank you!” to the editors over at Software Developer’s Journal. Thank you for contacting me to run alongside with some of the big wigs in the WordPress industry.and write tutorials for your fine magazine. I am looking forward to our journey together.

Buy this issue of SD Journal: Building Your Own WordPress Sites From Scratch,

Do you have other CSS-only methods for dealing with mobile navigation?
]]>
http://anythinggraphic.net/responsive-mobile-navigation-techniques/feed/ 2
Add Custom Styles To The WordPress Editor http://anythinggraphic.net/custom-styles-in-wordpress-editor/ http://anythinggraphic.net/custom-styles-in-wordpress-editor/#comments Sun, 29 Sep 2013 14:43:08 +0000 http://anythinggraphic.net/?p=1237 Adding extra custom styles to the WordPress Editor is easy. Doing this allows you to wrap elements within the editor so you can style theme in your theme’s style.css. Just copy and paste the code below into your functions.php and change the selectors.

Custom Styles In WordPress Editor

/* Add custom styles to the Styles drop down menu in the TinyMCE Editor
----------------------------------------------------------------------------------------*/
add_filter( 'tiny_mce_before_init', 'ag_custom_tinymce_styles' );
function ag_custom_tinymce_styles( $init ) {
	$init['theme_advanced_buttons2_add_before'] = 'styleselect';
	$init['theme_advanced_styles'] = 'Green=green,Blue=blue,Orange=orange';
	return $init;
}

Notice that the image above match the same selectors used in this code at the end of the snippet. First is the label that you see in the Styles drop down menu in the WordPress Editor and the second is the selector you’ll use in your CSS.

Do you have a better way?

There are always more ways than one to accomplish the same thing. Do you have a different solution for adding custom styles to the WordPress TinyMCE Editor? Let us know!

]]>
http://anythinggraphic.net/custom-styles-in-wordpress-editor/feed/ 1
5 WordPress E-commerce Plugins for Smaller Stores http://anythinggraphic.net/5-wordpress-e-commerce-plugins-for-smaller-stores/ http://anythinggraphic.net/5-wordpress-e-commerce-plugins-for-smaller-stores/#respond Wed, 25 Sep 2013 13:14:22 +0000 http://anythinggraphic.net/?p=1200 Earlier, I showed you some of the Top 5 Best E-commerce Plugins For WordPress. That was half of my e-commerce presentation from Albuquerque WordCamp 2013. Those were for stores both large and small that accepted payments with a variety of payment gateways. Today, I am going to show you a couple of ways you can sell your products, services, or digital downloads without the weight of a full-fledged e-commerce WordPress plugin best suited for small stores.

If you don’t have a large inventory and are looking for a simple solution to hook up with PayPal, Stripe, or something like Authorize.net, you will find the plugins below useful. Let’s take a look!

Top 5 Best WordPress E-commerce Plugins: E-Junkie

E-Junkie

E-Junkie has been around for a long time and is used by a lot of websites. However, this one isn’t really a plugin. It’s more of a resource I’m letting you know about that you can implement into your website to sell your digital goods and products on your website. Some if its key features are:

  • $5 to start and includes 10 products
  • download link renewals
  • discount codes
  • product promotions
  • inventory management
  • copy and paste ‘Buy Now’ buttons
  • affiliate management

E-Junkie Website

 

Top 5 Best WordPress E-commerce Plugins: Stripe

Stripe

Stripe has been a huge hit in the payment gateway industry and have high recommendations for a lot of people. They make it easy to start accepting credit cards on the web at a very low cost. Some key features are:

  • 2.9% + 30 cents per successful charge
  • no setup fees, monthly fees, or card storage fees
  • discount codes for products
  • it was made by developers and entreprenuers

Stripe Website | Stripe Plugin Website

 

Top 5 Best WordPress E-commerce Plugins: PayPal

PayPal

Everyone knows and trusts Paypal. They make it pretty simple to buy products and accept money from anyone all over the world. Although they don’t have an official WordPress plugin, there are useful unofficial ones in the WordPress Plugin Repository. The one I researched for you is Simple PayPal Shopping Cart. Some of its key features are:

  • digital and tangible products
  • product inventory and management
  • copy and paste ‘Buy Now’ buttons
  • recurring payments with PayPal Pro account
  • don’t need an account to checkout

PayPal Website | Simple PayPal Shopping Cart Plugin

 

Top 5 Best WordPress E-commerce Plugins: Authorize.net

Authorize.net

Authorize.net is probably the most popular credit card processor and all of the large e-commerce plugins that run stores in WordPress have add-ons to hook into their API. If you have a small store, there is the perfect plugin for you made specifically for Authorize.net. Some key features are:

  • one-time fee of $89 for the plugin
  • works with digital and tangible goods as well as donations
  • great for membership websites
  • works with Memberwing and Wishlist Member
  • fast and easy setup
  • 100% risk-free guarentee

Authorize.net Website | Authorize.net WordPress Plugin

 

Top 5 Best WordPress E-commerce Plugins: SimpleCart.js

SimpleCart.js

SimpleCart.js is a free javascript shopping cart that easily integrates with any site. Like E-Junkie, this is not a WordPress plugin either, simply an alternative resource. It is easy to setup and maintain, however since it is JavaScript based, hackers can easily change the price of your product before checkout. Some if its key features are:

  • highly customizable
  • decent amount of documentation
  • easily add to your template files in wordpress
  • once you pass through the cart experience, you can stick the user with whatever checkout you want

SimpleCart.js Website

 

Top 5 Best WordPress E-commerce Plugins: @Pay Two-Click Checkout for Web + Email

@Pay – Two-Click Checkout for Web + Email

Finally, we have @Pay’s two-click technology for e-commerce and donations for web and email, for products and donations, and a slick back end that makes it easy to buy and sell online. This is the company I work for, so of course I am biased, but our software engineers have come up with such a great product. The press loves us and it is just the beginning for our company!

Unfortunately, at this time we do not have an official plugin. However, attendees of the 2013 Albuquerque WordCamp got a preview of the beta version of our plugin during our Clean eCommerce Solutions for the Responsive Web presentation. It is still being developed and I will write a full blog post about it when it is available for download. In the meantime, visit the @Pay website to see what we’re all about. Big things are coming! Stay tuned.

Checkout the WordCamp Albuquerque 2013 E-commerce plugin presentation!

What plugin do you use for your small store?

Do you have a personal favorite or one that you would recommend? Have you had good or bad experiences with any of the above? Let us know!

]]>
http://anythinggraphic.net/5-wordpress-e-commerce-plugins-for-smaller-stores/feed/ 0
Top 5 Best WordPress e-Commerce Plugins http://anythinggraphic.net/top-5-best-wordpress-e-commerce-plugins/ http://anythinggraphic.net/top-5-best-wordpress-e-commerce-plugins/#respond Sun, 08 Sep 2013 00:40:17 +0000 http://anythinggraphic.net/?p=1181 The Creative Director at my full-time job @Pay, Chad Person, and I presented at Albuquerque WordCamp 2013. Our talk was titled Clean Ecommerce Solutions For The Responsive Web and you can view it here. We did a feature comparison of the top five WordPress E-commerce plugins, including demos and personal experiences. We also included a comparison of the top 5 small e-commerce WordPress plugins for smaller stores such as Stripe and PayPal.

We ended with showing off a beta version of our own plugin, which integrates the @Pay Two-Click Checkout for Email + Web API to included in an online store. This is almost finished and coming out soon. I’ll keep you posted… it’s kind of a big deal.

Before You Choose An E-commerce Plugin

Today, I’d like to share with you which ones we chose including the features that stood out to us, as well as a link to preview the full slideshow. But before we get into the plugins, you have to evaluate your needs. Here are a few questions you should consider:

  1. Are you shipping products? Are you serving digital goods?
  2. Do you need to charge tax?
  3. How are you going to accept payments (payment gateway)?
  4. What does your storefront look like? Are you going to get a custom design or buy a premium theme? Does this theme play well with e-commerce plugins?
  5. Do you need customer feedback or product reviews?
  6. Can you create coupons and promos easily?
  7. Will mobile buyers have a good experience on your website?
  8. Do you have to manage inventory?
  9. Have you thought about security? You will need an SSL Certificate.

Research Your Tools

After asking yourself those questions, it is time to look at some of the best and most popular plugins for your e-commerce website. These plugins all have some of the same basic features including:

  • widgets and shortcodes
  • order management within the back-end of WordPress
  • the ability to sell physical and digital goods
  • a predefined page structure, guest purchases
  • subscriptions with a premium add-on
  • lots of documentation

One huge turn off for me is that none of these allow you to bulk edit your products. However, Jigoshop is currently working on implementing this into their product. This, I cannot wait for!

Top 5 Best WordPress E-commerce Plugins: Shopp

Shopp

Shopp is a usable, fully flexible, e-commerce framework. It starts at $55 for a single-site license and $299 for a developer license. Some key features are:

  • hundreds of free and premium add-ons
  • resumeable downloads, which is awesome
  • keep private (admin only) notes on customers’ orders to keep your team on the same page or to keep reminders for yourself

Website | Demo | Showcase

 

Top 5 Best WordPress E-commerce Plugins: WP-Ecommerce

WP E-commerce

WP e-Commerce makes it easy to sell to your customers. It is a free download and you can get started selling products on your website right away. Some key features are:

  • integrates well with WordPress SEO and All-in-One SEO
  • multilingual out-of-the-box
  • built in product duplication
  • customer accounts for records and past orders
  • hundreds of free and premium add-ons

Website | Demo not available | Showcase not available

 

Top 5 Best WordPress E-commerce Plugins: Cart66

 

Cart66

Cart66 claims to be everything you want and everything you need in an e-commerce plugin for WordPress. When looking over the plugin, it sounded really neat and possibly very true. I have yet to try this one, but really want to one of these days. It is based in the cloud and uses their server to complete the checkout process. Your theme ‘skins’ the page so you don’t really have to worry about anything. Check them out if you a budget to work with! Their product and services are $199 annually and they also offer a $25 monthly plan. Some key features are:

  • built in recurring billing
  • no need for an SSL certificate
  • memberships and subscriptions are included
  • sell on Facebook, Twitter, and Email with ‘Buy Now’ buttons
  • saves credit cards for easy repeat checkout

Website | Demo not available | Showcase

 

Top 5 Best WordPress E-commerce Plugins: WooCommerce

WooCommerce

WooCommerce is a WordPress e-commerce toolkit that helps you sell anything. It is one of the most highly recommended e-commerce plugins for WordPress. This is also a free plugin and you can get started right away. They pretty much took Jigoshop’s code, added some options, changed some styling, and called it WooCommerce. Some key features are:

  • full security audited by Sucuri, a web monitoring and malware clean up service
  • intricate tax and shipping options
  • ability to run complex coupon campaigns
  • built in social sharing, you can even share your cart

The only con I know of is that their add-ons are pretty expensive.

Website | Demo not available | Showcase not available

 

Top 5 Best WordPress E-commerce Plugins: Jigoshop

Jigoshop

Jigoshop is a WordPress e-Commerce plugin that works. This is personally my favorite e-commerce plugin for WordPress at the moment. I use it on all of my e-commerce websites and have been featured in their showcase before. If you are looking for the best plugin, I would recommend Jigoshop. I’ll let you know if I find something better, but I doubt that will happen. Some of Jigoshop’s key features are:

  • code is lightweight
  • cheap premium add-ons
  • free support is fast (from experience) and premium support is avialable
  • Lots of shortcodes, widgets
  • filterable products and one-page checkout

Website | Basic DemoMy Client Site   Showcase

Checkout the WordCamp Albuquerque 2013 E-commerce plugin presentation!

What plugin do you use for your stores?

Do you have a personal favorite or one that you would recommend? Have you had good or bad experiences with any of the above? Let us know!

]]>
http://anythinggraphic.net/top-5-best-wordpress-e-commerce-plugins/feed/ 0
Albuquerque WordCamp 2013 http://anythinggraphic.net/albuquerque-wordcamp-2013-clean-ecommerce-solutions-for-the-responsive-web/ http://anythinggraphic.net/albuquerque-wordcamp-2013-clean-ecommerce-solutions-for-the-responsive-web/#respond Sat, 03 Aug 2013 20:55:38 +0000 http://anythinggraphic.net/?p=1086 Albuquerque WordCamp 2013: Clean eCommerce Solutions for the Responsive Web

eCommerce Shopping Cart Plugins for WordPress

@Pay’s Marketing and Creative Director Chad Person and I will be presenting at the 2013 Albuquerque WordCamp at the Convention Center in Downtown Albuquerque! Our talk will be a comparison of some of the most popular WordPress shopping cart plugins for people looking to add secure payment solutions to their websites.

With the complexity of an eCommerce website, your visitors expect your website to function a certain way, especially with the plethora of different devices available nowadays. The increasing number of shopping cart plugins available in the WordPress repository make it hard to know which is best suited for your particular project.

Chad and I will take a look at the features and benefits and guide you to making the right decision. Choosing the right plugin will will help the current 80%+ cart abandonment and increase your online sales.

UPDATE: Check out our WordCamp presentation!

Clean eCommerce Solutions for the Responsive Web
Kevin Donnigan & Chad Person of @Pay
September 14, 2013
9:10am – 9:50am

What Is WordCamp?

WordCamp is an annual conference attended by hundreds of people. It deals with everything WordPress, novices and experts alike. They are fun, informal, community-organized  and are put together by people who use WordPress to power their websites.

Wanna know a secret?

This year, attendees may get an exclusive look at the beta version of the @Pay Two-Click Checkout For Mobile + Web WordPress Plugin!

You can visit my Albuquerque WordCamp 2013 Speaker Spotlight. Chad’s Person’s is right here too!

]]>
http://anythinggraphic.net/albuquerque-wordcamp-2013-clean-ecommerce-solutions-for-the-responsive-web/feed/ 0
@Pay – Front-end Web Developer http://anythinggraphic.net/a-new-home-as-front-end-web-developer/ http://anythinggraphic.net/a-new-home-as-front-end-web-developer/#respond Wed, 12 Jun 2013 17:13:41 +0000 http://anythinggraphic.net/?p=1020 I was happy, but in the last year my work/life balance was spiraling out of control. Now I'm happier than ever and ready to learn.]]> A New Home As Front-end Website DeveloperThe last few years of my work life have been pretty great. I got to work with a lot of smart, down to earth people, clients with great products and services, and do what I love to do: sit at the computer and design things. If that thing is a website, I get to develop it into a fully functional, usable, search engine optimized website for the world to see.

My Old Jobs

Besides my client list for Anything Graphic doubling in size, I have also had the opportunity to work for an amazing start-up company called Spaboom for the past three years. I got to work alongside some amazing people who are now friends outside of work, I learned a lot about the operations of a successful small business, and have also set the precedent on a new role as a graphic designer and website developer, combining the two titles into one for the first time. Prior to my position, those titles were separate.

My primary role was to design and develop custom websites for many different brands and implement them into Spaboom’s custom content management system.  I did the same thing for its sister companies, Coverboom (restaurant vertical) and Boomtime (not industry specific). I also developed websites from the other graphic designer and friend I occasionally do freelance web development projects for, Lori from Design564.

I learned so much while in this position and the company allowed me to kind of do my own thing. Naturally, I had the freedom to apply newly developed skills into each new project. Along working with a lot of great brands, I have also:

  • Designed many different logos and instant gift certificates
  • Extended the website templates, accompanying email templates, and holiday themed email templates
  • Started the push and streamlined the process to make all previous templates mobile friendly
  • Created two custom, responsive frameworks for future web design projects
  • Helped extend the functionality of the custom content management system
  • Developed the new, responsive website for spaboom.com

Like I said, I learned a lot through working with this company and it has been a pleasure. I am sad to leave, but happy to start a new chapter in life.

The Problem

I was happy. However, the last year I was there my work/life balance was even more out of control than it used to be. My friends will agree. Lori had pursued other opportunities in the freelance area and had left the company. Between being the only designer and developer for Spaboom, working with more than 5 brands on 15 different projects at any one time, and then trying to focus on my company Anything Graphic and the 50 clients I have, I quickly became unhappy and didn’t want to work anymore.

I was highly unmotivated, had almost stopped completely, and went into another field. I needed a break. A large part of the problem was that I was stuck in a routine that just wasn’t working out.

I needed a change. I needed a challenge.

A Horoscope and Perfect Timing

I’m not too much of a superstitious person, but it was quite amazing how things worked out near the end of 2012. I started to read a lot of horoscopes after I let my workload schedule slip into a downward spiral. Every week, there was always a little something about my business and career choices.

Albuquerque, like most other cities, has a tight-knit designer and developer community and we all tend to know about each other (or know somebody who knows somebody). Luckily for me, people think I do great work. A local friend and co-owner of Cornershop Creative, Ben, knew an awesome guy named Chad who was looking for a Front-end Website Developer for a start-up company called @Pay.

I wasn’t looking for a job. My plan was to slowly ease Anything Graphic into a 10-hour a week gig instead of the 30+ hours I was putting into it and focus on Spaboom. But when I got that first phone call from Chad I rethought my situation. I realized I was looking at things the wrong way and my horoscopes were putting it right in front of me.

I simply wasn’t paying attention. I needed this change.

After 4 interviews over the span of 4 months, I got the job offer to start as a Front-end Web Developer at @Pay.

The Change

Until the end of June, I am working for all three jobs: Spaboom, Anything Graphic, and @Pay. The weight will soon lift off of my shoulders. During the last two weeks of June, I will be finishing up some large projects for Spaboom and saying my final goodbye’s. It is a sad time, but I am ready.

During this time, I am also slimming down the amount of freelance hours in half. I have a handful of friends I work with on an ongoing basis as well as a marketing firm I contract with who bring premium clients with amazing designs to the table. Consistent, repeat business is something I am going after instead of taking on work from anybody who makes a phone call.

My role as a front-end website developer is to enhance the usability and functionality of two company websites: @Pay and Clover Leaf Solutions. By keeping up with advancements in the industry, my focus is to keep the website fresh, fast, SEO friendly, and coded with clean markup. My background in design is also a great tool for paying attention to the details that our amazing graphic designers put into their work. The @Pay engineers have developed a game changer for the donation and e-commerce industries and am grateful to be able to jump on board.

This is the biggest challenge I’ve had to face in recent years. I will be working with people who know a lot more than me and use a handful of different technologies. They are brilliant, smart, and know so much. I am looking forward to learning, growing, and gaining different experiences on a completely different path.

My near future is going to be exciting. Thank you to Chad and the @Pay team for giving me the chance to be a part of such a great team and giving me a warm welcome into their offices. I didn’t get hazed… yet.

Here’s to learning, growing, good food, Nerf wars, and a pool table. Hello second family :-)

- Cheers

]]>
http://anythinggraphic.net/a-new-home-as-front-end-web-developer/feed/ 0
Google + For Business & Authors http://anythinggraphic.net/google-for-business-authors/ http://anythinggraphic.net/google-for-business-authors/#respond Sun, 02 Jun 2013 18:05:07 +0000 http://anythinggraphic.net/?p=990 Increase your SEO and CTR efforts by claiming Google+ Authorship. I also explain the difference between Authorship and Publication.

]]>
Google+ For Business: Authorship and Publication

We all know that having a Google+ profile from the search engine giants is pretty important if you want to have another footprint in the world of social media. A lot of people don’t see the point because of Facebook, Twitter, and some other already established social media companies, but I personally love Google+. It’s also a really good social media avenue for business too! I feel it delivers more important content for my personal interests. It’s clean, well developed, and duh… it’s Google!

However, a lot of us who do have a profile along with a personal and/or business website aren’t taking into consideration the potential SEO and CTR (click-through-rate) benefits from using the special ‘rel’ attributes created by G that can be put into your website’s markup. In this post, I am going to briefly explain how to link your online content from your website to your business and personal profile pages using Authorship (rel=”author”) and Publication (rel=”publisher”). There is a difference, but you should be using them both at the same time.

Why Are These Google ‘rel’ Attributes Important?

The Big G is piloting the display of author information in search results to help users discover great content. The quality of that content is important for ranking high. Google is making sure that it is not just about the content, but the author and who owns it. Authorship will become increasingly powerful in the coming years.

When you search for information using Google (most other search engines are using them to deliver results nowadays), you might have noticed that some of these results stand out more than others.

Google+ For Business: Authorship Screenshot

See that little image in the screenshot above? That’s my Google+ profile image accompanied by one of my blog posts that showed up on the SERP (search results page) for horizontal rule in editor. That makes a search result standout and if that person is in one of your circles, you’ll recognize him or her and most likely click that link because it’s information that a person you know has written. This is the result of setting up Google Authorship.

Setting Up Google Authorship

This is fairly simple process, especially if you are using the Genesis Framework for WordPress.

  1. Obviously, you are going to need a personal Google+ Profile Page.
  2. You’ll need to set a recognizable head shot as your profile image.
  3. Now, you have to associate your profile page with your website or the articles you write for other websites. There are different ways you can go about adding this same code into your articles, but I would suggest putting it in the <head> section of your website:[html]<link href="http://your-google-plus-profile-url" rel="author">[/html]

    or in the User Profile settings in your WordPress setup or somewhere else on your website:

    [html]Follow me on <a href="http://your-google-plus-profile-url" rel="author">Google</a>[/html]

Now, pound your Staples Easy Button.

Setting Up Google Publisher

Now you understand that Authorship is for the author of the content. Whether you wrote an article for your own website or someone else’s, make sure you are getting credit for this content by including the link to your profile along with the rel attribute of author and watch your results on the SERP’s stand out.

Finally, the rel attribute called Publisher. I like to think of the hierarchy between Authorship and Publisher as a book. Dalton Trumbo is the author of Johnny Got His Gun, but the publisher is Citadel. I am the author of this blog post, but the publisher is Anything Graphic.

Google+ For Business: Publisher Screenshot

You’ve already seen why my profile photo shows up next to some search results in the left column, but setting up Google Publisher markup lets you have a big box to the right of the search results for queries related to your brand. Pretty cool huh? If you initially set your profile up to be a local business, you will have a map and photos relating to your Google Places For Business page as well. It all syncs together :-)

This is also very simple to set-up. However, there are two key differences.

  1. First, you need to set a Google+ Business Profile Page.
  2. Next, follow the same Step (3) as in the Google Authorship section above, except change rel=”author” to rel=”publisher”.

Testing Your Markup

Once you have placed the markup above into your website and blog posts, it will take a day or so for the search engine to update. But you can test how your markup performs and if it passes by using the Google Rich Snippets Structured Data Testing Tool. Just put in your homepage or blog post URL and click the Preview button. The test results will give you some information regarding your code and ways you can improve it if the steps above have not been completed successfully.

What’s Next?

My next blog post is going to be all about Google Rich Snippets and how they can help SEO and CTR as well. It’s pretty intense, but with the power of WordPress, it becomes easy :-)

More Hints, Tips, & Tricks

If you have any more information regarding the rel attributes provided by Google and your G+ profile pages, let us know!

]]>
http://anythinggraphic.net/google-for-business-authors/feed/ 0