Margaret Sheperd: July 2016

Saturday, July 30, 2016

Attract And Convert Qualified Visitors [White Paper]

For digital marketers, time and budget are precious-and both are often in limited supply.

DOWNLOAD OUR DIGITAL ACQUISITION FRAMEWORK WHITE PAPER NOW

In this white paper written for WP Engine, Charles Coxhead of WP Dev Shed delivers a simple framework small businesses can follow to attract and convert qualified visitors and achieve digital marketing and acquisition goals.

What You'll Learn

In this paper, Coxhead examines:

Digital marketing through each phase of the buying cycle

Using popular channels to drive traffic and engagement

Tips for setting up analytics correctly from the beginning

Helpful links to learn more once the framework is in place

Download this white paper, “A Digital Acquisition Framework for Small Business,” and you'll have the information you need to lay the foundation for digital marketing within your organization.

The post Attract And Convert Qualified Visitors [White Paper] appeared first on WP Engine.

Plugged In: Image Plugins

Welcome to Plugged In, where we take a look at some of the most popular WordPress plugins in various categories. For more information on WordPress plugins, download our ultimate guide.

Adding beautiful images can completely change the look of a post and make it more appealing. Images can make your content more relatable and easier to understand.

There are a number of WordPress plugins available that allow you to add a beautiful gallery to your work or turn up the SEO on any photos you add. We have compiled a few of the most popular from the WordPress Plugin Repository so you can start building your audience today.

IMAGE WIDGET

Quickly and easily add image widgets directly into your post. Put your photo next to your blog post or display your logo. The plugin uses the native media manager so you don't have to learn something new. You can link the image, resize the image, and edit the image all within the post.

The best part is, you can choose an image you already have in your media library or upload a new one, just like you would any other media.

WP SMUSH

Adding images greatly improves any post, but it can also bring unnecessary bulk. WP Smush lets you quickly resize your images and also strips any hidden information they might have pulled in, which can weigh them down. Removing the bulk from any of your media can speed up your site. Once you set a maximum width and height, the plugin will make sure nothing exceeds that.

You can process JPEG, PNG, and even GIF files so no editing is needed.

NEXTGEN GALLERY

If you are a photographer or visual artist, a gallery is a great way to display your work. NetGEN Gallery has over 1 million active installs for a reason: it creates beautiful galleries in any post. Display a thumbnail gallery so people can see your work at a glance, or go for a slideshow gallery that will cycle through your photos.

You can customize everything about the gallery and add tags to your photos to find them easily. NetGEN will make sure your work gets noticed.

Images are such an important part of a well-rounded website or blog. These three plugins will make sure you're using them to the fullest.

What are your favorite image plugins? Let us know here. And check out our list of the 10 most popular plugins our customers use on our platform.

The post Plugged In: Image Plugins appeared first on WP Engine.

10 Best Landing Page WordPress Themes

Here we are talking about theWordPresss themes available over the internet. You can find plenty of themes but finding the best option will be very difficult for you.

So, we are providing you with the Top 10 Landing Page WordPress Themes which can be customized according to the requirements.

How to Randomly Change Background Color in WordPress

Recently, one of our readers asked us if it was possible to randomly change background color in WordPress. Colors play an important role in how users see your website and how they engage. In this article, we will show you how to randomly change background color in WordPress.

Adding random background colors in WordPress

Method 1: Add Random Background Color in WordPress Using Code

This method requires you to add code into your WordPress files. Try this method only if you are comfortable with pasting snippets from web into WordPress.

First you need to add this code to your theme's functions.php file or a site-specific plugin.



function wpb_bg() { 

$rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');

$color ='#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].

$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];

echo $color;

}

This function simply generates a random hex color value and echoes it.

Now you need to edit your theme's header.php file. Locate the tag line, it will look like this:

Replace it with this line:



 style="background-color:">>

Save your changes and then visit your website to see the code in action.

Random background colors

Method 2: Add Random Color Stripes Using Fabulous Background Colors

This method is easier and is recommended for beginners who do not want to edit their WordPress theme files.

First, you need to install and activate the Fabulous Background Colors plugin. For more details, see our step by step guide on how to install a WordPress plugin.

The plugin works out of the box, and there are no settings for you to configure.

You can now visit your website, and you will see colorful stripes as background color on your website. These stripes will fade and change colors elegantly after every 5 seconds.

Random background stripes

Method 3: Using CSS to Add Non-Random Background Colors in WordPress

Almost all standard compliant WordPress themes use body_class() function in the body tag. This tag adds a number of CSS classes to the body tag in your theme. These default WordPress generated CSS classes can be used to style individual posts, categories, tags, etc.

For example, if your blog has a category called photography, then you can find these CSS classes in the body tag of the category archive page.

CSS classes added by WordPress

You can change background color of that particular category by simply adding this CSS to your WordPress theme or by using custom css plugin.



body.category-photography { 

background-color:#faebd7;

}

Similarly you will also find the post ID class for individual posts in the body class. You can use it to style each WordPress post differently.



body.postid-65 { 

background-color:#faebd7;

}

We hope this article helped you learn how to randomly change background color in WordPress. You may also want to see our guide on how to add a full screen background image in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Randomly Change Background Color in WordPress appeared first on WPBeginner.

Sliders Don't Suck and Here's Why Your WordPress Site Needs One

Sliders and carousels were a really hot design trend a few years ago. You would've been hard-pressed to find a website that didn't have some sort of rotating element on the homepage – especially above the fold.

But then something changed. Designers and developers started to abandon sliders for static imagery. As the interest in minimalistic designs and longer scrolling websites grew, sliding banners became a perceived distraction and threat to the rest of super simple designing. And if designers had chosen to apply any sense of movement to a website, it was contained in a parallax scroll, animated icons, or a video player.

Still, there are some designers who will argue that sliders and carousels are effective design elements that help improve user engagement, when used correctly. We're going to explore the validity of this argument today and give you pro-sliders some helpful tips and tools to use in order to ensure user engagement within your website's sliding elements.

To Slide or Not to Slide, That is the Question

Most design trends will face doubt or criticism at some point as newer, cooler ways of web design take over. So for many designers who are focused on simplicity right now, it may be difficult for them to understand how rotating content can fit into that ideal.

Not to Slide?

Here are some of the most common arguments we hear from the naysayer camp:

Slow to Load: The addition of sliders and carousels slows down a website's load time, which will not only drive visitors away but will also negatively affect SEO.

Bad for SEO: Since so much content is jam-packed into a single slider, it's difficult to optimize the page and SEO for all of that content.

Unnecessary Distraction: The rotation of sliders keeps visitors distracted from the content around it.

Difficult to Use: Multiple slides give visitors too many options to keep track of and it'll require too much effort to dig back through the slides to find the one they want.

Interrupts UX: For visitors who prefer a quick vertical scroll for their content, sliders can wear on their patience as they have to sit and wait for each one to rotate through.

Poor Click-Through Rate: According to some studies, sliders are ineffective at getting visitors to click. While visitors may be interested in reading one or maybe even a few slides, most don't take any action.

Unattractive: Many designers believe that sliders and carousels look tacky, especially when used to promote advertisement-looking images and messages.

Many times, the slider and carousel opponents will cite the 2013 study conducted by Erik Runyon on the Notre Dame University website. In his study, he tracked information on the number of clicks for each slide, the manual rotation of slides, as well as the performance of auto-forwarding slides. These are the numbers most anti-sliders will bring up:

Of the total site visitors, only 1% clicked on a call-to-action (CTA) in the slider.

When someone did click on a slide, 84% of the clicks were on the first one. All subsequent slides received 4% each of the total amount of clicks.

If you read the one-page study closely though, you'll see that Runyon isn't making the argument that carousels are a weak or even obsolete design trend. In fact, the other stats included in his study (which most people leave out of their argument) showed that visitors were more receptive to carousels when used on different types of websites or when used in other ways (auto-forwarding vs. manual rotation).

Like with anything in design, there's a proper time and place for everything. You just have to know when it's right for you.

To Slide?

Now, let's take a look at the argument for the supporters of sliders and carousels:

Space Saver: Carousels allow for a large amount of images or content to exist within a single space instead of forcing visitors to scroll down a too-long page.

Reduce Clutter: For some websites, it's important to showcase different products, work samples, team members, and more. Sliders can reduce the clutter which may inevitably come with all those moving, yet related pieces.

Attention Grabber: Adding the right type of movement to a website's design can help draw visitors in to high quality and relevant content.

Provide Perspective: Some websites have a product or service that needs to be highlighted from different angles. A great example of this is a phone retailer who wants to display a number of images of their mobile devices from different viewpoints.

Multi-Purpose: While the University of Notre Dame's website didn't work well with the carousel, there are other business types that will. Retails, freelancers, and others looking to highlight their products and services (rather than random promotions) can benefit from a sliding design element.

Video Replacement: Video is “in” right now… but it's not that affordable of a marketing investment for smaller businesses or those with a tight budget. Slideshows are a great alternative that still allow for creativity in design and movement.

For those that support the slider and carousel movement, you should check out this study conducted by Mobify. While the results cannot be placed side-by-side with the Notre Dame study since the variables don't align, the end results do show that, when used in the right setting, carousels work very well with an online audience. Here are some of the results that came out of this experiment:

The very nature of e-commerce websites makes them a better breeding ground for carousels than education websites.

Mobile users may be more receptive to a carousel because it's easier to swipe on a device than to click or wait for auto-forwarding on a desktop.

Visitors find carousels showcasing a variety of marketing messages as irrelevant and too salesy in the wrong setting.

The definition of “success” (number of clicks on a CTA vs. number of clicks to the next slide) is relative. You just need to have a solid understanding of what they really aim to achieve.

While the results from the Mobify and Notre Dame tests are not definitive proof regarding the performance of carousels and sliders on a website, they do demonstrate one very important fact: Designers and developers need to know their audience fairly well before applying any design principle to a website. It's ultimately the pains and goals of your customers and prospects that drive them to visit the website in the first place. If a carousel can be effectively used to deliver content around those ideas, then there's a good chance they'll be well-received.

SITE MANAGEMENT

Manage multiple WordPress websites with The Hub

The Hub is your mission control for monitoring the vital stats of all your sites, including uptime, performance and security. Add as many sites as you want – including Multisite networks – and receive instant security alerts, run performance scans, and get notifications when any of your plugins or themes need to be updated.

FIND OUT MORE

15 Ways to Add Value to a Website with a Slider or Carousel

Your website is expected to function properly. That's why many of the concerns of anti-sliders are valid. If you're using a slider for the sake of appeasing a client just because they really want one or you just haven't taken the time to research the tips and tools you need to properly pull it off, you could end up putting your website's performance and reception in danger.

If user engagement is what you're looking for, then the user experience always needs to be top-of-mind in web development. So when adding a slider to your website, keep the following tips in mind:

#1: Optimize Placement

When sliders came into prominence, they would've sat right at the top of the home page where most designers currently place hero images. As a WordPress developer though, you know there are other areas of the website that have the potential to make good use of denser sliding content.

The Zappos websites features a centrally placed slider.

#2: Consider the Size

Do you need to include a full-width slider or is it taking up unnecessary space? Consider the purpose of the slider, the size of the images within it, and the balance it can create with the rest of the elements on a page to determine what will be the best size for it.

#3: Use High-Value Content

If the studies above proved anything, it was that your visitors want to view content that provides some sort of value to them. Make sure the images and copy used in your slider reinforce your website's mission and messaging and give visitors the motivation to look through it in its entirety.

The Visit Philadelphia website features professionally shot photographs of the city.

#4: Select High-Res Images

In general, it's a bad practice to use images of low resolution or poor quality on your website. The same should apply to a slider or carousel-especially since the big draw for this type of design element is usually the photos included within.

#5: Keep Text to a Minimum

Sliders and carousels are fantastic at showing off imagery, but text can detract from that experience. Busy images can often make text placed on top of them hard to read. Also, if a slider rotates too quickly, visitors may not have enough time to read. And then you also need to consider that text embedded in an image probably won't display properly on mobile devices. If possible, avoid using text as it will only complicate matters. If it can't be avoided, try to keep it to a minimum.

#6: Pay Attention to the Scroll

There are a number of ways you can approach scrolling controls. The decision to choose one over the other usually depends on the content contained within the slider. Auto-scrolls work fine for image-only sliders, so long as the scroll doesn't happen too quickly. Your best bet may be to force-stop the slide as soon as someone clicks or views the slider. It will then be up to them to click or swipe when they're ready for the next slide.

We use a slider on our homepage (when you're logged out) to display testimonials.

#7: Give Visitors Control

Whether your slider is an auto-scroll or manual scroll, make sure slider controls exist for when your visitors are ready to take over the scrolling experience. Keep in mind that arrows, buttons, and dots can distract from the content in the slide, so see if you can find a way to display them only once a visitor hovers or clicks on a slide.

#8: Create a Subtle Slide

Sliders don't need to be jarring in their motions in order to gain attention. There are a variety of transition movements that are much subtler-like a fade-that will still grab attention enough to get your content viewed.

#9: Emphasize the Important Stuff

In the contrasting studies mentioned above, they both noted that the first slide is always the most looked at and clicked. That's why it's important to sort your slides strategically. If there is a product or service element that is most important for your audience to see, put it in the first position.

#10: Limit the Slides

On a related note, there will be some visitors who want to view more than just the first slide or image. However, that doesn't mean their patience won't wear thin after a while. Use your slides to share your message, but be brief. Cap it at four slides where appropriate.

#11: Focus on Speed

It's always difficult to get excited about adding more images to your website when you already know how much the current ones bog down your site's speed. So if you're going to use a slider, make sure you have a good image optimization tool to keep them from slowing things down.

#12: Customize Each Slide

If you're going to include a CTA on your slides, try to keep the design and placement consistent for each of the CTAs. However, if each slide links to a different service or product, you might want to apply a unique color to each. If someone wants to scroll back through the slides and find the one they were interested in, the colors will more easily set them apart from one another.

#13: Consider Accessibility Obstacles

There are a number of accessibility considerations you'll need to take into consideration before adding a carousel to your website. W3C has done a great job in detailing what you'll need to do in order to make your carousels keyboard- and screen reader-friendly.

#14: Make It Responsive

Carousels and sliders can be tricky to pull off on mobile devices if you're planning to include text, oversized images, or scrolling buttons/arrows. There are ways to make this work though, so be sure that you start by using a slider plugin that advertises itself as “responsive.”

#15: Use Plugins

Last, but definitely not least, you'll need plugins to help you create your website's slider, capture the desired effects you want it to have, and optimize the content for high performance. Here are some of our top picks:

WP Smush
If you don't already have a way to compress your website's images, this is a great place to start. This plugin will automatically downsize and optimize the images you use inside and outside your slider, and ensure they never get in the way of your website's load time or performance.
Interested in WP Smush?
- Details
Carousel Horiztonal Posts Content Slider
Typical website designs call for no more than 3 or 4 columns of horizontal widgets or blocks of content. With a carousel though, you can now showcase multiple batches of content within a single space. In addition, this plugin offers various transition effects, pagination options, and is fully responsive.
Interested in Carousel Horiztonal Posts Content Slider?
- Details
Kiwi Logo Carousel
If you're planning to use your carousel to show off logos-be they of your partners, clients, sponsors, or something else altogether-this plugin will do the trick. You can also play around with greyscale coloring if you want to give all your logos a muted, but consistent look (which is great if you want to keep the focus on your own website's logo and brand). With a drag-and-drop interface, this plugin is an easy one to use if all you want to do is showcase logos.
Interested in Kiwi Logo Carousel?
- Details
Huge-IT Slider
This is by far the most popular slider plugin available on WordPress at the moment. If you're looking for a responsive slider for your website's videos and images as well as one that's chock-full of customizations, go with this.
Interested in Huge-IT Slider?
- Details
A/B Theme Testing
So let's say you do end up adding a slider or carousel to your WordPress site, but you're worried it's just clogging up space or driving people to click away. It might just be that you haven't used the right transition effects, colors, images, size, or placement, right? With A/B testing you can test out different versions of your slider before completely dumping it and jumping on the anti-slider bandwagon.
Interested in A/B Theme Testing?
- Details

Wrapping Up

