Archiv der Kategorie: Wordpress

FullStory Lets You See Your Site from a User’s Perspective

Imagine being able to see your website as a user does. You might catch their frustration when something doesn’t work as expected. Or, you may give yourself a high-five when seeing a transaction go just as you hoped.

Even if you aren’t sitting right next to each and every user, you can still see exactly how they interact with your website. FullStory makes it happen.

FullStory - The Service that Beats Traditional User Testing

The Service that Beats Traditional User Testing

With FullStory, you can replay user sessions with pixel-perfect accuracy. You’ll see every click, key press and page transition along the way. Even better is that each session is a fully-inspectable recreation of your website – with DOM, the JS console, and assets. So, for example, when a JavaScript error pops up during a user session, you’ll see it. A detailed log of every JS error from a user’s browser is provided.

Unlike traditional user testing, FullStory is a complete solution with incredible detail. With the FullStory TV feature, you can choose to auto-play every user session or just a saved segment. You’ll gain non-stop insight into how users interact with your site. As you watch, patterns will emerge like rage, error and dead clicks. From there, you can determine what is and isn’t working much more quickly than with old school testing methods.

FullStory has Powerful Features to Analyze Data

Powerful Features to Analyze Data

While it’s great to have access to tons of session playbacks, you also need a way to quickly find the interactions you’re looking for. FullStory’s OmniSearch makes it easy. Find customers, view page analytics, create funnels and more. All you need to do is start typing – OmniSearch does all of the heavy lifting.

To visualize results, FullStory provides Searchies. Valuable data comes in digestible pieces like pie charts and funnels that automatically accompany every search and segment. It can help you to make sense of all that session data.

FullStory also integrates with a number of popular third-party applications. Session data can be sent to collaboration apps like HipChat, Slack or Trello. It also works with support suites like, HelpScout and Zendesk. You can bring insights directly into your BigCommerce, Shopify, Squarespace or WordPress/WooCommerce website. Plus, you’ll get the benefits of hooking into Google Analytics Universal and Google Tag Manager. There are a number of useful integrations available to meet your needs.

Team members will love FullStory’s collaboration-friendliness. You can send individual session playback links to people both inside and outside of your organization. This will help you collect valuable feedback and insight from others.

With the Identify API, you can bring customer information directly into FullStory. Customer data will be searchable within the app. Custom User Attributes let you populate unique user fields like a customer’s subscription level or their lifetime spend amount. Privacy is vital and FullStory makes it easy to exclude sensitive customer data through a simple point and click interface.

Sign Up for a Free FullStory Account

Sign Up for a Free FullStory Account

Do you really know how users interact with your website? Stop guessing and sign up for a free account with FullStory. See the valuable insights you’ve been missing. They’ll make for a better website, and you might even become the office superhero.

The post FullStory Lets You See Your Site from a User’s Perspective appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

Simple WordPress Snippets to Enhance Your Secondary Navigation

One of the great things about WordPress is the ability to reuse snippets of code over and over again within your themes. With that, you can build in ways to make websites easier to use.

In this article, we’re going to explore ways to enhance secondary navigation. In other words, navigation that is in addition to your site’s main menu. Adding these extra elements can further help users get where they need to go and discover content they may have otherwise missed.

Here are four such snippets you can use in your WordPress themes. While they’ll work as-is, it’s a good idea to add your own custom styles to ensure a perfect fit with your site.

Where to Place Code Snippets: The snippets below can be placed directly into your theme’s template files. The exact file may depend on your particular theme (check the Template Hierarchy for ideas). And, to some degree, it’s a matter of personal preference.  Use them where you think they’ll best serve your users.

It may also be a good idea to use conditional statements so that snippets are only displayed when certain conditions are met. For example, you might not want a particular snippet to run on your site’s home page.

Easily Navigate Within a Section of Pages

1. Easily Navigate Within a Section of Pages

