Posts

WordPress member directory

Are you looking to create a WordPress member directory?

Now you can easily create a member directory using UserPro Plugin. UserPro automatically creates a list of all the users on your network, with avatars, pagination, and a built-in search.You can also add categories and custom search filters to your member directory using UserPro Plugin.

This tutorial can give you a quick walkthrough on how to setup a WordPress member directory.

Creating a WordPress member directory:-

First, make sure that you have Installed and activated the UserPro – User Profiles with Social Login plugin. For more details, see this step by step instruction on how to install a plugin in WordPress.

Upon activation, you can find Member Directory Page into your WordPress Dashboard > Pages Menu.

WordPress member directory

There are a number of shortcodes available in UserPro plugin. To customize the shortcode and assign as a pair option=value in your shortcode try this:-

[userpro template=memberlist option=value]

Find some of the shortcode options below:

  • exclude – Hide specific users from appearing in the member directory. e.g. 1,3,10 will hide these users from the member list.
  • Search – Turn on/off member search in the member list. Default: 1 (turned on)
  • per_page – How many members to display per page. Default: 1
  • memberlist_v2 – This can turn on/off the member directory (version 2). Default: 1 to use the new member directory layout.

Example :

[userpro template=memberlist exclude=1]

Exclude the member who’s member user id is ‘ 1 ‘.Like this, you can add a number of options into your shortcode. You can also add custom filtering available for all custom fields, including showing users per specific custom field, or role, etc.

member directory WordPress

Display Members using v1 style

This will show rounded profile picture of your members, and also supports search, filtering, and pagination.

[userpro template=memberlist memberlist_v2=0]

member directory WordPress

How to Embed the above Shortcode with PHP Code:

<?php echo do_shortcode(‘[userpro template=memberlist]’); ?>

Setting up an Enhanced Members Directory

For creating an enhanced member directory, you need to add that page using below shortcode:-

[userpro template=emd]

emd

The enhanced member directory list supports pagination, and unlimited custom filtering/sorting options were it would give you a flexible way to showcase and present your members and choose which custom fields appear for each member.

Find some of the shortcode options below:

  • emd_filters – This option will Show or hide the search and filters bar.  Default: 1  for show
  • emd_thumb – Avatar size is number only. e.g. 200 will display profile photos 200px wide.
  • emd_fields – A list of fields (including custom & default fields) to display for each of the users listed in the given member list.e.g. emd_fields=first_name,last_name,gender,country will show name, gender and country
    This option uses custom field keys.
  • emd_paginate – Enables pagination in EMD shortcode, default: 1 to enable pagination and 0 to disable pagination

How to create Custom Search Filters in EMD?

Example 1: Take Gender as a Custom Filter

Add following option and value into your shortcode: emd_gender=”Gender,radio”
The first part in your value will display the label and second part will show the type of your filter.

Example :

[userpro template=emd emd_gender=”Gender,radio”]

If you do not set radio or dropdown for the filter, it will be a default search input/text. You can make unlimited custom search filters using this method, including custom fields you created by using this pattern. emd_{custom_field}=”Label,type” in your emd shortcode.

I hope this article helped you setup a WordPress member directory. It’s an awesome way to share your things with particular people or friends on your website and keep it private, too.

If you like this article, then please follow us on Facebook and Twitter for more updates and articles.

You might also want to check out the article on how to create a WordPress redirect after successful login for users.

If you have any questions/feedback, please let me know in the comments.

We’ve had a lot of our users asking how to add in Google Fonts or their own custom fonts to SlideDeck 2. And recently Dave wrote up a nice little FAQ on the topic. I thought I’d bring it here and elaborate on it slightly more.

This Tips & Tricks post requires some coding, but if you can copy and paste and edit a few lines of code and have access to your functions.php file, you can add your own fonts to use with SlideDeck 2 with relative ease. To load your own custom fonts you will need SlideDeck 2 for WordPress 2.1.20120823 or newer.

This example deck uses the Changa font from Google Fonts – compare to the Dribble Example on our Examples page which uses Lobster Two:

To add your own fonts you will be hooking into the filter that loads them. Here is how you do this:
Add the following code to your functions.php file of your WordPress theme:

function add_my_custom_fonts_to_slidedeck( $fonts, $slidedeck ){
$fonts['droid-sans'] = array( 
// The name of the font displayed to the user in the drop-down
'label' => "Droid Sans",
// The CSS font stack used
'stack' => "'Droid Sans', sans-serif",
// The location of the CSS file that describes the web font
'import' => "http://fonts.googleapis.com/css?family=Droid+Sans",
// The CSS font weight used when this font is chosen
'weight' => '400'
);
return $fonts;
}
add_filter( 'slidedeck_get_font', 'add_my_custom_fonts_to_slidedeck', 10, 2 );
What does it do?

This adds the Droid Sans font to the list of fonts that gets pulled into the Title Font and Body Font options of SlideDeck 2 when editing a Lens. You will be able to choose/select your font now for use in your deck. What are all the parts that make this work?

  • label – The name of the font displayed to the user in the drop-down
  • stack – The CSS font stack used or “font-family” property. For Google Fonts be sure to use what is specified in step 4 of the Use instructions, see below
  • import – The location of the CSS file that describes the web font
  • weight – The CSS font weight used when this font is chosen, be sure to use the correct value, some Google Fonts use a number value instead of “normal” or “bold”

To get the correct reference from Google Fonts, you just need the URL reference to the CSS for that font. You can get that by adding the font to your collection, going to Use, down to step 3 and copy the href value of the stylesheet link.

To get the correct font stack from Google Fonts, take a look at step 4 in the Use tab.

To get the correct font-weight from Google Fonts, take a look at step 1 in the Use tab. Note you can only load 1 weight per entry. Essentially treating each weight as its own font.

What if I want to add more than one font?

You can add in as many fonts as you like, just be sure that the key for the font in the $fonts array (‘droid-sans’ in this case) is unique. For example if you wanted to add in Droid Sans Normal, Droid Sans Bold & Proxima-Nova your code would look like this:

function add_my_custom_fonts_to_slidedeck( $fonts, $slidedeck ){
// Loads Droid Sans in Normal(400) font-weight from Google Fonts
$fonts['droid-sans-normal'] = array(
'label' => "Droid Sans Normal",
'stack' => "'Droid Sans', sans-serif",
'import' => "http://fonts.googleapis.com/css?family=Droid+Sans:400",
'weight' => '400'
);
// Loads Droid Sans in Bold(700) font-weight from Google Fonts
$fonts['droid-sans-bold'] = array(
'label' => "Droid Sans Bold",
'stack' => "'Droid Sans', sans-serif",
'import' => "http://fonts.googleapis.com/css?family=Droid+Sans:700",
'weight' => '700'
);
// Loads Proxima Nova in Bold font-weight from a local font file
$fonts['proxima-nova'] = array(
'label' => "Proxima Nova",
'stack' => "Proxima Nova, sans-serif",
'import' => "http://www.mywebsite.com/fonts/proxima-nova.css",
'weight' => 'bold'
);
return $fonts;
}
add_filter( 'slidedeck_get_font', 'add_my_custom_fonts_to_slidedeck', 10, 2 );
The import value for Proxima-Nova looks different, why?

You may see that Proxima-Nova’s import value is different. Proxima-Nova is not a Google Font, but with a web usage license you can reference the CSS hosted on the website that includes this font. Check out these links for more information on @font-face:

Since this code is a WordPress filter, you need to return the $fonts variable at the end of the function, whether or not you have modified it. For more information on using WordPress filters check out:

What if I use TypeKit?

If you are using a service like TypeKit which requires the insertion of custom JavaScript to load the fonts, you can leave out the import key and value. See this example for how to format your filter:

function add_my_custom_fonts_to_slidedeck( $fonts, $slidedeck ){
// Loads Museo 300 from TypeKit - you need to use the slidedeck_iframe_header action to echo scripts to view in preview and via iframe mode
$fonts['museo-300'] = array(
'label' => "Museo 300",
'stack' => "'museo', serif",
'weight' => '300'
);
return $fonts;
}
add_filter( 'slidedeck_get_font', 'add_my_custom_fonts_to_slidedeck', 10, 2 );

You will need to make sure you add your TypeKit JavaScript to the <head> tag of your site, follow TypeKit’s instructions here. You will also need to hook into the newly added slidedeck_iframe_header action and echo your scripts into the iframe head for the preview and if you load your SlideDeck using the iframe method. To do this you would have an addition to your functions.php file that would look like this:

function add_my_custom_typekit_font_script( $slidedeck, $preview ){
// Replace the JavaScript tags here with the code for your Typekit Kit
$script_output = '<script type="text/javascript" src="//use.typekit.net/oak0aqy.js"></script>';
$script_output .= '<script type="text/javascript">try{Typekit.load();}catch(e){}</script>';
echo $script_output;
}
add_action( 'slidedeck_iframe_header', 'add_my_custom_typekit_font_script', 10, 2);
In Summary

You can add the fonts you want from Google Fonts with just a bit of custom code, you can even add in your own fonts via the @font-face implementation just by loading your own CSS. With the ability to load in your own custom fonts, you can now make SlideDeck 2 fit that much better with your site than you could ever before.

We would love to see your implementations of custom fonts in your SlideDecks. Share a link to your custom font SlideDeck in the comments below. If you have any technical questions about implementing your own custom fonts, please create a new support ticket.

Have you ever stared at a pay terminal and didn’t know where to begin? I have this problem more than I’d like to admit, particularly when trying to buy a ticket for the train or when paying for parking. The main problem I’ve found is that there’s no easy-to-identify place to start. In web parlance, no clear call to action. Clear, compelling calls to action are the lifeblood of your business on the Web. They are the sign posts and cues that give your users the guidance they need to continue down the right path towards conversion.

Calls to action are often just thought of in terms of a button, if they’re thought of at all. Too often, calls to action are omitted or stuck into the design as an after thought. What a tragedy. Weak calls to action (CTAs) result in confused visitors and lost opportunities as potential customers wander out of the conversion funnel and away from your site. In this post we give you six ways to bolster your CTAs to really drive results for your website.

Six Ways to Get More from Your CTAs

Before we get started, it’s important to note that a call to action isn’t just about sticking a button on a page. A call to action is the entire sum of the design and content helping visitors move down the funnel toward conversion. When you think call to action, think holistically, not just in terms of a button. There are many different types of CTAs, from buttons to buy, links to download and visual design cues guiding your visitor down your conversion funnel. Without CTAs your users can get lost and confused which, in the worst case, will lead to them leaving your site. To keep your customers headed in the right direction here are our best tips for pumping up your CTA performance.

Use these in your SlideDeck and watch your conversion rate soar.

1.) Make them stand out. From a design perspective your CTAs should be easily distinguishable from other content in your SlideDeck. Use a color that is easy to see on the slide and stands in contrast with the background.

2.) Keep CTA design consistent. Your CTAs throughout your SlideDeck and site should be consistent and easy to recognize. Changing from buttons to links, and drastic changes in colors and shapes can can create confusion. Help your visitors identify CTAs by keeping them consistent. SlideDeck Call to Action

3.) Use active and descriptive phrases. Phrases like “Get Started”, “Download Now”, “Learn More”, and “Get an Invite” create a sense of positive action that gets visitors moving forward down the right path. Avoid generic CTAs such as “Click here” that don’t provide users with any sense of benefit. “Click here” can work, if properly paired with a benefit, such as “Click here for 27 money-saving tips.”

4.) Use design elements that indicate forward progress. Include design elements such as arrows in your CTAs to indicate momentum and progress. This helps your visitors feel like they are moving in the right direction to solve their problem or meet their need. the lean startup call to action

5.) Put them on each slide or page. After a visitor reads a slide in your SlideDeck or a page on your website, they’ll try to figure out what to do next. Ensure they head in the direction you want them to go by putting prominent CTAs on each slide and page. Never assume a visitor is entering your site from the first step of your funnel, help them orient themselves quickly with clear guidance.

digital telepathy call to action

 

6.) Keep them visible. If you’re using vertical slides in your SlideDeck or you have long content pages, make sure you have multiple CTAs so that users don’t have to hunt them down once they’re ready to act.

unbounce-cta

Make CTAs that light the way

Without strong calls to action your visitors will get confused, frustrated and lost, leading to fewer conversions for you. Turn on the lights, provide good sign posts, and lead them to the promised land with clear, action-oriented CTAs that guide them down the funnel. By being consistent in your design and placement, using active and descriptive copy, and indicating forward progress in your design, you’ll be on your way to improving the conversion rate of your site. And if you liked this post, but missed the rest of our SlideDeck Survival Guide, be sure to check out our other Survival Guide posts here.

Have a favorite call to action? Let us know in the comments!

Every single one of the visitors to your website has a question or two they need answered before they seriously consider committing to you. Whether you want them to sign up, download, or buy, they need some information to help them make that decision. The better you are at identifying and answering these questions, the more confidence you’ll inspire in your visitors. And more confidence means more conversions. Fortunately, there area a set of basic questions that every user needs answered before pulling the proverbial trigger. Answer these questions right off the bat with your SlideDeck to build confidence with your visitors:

  • What your product or service is or does
  • How it works
  • What the key benefits are
  • What it looks like in action
  • How can the visitor get started and take action

It’s up to you how you answer these questions. You can answer them one to a slide, or you can weave them through your SlideDeck narrative. It’s up to you how you answer them, the important part is that you address them in a way that builds the visitor’s confidence in you. Let’s break these down and examine how to address each of them to answer any questions your visitors might have.

What would you say you do, exactly?

If people don’t have a good understanding of what your product or service is or does they aren’t going to sign up or purchase it from you, period. Think of an ‘elevator pitch’ for your product or service. Can you get what you do down to one or two concise sentences? That is your goal.

You must explain what it is you do (or what your product does) in straight-forward language so that people who aren’t intimately familiar with it (read: you and your team) understand it right off the bat. Far too often, we’re so close with our own products and services that we think everyone just “gets” what we do. The reality is often far from it. So ask people who haven’t used your product before to check out your SlideDeck and see if they can clearly articulate back to you what you do. If you’re surprised at what you hear you might have some more work to do.

awesem slidedeck

How does it work?

The more a visitor understands how your product works the more likely the are to convert. This understanding builds the confidence they need to make an informed decision. Explain how your product or service works and the features that set it apart from the competition. Help your visitor frame your product against other options. Use plenty of visuals where possible.

You also want your SlideDeck to hit the highlights. Identify and promote the “killer features” that make your product stand out from the rest. Hone in on those key differentiators and promote them. If you have a complex product, like a cell phone, you can use vertical slides to go into greater details about specifications and features without cluttering your main product/service overview. And remember, you can use more than text and images in a SlideDeck. Throw in a video demo, add a gallery, or an audio testimonial, SlideDeck can handle it all.

What’s in it for them?

Identifying and promoting the key benefits is critical to your success on the web. People buy solutions, not features, not products and services. Too often companies lead with features, when really the selling point is the benefit, the solution to the visitor’s problem. Identify the key benefits of the service. If possible brainstorm with your team to capture and prioritize them all. Ask past customers which benefits were the ones that stood out to them and made them pull the trigger. Take your top benefits and make them a top priority in your SlideDeck.

retargeter slidedeck

Show, don’t tell.

Every car salesman knows this. Get a user to take a test drive and your odds of turning that visitor to a customer go through the roof. People want to get a sense for what your product or service looks like in the wild. If you can’t give them a test drive, give them a SlideDeck packed with insight into the product in action. Use case studies of happy clients or provide a step-by-step walk through of your product. Incorporate testimonials and use video and images to present the key benefits of your product or service in a compelling way. Show how you create success for your customers or users.

Let’s get it started

Once you’ve got your visitor excited about committing don’t leave them hanging and don’t make them stumble around to take the next step. Take a tip from the movie theaters and their clearly-marked exits, make the next step action clear, prominent and compelling. And remember, every visitor has a different information need and decision-making process. Don’t assume that all of your visitors will reach the end of your SlideDeck before being ready to commit, add a call to action at each step of the way, and make sure the path is clear and well lit.

Any other questions?

By answering your visitors’ key questions you improve their confidence. Improving confidence improves conversion. Identify the information that is most important to your users and make sure you address their concerns in your SlideDeck. Use vertical slides to provide more detail, and create product tours and case study galleries to showcase your product in action. Build in video testimonials and other content to provide compelling real-world proof of the benefits of what you do.

The more you understand about your customers and what they need in order to feel comfortable committing, the more success you’ll find on the web. Want more tips to maximize the performance of your SlideDeck? Check out the step-by-step guide to increasing conversions with SlideDeck and how to use vertical slides with SlideDeck. These recommendations work best together, so read up, tune up your SlideDeck and watch your results head in the right direction.

Vertical Slide NavigationIn the first Survival Guide post we showed you how to tell your story and build the perfect SlideDeck. In this post we’ll show you how to use vertical slides to win over visitors who need a bit more convincing, without losing the user flow or conversion funnel.

SlideDeck is designed to help you clearly communicate with website visitors who are looking for answers. But what if a potential customer needs more information before making a decision? No problem. With SlideDeck Pro, you can integrate vertical slides that let you expand on any key point, providing extra detail without sacrificing the user experience. Whether your goal is sign-ups, downloads or purchases, SlideDeck gives you the ability to add the extra detail you need while pushing your conversion rates higher than ever.

Vertical slides come with SlideDeck Pro. If you’re using SlideDeck Lite you’ll need to upgrade before implementing any of these tips. You can upgrade to SlideDeck Pro here.

Why Go Vertical

On the web, the adage that less is more is certainly true. But there are just some instances when you need a bit more depth to communicate the value of your product or service. But why take visitors to some random sub-level page, out of the main flow of your conversion funnel, when you can add that detail seamlessly within SlideDeck?

Here are a few reasons to go deep with your SlideDeck:

  • Promote the services of your company. Let’s say you’re an iPhone app development firm who is using a SlideDeck to showcase your business offering. A slide in your main (horizontal) SlideDeck may display previous projects. You can use vertical slides to drill into the details of each project, right from the slider.
  • Sell a product. If you’re using SlideDeck to sell a product, use vertical slides to drill down on product features. If you’re selling a cell phone you can dive into the detailed product specs without losing the main message and flow of the funnel.
  • Sell yourself. If you’re a freelancer, SlideDeck makes for an awesome portfolio. Use the top-level slides to talk about the value you bring to projects while using vertical slides to back that claim up with previous work, concepts, case studies and testimonials.

How to Go Vertical Like a Pro

Multi Diimensional Slides
It’s never smart to add slides to your SlideDeck without good reason. Random slides of little value are dead ends for your web visitors and conversion killers. Avoid those traps with these tips on how to make vertical slides work for you:

  • Go vertical when you need to reinforce the key benefit on the main slide. If you claim a laptop is is fast, a vertical slide highlighting the RAM and processing power gives the reader the backup they need.
  • Don’t go vertical all the time. Save it for the parts of your story that really benefit from more detail, like a gallery, product specs or testimonials. A good rule of thumb is no more than one or two vertical extensions in your SlideDeck. If you need more than that, consider multiple SlideDecks, like one on each product page.
  • Keep the vertical slides short, sweet and powerful. Make sure they’re answering key questions and reinforcing product benefits.
  • Keep calls to action driving people back to the main flow and towards conversion.

See Vertical Slides in Action

The SlideDeck we use to showcase the benefits and features of SlideDeck on the homepage of this site is a prime example of how and when vertical slides can really add to the user experience and drive conversion. Let’s break down this SlideDeck and see how the vertical slides help drive new customers for us.

The main SlideDeck is only four slides and walks the user through what SlideDeck is, the benefits of its powerful features, its ease of use and how to get started. For more tips on how to construct your story with SlideDeck see the Tell Your Story Survival Guide.

Slide One gives a quick video walk through of what SlideDeck is.

Slide Two highlights the different use cases for SlideDeck and uses vertical slides to show how SlideDeck excels in those situations. This let us communicate the variety of ways that SlideDeck can be used without getting in the way of the overall flow. We also talk about its vertical slide functionality with a vertical slide. Very meta.

Slide Three highlights the different features of SlideDeck including the SlideDeck API and easy-to-use WordPress GUI.

Slide Four is the call to action to download SlideDeck. After seeing how powerful and easy SlideDeck is to use, readers are primed to click download.

Putting Vertical Slides to Work for You

Ready to get started with vertical slides? If you’re using the jQuery version, view this post on how to add vertical slides to your SlideDeck. It includes code samples and tips to make implementing them a snap. And if you’re using the WordPress plugin, adding vertical slides is a breeze, handled right from the WordPress admin.

Vertical slides are a powerful way to expand on your key messages without degrading the user experience and taking customers out of the conversion funnel. You can use vertical slides whenever your main message point needs more backup, such as case studies, product features, customer testimonials and more. Remember to keep vertical slides to a minimum and demand the same short, sweet and powerful content as your primary slides. If you’re using the Lite version, upgrade your SlideDeck now and see how vertical slides can improve your communication on the web, and increase your conversions – driving more business for your business.