The most important thing to remember in all this is that if you choose to use a slider or carousel on your website, that it needs to serve your audience's needs. It can't just be to stuff a bunch of product images or testimonials into a small space on your sidebar. Everything about your slider element should be strategically designed, from the placement of it to the transition styling. If you have content worthy of displaying in rotation on your site, then make sure you're using the right design element to let it shine.

JavaScript, WordPress and the REST API: Sorting Fact from Fiction

Are you thinking about using the REST API for your WordPress site? Maybe you've been reading all about it, are intrigued but are put off by some of the disadvantages of working with JavaScript that you may have heard about.

When it comes to getting to grips with JavaScript and the REST API, it's not unusual to be a bit nervous. After all, if you've been creating WordPress themes and plugins using PHP, or you've been downloading third party themes that are written in PHP (as pretty much all of them are right now), you'll have to learn a whole new skill set or get used to a different environment.

You might also be worried about what making the switch means for your site's performance and your users. Will it affect the user experience? Will it impact on your SEO? How fast will your site run? The REST API is very new so it's sometimes hard to find concrete answers to these questions.

In this post I'm going to look at some of the things that might concern you when you're considering working with the REST API. I'll identify which of these you need to worry about and which you don't. Hopefully after reading this post you'll have a better idea of whether the REST API is for you.

I'm going to look at:

Browser compatibility,

Performance,

User experience,

SEO, and

Accessibility.

But first, let's just remind ourselves of what the REST API is and the possibilities it offers us as developers.

The REST API: What Is It?

REST stands for REpresentational State Transfer, which I'll admit doesn't tell you much at all. Wikipedia clarifies things a little:

“RESTful systems typically, but not always, communicate over Hypertext Transfer Protocol (HTTP) with the same HTTP verbs (GET, POST, PUT, DELETE, etc.) that web browsers use to retrieve web pages and to send data to remote servers.”

In WordPress terms, that means using HTTP to access the data in your site's database, rather than sending database queries directly using PHP or SQL.

Still confused? I know the feeling! More simply put, the WordPress REST API means that the data in your site can be accessed by an external application other than WordPress. You do this by using JSON (JavaScript Object Notation) and JavaScript itself. So you can build a website or an application on JavaScript instead of PHP.

This opens up two main opportunities:

By building a site in JavaScript, you can create something called a Single Page Application (SPA). If you've ever used Google Docs you've already interacted with one of these. A SPA is a website that behaves like an application and in which the content of the page changes following your interactions with it, without you having to switch to another page. Which makes things much more dynamic and interactive.

Because you're not limited to PHP, you can build applications based on your WordPress data on other platforms, such as mobile. So you could have a normal PHP-based WordPress site and also build a mobile app that uses the data from that site, updates that data where relevant, and can have a completely different design from your website. You could also build a desktop app like Automattic's Calypso app for WordPress.com

So if you're creating simple websites (brochureware, blogs or information repositories, for example) you're unlikely to need to use the REST API. But if you want to build something that's much more interactive and reacts quicker to user inputs, then the REST API opens up all sorts of possibilities.

Now let's move on to looking at the potential barriers to using the REST API and which ones you should or shouldn't worry about.

Browser Compatibility

The most obvious thing about building a site in JavaScript using the REST API is that it will only run on browsers that have JavaScript enabled.

Try accessing a SPA you use frequently (something like Google Docs) and turn JavaScript off in your browser. It doesn't look good:

Everything disappears! That's because the application runs entirely on JavaScript. So if your users don't have JavaScript enabled, they'll be unable to even see your site, let alone interact with it.

But how many people are likely to not have JavaScript enabled? Well, on desktop that's not many at all. All of the major browsers run JavaScript, so unless your users have decided to turn JavaScript off, they'll have access to your site.

On mobile browsers you shouldn't have a problem either. The major mobile browsers run JavaScript, even Opera Mini if it's on a recent operating system. It used to be that Opera Mini's method of rendering content via a proxy server meant that it didn't play nicely with JavaScript, but in more recent releases that isn't the case. However if your target audience is likely to be running older operating systems, then I'd advise checking which browser versions they'll be running and what the JavaScript compatibility is.

If you do think you'll have users who don't have Javascript enabled, then you can add some content to your site which will only be visible to them. You put this inside a