if (  $post->post_parent ) { 
    $children =  wp_list_pages( array( 
        'title_li' =>  '',
        'child_of' =>  $post->post_parent, 
        'echo'     => 0 
    )  ); 
} else { 
    $children =  wp_list_pages( array( 
        'title_li' =>  '', 
        'child_of' =>  $post->ID, 
        'echo'     => 0 
    )  );
if (  $children ) : ?> 
        <?php  echo $children; ?> 
<?php endif; ?>

Source:  WordPress Code Reference

This code makes for a great secondary navigation menu that could be used, for example, within a sidebar. It automatically displays the pages within the current section you’re browsing.

As an example, let’s say your site has an About Us page, with subpages for History, Mission Statement and Staff. Users will be able to more easily navigate between the various pages within this section as a bulleted list of links.

Breadcrumb Style Page Titles

2. Breadcrumb Style Page Titles

<h1  class="entry-title">
//  Conditional Statement to Check for a Parent Post
if($post->post_parent)  {
$parent_title = get_the_title($post->post_parent);
$parent_link = get_page_link($post->post_parent);
// Display Parent Post Link, Title and Separator
echo '<span  class="parent-title"><a target="_blank" href="' . $parent_link .  '">' . $parent_title . '</a></span>' . '&nbsp;<span  class="title-arrow">›</span>&nbsp; ';
// Display  the Current Page Title

This snippet will check to see if the current page has a parent. If so, the parent page’s link and title are displayed within the H1 tag at the top of the page. An arrow character is also displayed between the parent and current page title to complete the breadcrumb look.

Note that this breadcrumb effect only goes one level deep. So you’ll have to adjust the code if you want to link to multiple levels (Parent » Level 1 » Level 2).

JS Dropdown Menu of Tags

3. JS Dropdown Menu of Tags

// Show a  Drop Down Menu of Tags
echo  "<select  onChange=\"document.location.href=this.options[this.selectedIndex].value;\">";
echo  "<option>Choose a Tag:</option>\n";
foreach (get_tags() as $tag) {
echo '<option value="' . get_tag_link($tag->term_id) .  '">' . $tag->name . '</option>\n';
echo  "</select>";

If your site takes advantage of WordPress post tags, it may be useful to provide a simple way for users to navigate between them. This is particularly effective for sites with a lot of tags.

For example, a project I worked on used tags as a way to filter posts by a relevant geographic region (of which there were dozens). This dropdown menu utilizes JavaScript to instantly direct the user to whichever tag they choose. You can also do something similar with categories.

Post Archive Pagination

4. Post Archive Pagination

the_posts_pagination(  array(
'mid_size' => 5, // The number of pages displayed in the menu.
'prev_text' => __( '&laquo; Go Back', 'textdomain' ), // Previous  Posts text.
'next_text' => __( 'Move Forward &raquo;', 'textdomain' ), // Next  Posts text.
) );

Source: WordPress Code Reference

While many WordPress themes have a simple back and forth navigation for post archives, it’s a nice touch to add individual page numbers to the mix. It allows for navigating to a specific page and also gives the user a sense of your content depth.

Note the 'mid_size' argument in the code above. The number placed there will determine the amount of pages seen between the Next and Previous text links.

Give Users a Helping Hand

Each of the snippets above can bring some measure of organization to how users access your content. This is especially important on sites that have a lot of subpages or blog posts. In the case of subpages, primary navigation can become overwhelming if you try to display each and every subpage. Adding some basic secondary navigation elements provide a more straightforward way for users to find what they’re looking for.

It’s also worth noting that these snippets are meant to be used as starting points. The flexibility of PHP and CSS allow you to add your own custom functionality and look. In many ways, you’re limited only by your own imagination.

The post Simple WordPress Snippets to Enhance Your Secondary Navigation appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

Weekly News for Designers № 394

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter or follow us on Twitter for some more amazing design articles, resources and freebies.

New Resources & Tools

Moodboard Builder for Sketch – Create beautiful moodboards in a single click with this Sketch plugin.
Moodboard Builder for Sketch

40 Cheatsheets & Reference Guides for WordPress – A collection of WordPress resources geared towards everyone from beginners to advanced users.
40 Cheatsheets & Reference Guides for WordPress

Get FullStory for Free, Forever.
Get FullStory for Free Forever

Remote Starter Kit – Get off to a flying start as a remote team with these mighty-fine tools that are tried and tested.
Remote Starter Kit

What’s New In DevTools (Chrome 59) – Find unused CSS and JS code with the new Coverage tab. You can reduce the size of your pages by only shipping the code that you need.
What's New In DevTools (Chrome 59)

fractures– A Baseline atomic CSS toolkit that helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.

GitPoint – The most feature-rich unofficial GitHub iOS client that is 100% free.

GatsbyJS – A blazing-fast static site generator for React.

pell – The simplest and smallest WYSIWYG text editor for web, with no dependencies.

Learning Guides, Tutorials & Tips

Web Accessibility 101: Design for All People, Not Most By Stephen Moyers
Web Accessibility 101: Design for All People Not Most

How to create a pattern library and why you should bother By Paul Boag
How to create a pattern library and why you should bother

Design better onboarding tooltips By Jake Tsacudakis
Design better onboarding tooltips

The Options for Programmatically Documenting CSS By Kaloyan Kosev
The Options for Programmatically Documenting CSS

Responsive Design Workflow in Sketch By Kjelle
Responsive Design Workflow in Sketch

Designing and building a web app from scratch: a case study By Louis Eveillard
Designing and building a web app from scratch: a case study

CSS Architecture for Design Systems By Brad Frost
CSS Architecture for Design Systems

Stealing Your Way to Original Designs By Dan Mall
Stealing Your Way to Original Designs

Free UI Templates

Molly – A free HTML single website template based on Bootstrap.

Styleguide Free Template – A free styleguide template for Sketch.
Styleguide Free Template

…and finally…

The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art) By Lou Levit
The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art)

Browse the Designer News Archives

The post Weekly News for Designers № 394 appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

Three Facebook Ad Tips That’ll Help You Increase Conversions

If you’ve spent any time on a marketing or design blog lately (other than this one), you’ve probably noticed a lot of buzz around Facebook advertising. Something like, “10 Ways Facebook Can Get Your Products to Fly Off the Shelf,” and other grand promises. Unfortunately, a lot of these posts lack any real value. Most of us have tried some of their “hacks” only to be wildly disappointed.

But, today, we’re going to change the game. In this post, we’ll go over some tips as well as some real, actionable practices that will help you boost engagement with your Facebook ads and (better still) get more conversions! You’re probably thinking, Yeah, yeah, yeah. We’ve heard that before. Ok, you have every right to be skeptical. Just hear me out-I think you’ll be pleasantly surprised.

1. Before You Go Any Further, Evaluate Your Offer

Before you go and spend hours and hours designing the perfect ad, you need to take a moment and consider the value of what you’re actually offering to consumers.

Even if you have a highly appealing ad that grabs attention, it won’t make any difference if your offer doesn’t interest the viewer. This doesn’t necessarily mean that you have to go around offer 50 percent off your merchandise (which wouldn’t be a very effective long-term plan, even if your products were flying off the shelves). Before deciding on your offer, it’s important to consider where the audience is in your marketing funnel.

One tremendous problem that a lot of marketers run into with Facebook advertising is that they don’t use the appropriate offer for their audience. For example, if you’re advertising to new consumers who have never heard of your products or services before, it’s probably not the best idea to try to sell to them right off the bat.

Designed by

Because these are cold leads, you need to warm them up first. So, for new leads, try offering them something that will educate them on your brand and get them interested in who you are and what you do. Free content is usually the best way to do this. For example, you could offer them a free ebook or informational video in exchange for their email. Once you’ve engaged with them and gathered their contact information, you can start nurturing them for conversions.

On the other hand, audiences that have already shown an interest in your products or services also need a tailored advertisement. Instead of just showing a generic ad or offer, segment your retargeting audiences based on the specific URLs they visited. For example, if you sell WordPress Themes and icon sets, you’d want to separate your retargeting audiences into people who want themes and people who want icon sets.

Remember, these people have interacted with your products without converting. So, try offering them a discount or other promotion to help push them toward conversion.

2. Monitor the Right Metrics Before Making Changes

There are a lot of different metrics to look at when you’re using Facebook advertising. However, many of these are just “vanity metrics,” meaning they don’t really tell you much about how your ad is working with your audience and whether or not it’s effective. For example, just because your ad is getting a ton of clicks, that doesn’t mean it’s time to pop open the champagne.

Instead, you should be tracking how many of those clicks result in conversions. So, instead of obsessing over CTR and impressions (reach), start paying closer attention to the number of conversions and your cost per conversion.

To do this, you’ll have to install a Facebook Pixel on your website. This allows the social platform to track user activity on your site and count the number of events. There are several events that you can choose from when setting up a campaign, such as add to cart, initiate checkout, and more. In this case, you’ll want to setup your conversion event as a “purchase.”

Once your ads have had some time to run, take a look at the ones that have garnered the most conversions. You should be able to notice certain trends for what’s working and what’s not. When creating new ads, use your successful ones as a starting point-you should still aim for improvement, so feel free to keep making changes.

3. Sometimes, Great Ads Don’t Last Forever

Great ads don’t happen overnight. Even once you’ve had a couple of successful ads, you may not be able to reproduce them quite as easily as you might think. The really tough part is when an ad that’s been doing really well will suddenly start to choke. What’s with that? You didn’t make any changes, so what’s changed?

There’s another metric on Facebook’s Ad Manager that you should pay attention to: frequency score. This metric tells you the average amount of times that an individual sees your ads. So, the higher this number is, the more likely that people are going to grow tired of your ads (also known as ad fatigue).

To avoid ad fatigue, you’ll need to make sure that you have a good rotation of ads. You don’t want to allow the same one to run for too long-even if it’s doing well. Generally, you’ll want to keep this number under four. And, if you notice an ad’s performance start to dwindle, switch it off for a while.

Oh, and one bonus tip: make sure to exclude users who have already converted.

Final Takeaways

There, that wasn’t so bad, was it? Now, I’m not going to make any too-good-to-be-true, “diet pill” type claims here. But, applying the information outlined in this post will definitely give you a better grasp of how you can steer your campaigns in the right direction and avoid some common Facebook ad mistakes.

Just remember: no more vanity metrics, undefined goals, or obnoxiously redundant ads. Now get back out there-you can do this!

The post Three Facebook Ad Tips That’ll Help You Increase Conversions appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

Get Started With the WPCOM.js WordPress API

The new WPCOM.js library lets you harness the power of WordPress to build a free and easy-to-update back-end for your web or mobile apps. In our new short course, Get Started With the WPCOM.js WordPress API, you will learn how to use WPCOM with a site. 

What You’ll Learn

In this quick half-hour course, Envato Tuts+ instructor Reggie Dawson will show you how to retrieve public content from your site, how to set up authentication tokens, and how to create and edit posts with the easy-to-use WPCOM JavaScript API.

WPCOM JavaScript API

By the end of the course, you’ll have the information you need to start using WPCOM.js for your web or mobile apps.

Watch the Introduction



Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

And to speed up your WordPress development work even more, why not check out the range of useful WordPress plugins we have available on Envato Market.

from Envato Tuts+ Code – WordPress

wpDataTables – Helping You to Easily Create Charts & Tables in WordPress

Have you tried pushing a boulder uphill lately? Maybe not, but trying to manage massive amounts of data when there’s seemingly no end in sight can be just as disheartening.

It’s even worse when you’re working with a variety of data types. I’m talking here about categories, statistics, labels, numbers, etc.

An obvious solution is to find a plugin, or some other tool, that’s up to the task. Even after finding one, you’re still stuck with figuring out how to use it.

wpDataTables takes that data management burden off your shoulders. It does the heavy lifting needed to organize your website data into clean, crisp, interactive and intuitive tables and charts.

Best of all, you don’t have to write a single line of code; not in machine language (gasp), or any other language.

wpDataTables 2.0, and its Top New Features

Any tool that’s used by more than 12,000 individuals and companies should be seen as a success. The wpDataTables team wasn’t completely satisfied however. Having listened to what their customers wanted, they improved the plugin by adding new features, doing away with a few small bugs, and making it easier than ever to use. The result – wpDataTables 2.0.

With 2.0 you’ll save LOTS of time

The new version is not simply intuitive to use. It’s incredibly intuitive. There’s zero learning process. This has been confirmed by 81% of the customers that participated in a survey.

The plugin’s back end has been given a makeover as well. It has, in fact, been redesigned from scratch, allowing you to create complex tables in minutes, even if they have millions of rows.

2.0 gives you instant results

It’s a given, that whenever you create a table or chart, you’re eventually going to have to make changes. When you make a change to 2.0-produced chart or table, you get an instant preview of that change to check the result. Your wait time has been reduced to zero.

Instant results are particularly helpful when you need something done yesterday!

No need to be a “techy”

WpDataTables provides a perfect solution for newbies. You don’t have to know code, or have had any experience whatsoever with data management tools. If you know how to click a mouse, and perform a simple copy-paste, you’ll do fine.

Having fewer things to worry about is always a nice feeling

wpDataTables functionalities that required a little fixing have been fixed, and others have been improved, conditional formatting, advanced filtering logic, and editing logic being three examples.

There’s no need to worry about a function backfiring on you when you’re working with it.

wpDataTables 1.0’s The Most Popular Evergreen Features

While fixes and improvements were made in the design and development of 2.0, the best, most popular features of 1.0 have been retained. When users tell you they really like a feature, and it doesn’t need improving, it’s often best to leave it alone.

You can work with and adapt ANY data you want

wpDataTables isn’t fussy about formats You can work with Excel files, Google spreadsheets, JSON, XML. CSV tiles – you name it. You can also generate tables directly from MySQL, if it’s real-time data you’re after.

You’ll get a responsive table or chart – any time, all the time

Whether it’s a small chart or a million-row table, you can be assured it will be responsive on any WordPress theme. Do you need a super-cool visualization chart using Highcharts or Google Charts? Not a problem.

You can organize a huge amount of data

This plugin’s high computational power, together with conditional formatting allows it to calculate sums and totals on the fly, and highlight number based on conditions you set.

It works in much the same way Excel does, only it’s both more powerful and more efficient.

Working with MySQL

As you work from its intuitive dashboard, wpDataTables will accept and work with any information you feed it. Using the Table Constructor, you can automatically generate SQL queries to existing tables, import existing spreadsheet files, or create MySQL files, all from the dashboard, and all editable within WordPress.

Instant data processing is a given

Put wpDataTables to work on a super-huge amount of data, and it can arrange and list the data in seconds. This is due in large part to using the MySQL engine, with some assistance from Ajax requests, to efficiently and effectively manage massive amounts of data.

wpDataTables spares you all the hard work by delegating data processing functionality to the MySQL engine and fetching data from the server via background Ajax request.

Wrapping it Up

wpDataTables is a lifesaver especially in situations that stretch your technical abilities.

Instead of spending hours beating your head against the wall, let this plugin do everything for you. A hero’s welcome, and a possible promotion await.

Financial or operational statistics, large product or service catalogs typically take hours to do. I don’t even want to start talking about complex analysis and comparisons.

Now, you can count the time spent in doing these tasks in minutes, or even seconds, and flawless results are your reward.

The post wpDataTables – Helping You to Easily Create Charts & Tables in WordPress appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

40 Cheatsheets & Reference Guides for WordPress

While WordPress is known for making content management rather simple, the depth of this CMS is surprisingly vast. There are multiple facets to discover, but you can learn about them on an as-needed basis.

For example, if you’re goal is to just input and edit content, you probably won’t need to learn about theme development. And theme developers don’t necessarily need to know much about writing plugins.

We’ve compiled a collection of cheatsheets and reference guides to help you along your journey with WordPress. They should come in handy – regardless of how you use the software.

Introduction to WordPress

Looking to learn some of the basics? This is a great place to start! Here are some resources aimed at those who have little-to-no experience with WordPress.

What Exactly is WordPress? (Speckyboy) View →
A Beginner’s Guide To Creating A WordPress Website (Smashing Magazine) View →
How to Start a WordPress Blog (Step by Step) (WPBeginner) View →
Intro to WordPress (WP101) View →
WordPress For Dummies Cheat Sheet (Dummies) View →
WordPress Glossary (WordPress Codex) View →

WordPress Theme Development

Theme development with WordPress is quite flexible. You are able to create a style all your own while taking advantage of powerful built-in functionality.

The WordPress Mega Cheat Sheet (Make a Website Hub) View →
WordPress Cheat Sheet (Virtual Blend) View →
WordPress Cheat Sheet for developers (Start Blogging Online) View →
WordPress Developer Super Cheat Sheet (WPMU DEV) View →
WordPress Function Reference (WordPress Codex) View →
WordPress Functions Cheat sheet: The Quick & Handy Guide for Developers (TemplateToaster) View →
WordPress Action Listing ( View →
WordPress Filter Listing ( View →
WordPress Hook Listing ( View →
Supercharge WordPress Theme Development (Speckyboy) View →

WordPress Plugin Development

Whether you want to add functionality to your own site or share it with the world, building a WordPress plugin is a great way to get it done.

Beginner’s Guide To WordPress Plugin Development (Hongkiat) View →
How to Build a WordPress Plugin (Scotch) View →
How To Create A WordPress Plugin (Elegant Themes) View →
Plugin API (WordPress Codex) View →
The WordPress Plugin Boilerplate (Devin Vinson) View →
WordPress Plugin Boilerplate Generator ( View →
WordPress Plugin Development for Beginners (SitePoint) View →
WordPress Plugin Development – Best Practices (WooNinjas) View →
WordPress Plugin Development from Scratch (1stWebDesigner) View →
Writing a Plugin (WordPress Codex) View →

Advanced WordPress

Below are guides to topics that go beyond traditional themes and plugins.


How to Use the WordPress REST API (WPMU DEV) View →
Introducing the WP REST API (Envato Tuts+) View →
REST API Handbook (WordPress Developer Resources) View →
WordPress Rest API Basics (Kinsta) View →
WordPress REST API: The Next Generation CMS Feature (Toptal) View →


Hardening WordPress (WordPress Codex) View →
10 Plugins to Secure Your WordPress Website (Speckyboy) View →
10 Free WordPress Backup Solutions (Speckyboy) View →
Sucuri WordPress Security (Sucuri) View →
Wordfence Blog (Wordfence) View →
WordPress Security in a Few Easy Steps (Yoast) View →
WordPress Security: The Ultimate Guide (WPMU DEV) View →


An In-depth Guide to Using WordPress SEO by Yoast (TORQUE) View
How to Promote Your WordPress Website (DevriX) View
Guide to Content Marketing in WordPress (CreativeMinds) View →
The Definitive Guide to Higher Rankings for WordPress Sites (Yoast) View →
Ultimate WordPress SEO Guide for Beginners (Step by Step) (WPBeginner) View →

The Community that Spreads Knowledge

Not only does WordPress feature many subject areas worth studying, there are also tons of free resources out there to help. What’s remarkable here is that, while the official documentation is an outstanding reference, a dedicated community has created even more opportunities to learn. They have written tutorials and guides that are easy to follow and many will even take follow-up questions. The sharing of knowledge is one of the tenants of the community at large.

Take advantage of the resources above to hone your skills or learn a new one. And, if there is something we’re missing, let us know!

The post 40 Cheatsheets & Reference Guides for WordPress appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine