How to Choose a Template for Your Site on WordPress

WordPress is one of the most popular CMS today. It is easy to configure and use it for creating any website, but it was originally positioned as a platform for creating blogs. WordPress attracted to blogging a lot of people by the exuberance of the themes. But few beginners understand that not all templates are equally good, and to be honest, many of them are very dangerous.

How to Add Web Push Notification to Your WordPress Site

Have you noticed the web push notifications used on popular websites like Facebook? Recently one of our readers asked if it was possible to add web push notifications in WordPress. Ofcourse, it is. In this article, we will show you how to add web push notification to your WordPress site.

Adding web push notifications to a WordPress site

Why Add Web Push Notifications to Your WordPress Site?

Web push notifications are clickable messages displayed on top of user’s Desktop. They can be shown even when user’s browser is not open.

Web push notifications displayed on Desktop with Google Chrome, Firefox, and Safari web browsers

Aside from desktop, Web push notifications also work on mobile browsers.

Popular sites including Facebook, Pinterest, LinkedIn, and many others are already using web push notifications. It is proving to be more engaging than SMS, email marketing, and other social media. According to a survey, push notifications have a 50% open rate on mobile devices.

This means more engaged audience for your WordPress site and significant boost in your overall page views and returning visitors.

Having said that, let’s take a look at how to add web push notifications to a WordPress site.

Setting up Web Push Notifications in WordPress with OneSignal

OneSignal is a free service that allows you to add push notifications to any website, web, or mobile apps.

First thing you need to do is install and activate the OneSignal plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled OneSignal in your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

OneSignal WordPress plugin settings

The settings page is divided into Setup and Configuration tabs. The setup tab is actually detailed documentation on how to setup OneSignal push notifications in WordPress. It has the same steps that we will show you in this tutorial.

To setup OneSignal, you will need to add different API keys and application IDs into the plugin settings.

Let’s get started.

Step 1: Create Google Keys

First you need to visit Google Services Wizard website.

Creating Google services app

Simply provide a name for your app and add an Android package name. OneSignal does not use Android package name, but it is a required field.

Next, choose your country and region, then click on the ‘Choose and configure services’ button.

This will bring you to the next screen where you will be asked to select Google services you want to use with your app. You need to click on ‘Enable Google Cloud Messaging’ button.

Enable cloud messaging

You will now see your server API key and Sender ID.

Server API and Sender ID

You need to copy your Sender ID and paste it in WordPress plugin’s Configuration tab under Google Project Number field.

You also need to copy your Server API key and paste it in a text file on your computer. You will need this API key later in this tutorial.

Step 2: Setting up Chrome and Firefox Push Notifications

We will now setup push notifications on Chrome and Firefox. First you need to visit OneSignal website and create your free account.

Once you have created your account, you need to login and click on ‘Add a new app’ button.

Add new OneSignal app

You will be asked to enter a name for your app. You can use any name you want and then click on ‘Create’ button to continue.

App name

On the next page, you will be asked to select a platform to configure. You need to select ‘Website Push’ and then click on the next button to continue.

Website Push

After which you will be asked to select browser platform. You will see Google Chrome and Mozilla Firefox in one box and Safari in another box.

You need to click on Google Chrome and Mozilla Firefox box. We will show you how to setup Safari, later in this article.

Select browser platform

Click on the next button to continue.

In the next step, you will be asked to enter your WordPress site url, Google Server API key, and URL for your default notification icon image.

App settings

If your website does not support SSL/HTTPS, then you need to check the box next to ‘My site is not fully HTTPS’ option. You can also setup SSL on your website if you like, but it’s not required.

Google Chrome does not support web push notifications for non-ssl or http websites. OneSignal solves this problem by subscribing users to a subdomain on their own https domain.

Checking ‘My site is not fully HTTPS’ option will display HTTP fallback options. You will need to choose a subdomain for your app and enter Google Project Number or Sender ID you generated in the first step.

http fallback options

Click on the Save button to continue. Now you can exit this dialog box. You will be prompted with a notice that your setup isn’t complete yet and can be resumed later. Click Yes to close the dialog box.

Step 3: Getting OneSignal Keys

You now need to get OneSignal Keys for your website. From your app dashboard click on App Settings.

App Settings link

This will take you to your app settings page. You need to click on the Keys and IDs tab.

Keys and IDs

This will show your OneSignal App ID and Rest API Key.

App ID and Rest API Key

You need to copy and paste them in OneSignal WordPress plugin’s configuration tab on your site.

Step 4: Setting up Safari Web Push Notifications

Remember we skipped Safari web push notification settings. Now we will show you how to setup Safari web push notifications.

Login to your OneSignal account and go to your App Settings page. Scroll down to web platforms and click on the configure button next to Apple Safari.

Configure Apple Safari

This will bring up a dialog box where you will be asked to enter your site name and site url.

Safari web push notification settings

Then you need to check the box next to ‘I’d like to upload my own notification icons’ option.

You will now see an option to upload different icon sizes. These are square images, use Photoshop or any image editing program to create icons in the exact sizes.

Click on choose file buttons to upload all your icons.

Upload notification icons for Safari web push notification

Click on the Save button and then close the dialog box.

Refresh the App Settings page and scroll down to Web Platforms section. This time you will see ‘Web ID’ under Apple Safari.

Safari web ID

You need to copy this web ID and paste it in Configuration tab of OneSignal plugin on your site.

That’s all, you have successfully setup OneSignal web push notifications for your WordPress site.

Step 5: Testing Web Push Notifications on Your WordPress Site

By default, OneSignal plugin will add a subscription icon to your WordPress site. Visit your website in a supported browser and then click on the subscribe button.

Subscribe push notifications button

You will see the default ‘thank you for subscribing’ message.

Now login to OneSignal account. Click on your app name, and then on App Settings.

Scroll down to the web platforms section and click on the configure button next to Google Chrome and Firefox.

Configure web push notifications for Chrome and Firefox

You will see the platform configuration screen which you filled in earlier. Simply click on Save button and then click on Continue.

testing web push notifications

You will be asked to select target SDK. You need to select WordPress and then click on Next.

Select WordPress

Since you only have one subscriber at the moment your subscriber ID will be automatically filled.

Click on the next button, and you will reach the ‘Test Settings’ step.

Click on ‘Send Test Notification’ button.

Send test notification

One Signal will now send a web push notification.

The notifications appearance may differ depending on which browser you used to subscribe. When the notification appears on your computer screen you need to click on it.

Test notification

It will take you to confirmation screen, showing that you have successfully setup OneSignal web push notifications for your website.

Success message

Return back to the configure screen on OneSignal website and click on ‘Check Notification Status‘ button.

Check notification status

You will now see another success message which indicates that you have successfully added web push notifications to your WordPress site.

How to Send Web Push Notifications in WordPress with OneSignal

The OneSignal web push notifications plugin on your WordPress site will automatically send a notification to all subscribers when you publish a new post.

You can also manually send notifications from your OneSignal App Dashboard. Login to your OneSignal account and click on your app name.

From the menu on your left, click on the ‘New Message’ button.

Sending a new web push notification message

This will bring you to the new message screen. You can enter a title and some content for your notification.

Write your new push notification message in OneSignal

You can also click on the Options, Segment, Schedule/Send Later to further customize your web push notification.

For example, you can link it to a particular page on your site, send it to a particular segment of your users, or schedule it to be sent at a specific time.

We hope this article helped you add web push notification your WordPress site. You may also want to see our list of the best membership plugins for 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 Add Web Push Notification to Your WordPress Site appeared first on WPBeginner.

Nailing the Perfect Navigation for Your WordPress Site

It’s a funny thing. We often place a large emphasis on the creation of great content and on the development of an effective design to wrap around that content. But without as much effort or thought put into your website’s navigation, your visitors may never be able to enjoy all that your website has to offer.

A B2B Web Usability Report released last year uncovered some interesting facts in support of the importance of well-made website menus:

They asked: “When you get to an internal page on a vendor website from a referral site or search engine, how do you orient yourself?” Nearly 50% of those who responded to the survey said they use the main navigation. In addition, 36% said they expect the company’s logo to take them back to the home page.

They also asked: “Which website elements annoy you or cause you to leave a website?” A total of 37% of respondents claimed a poor design or navigation as a source of frustration.

That being said, menu design and planning doesn’t have to be difficult. But like with any other element of your website, it does require serious planning and special tools in place to pull off a well-executed menu. Here are just some of the questions you may need to ask yourself:

  • Where do you want the menu to be?
  • How many menus do you need?
  • Will there be a home button or do you trust visitors to know that the logo is the link?
  • Do you need a hamburger menu design?
  • Do you want a static menu to be visible at all times?
  • Which pages need to be on the top level of the navigation?
  • Do you need to use color in the menu?
  • What sort of animation should be applied to the menu?
  • How do you want to organize the pages?

As you can see, there is a lot to consider in terms of building out a menu and each one of those features are open to customization. As a developer, you’re responsible for making sure that whatever you choose aligns well with the rest of your website’s style, functionality, and purpose.

Think of menus as a visitor’s map or tour guide of your website. In the end, it won’t matter how great your website looks if visitors can’t figure out how to find the information that’s the most important to them.

Planning Your Menu: Start with the Basics

Site Map Builder

Website navigation needs to do exactly what the name implies: help visitors navigate through the site. Here are some tips to get your planning off to a good start:

  • Identification: Identify all of the different pages that will need to exist on the website.
  • Optimization: Using the keyword research you used in writing content for the website, apply those same guidelines and principles for naming your website’s pages. It’ll also be important to strike a balance between optimizing a page’s name for SEO with something simple and straight-to-the-point.
  • Visualization: Use a visual mapping tool to lay out the pages of your website. For smaller websites (less than ten pages and a singular menu bar), Excel or PowerPoint would work just fine for your purposes. For anything larger, consider using a free trial with Slickplan or Power Mapper.
  • Minimization: When planning the levels of navigation, it’s best to keep the amount of clicking visitors need to do to a minimum. Ideally, there should be no more than two or three levels of navigation within a single menu. If so, consider multiple menus instead.
  • Organization: Navigation needs to be logical, from top-to-bottom and left-to-right. Introduce who you are (About), what you do (services, products, etc.), what resources you offer (blog, white papers, free consultation, etc.), and your contact info (Contact). The pages of your website will of course be tailored to your specific business, but the basic logic remains the same. Educate, speak to your audience’s pain, demonstrate your expertise, and then offer a point of contact.
  • Location: Place your menu in an easy-to-find location. No one should have to hunt around to find the menu that is going to help them explore the rest of the site.
  • Omnipresence: Consider making a menu “sticky” so that as visitors scroll down through a long page, the menu is ever-present. And if you do make the menu sticky, make sure it shrinks in size so that, while always there, it doesn’t distract from the rest the content.
  • Truncation: If you’ve got a very large menu, consider instead forcing it inside a hamburger menu or mega menu, and save that prime real estate on your site for something else. Hamburger menus are easily recognizable these days since they’re the standard menu for mobile devices, so you shouldn’t have to worry about visitors not knowing where to go on their desktops to find it.
  • Consistency: Any design or stylistic touches you make to the website should align with what is done to the menu. Complimentary colors, animation, and website CTAs should all be inspiration used to create the look and movement of a menu.
  • Mobility: The menu, like anything else on websites, absolutely, positively needs to be mobile-friendly and responsive.

Setting up Your Menu: Consider the Options

As with everything else in WordPress, you’ve got options when it comes to setting up your website’s menus. We’re going to review each of these options and then provide you with some basic knowledge that you’ll need to make the most out of each.

Option 1: Theme Menu Setup

Many WordPress themes will include a Menus module for simple setup and customization of your website’s theme. If you want to start within your theme’s settings, here is what you’ll want to do:

In WordPress, go to the Appearance tab and click on “Customize.” This will take you to your theme’s customization settings and provide you with a live preview of any changes you make.

ThemeModule1-Theme_Sidebar
The Customize sidebar that appears to the left of your site’s live preview.

From Customize, you’ll then see a sidebar to the left of the live preview of your site. Click on the Menus tab. (Interestingly enough, you’ll see that WordPress has done a great job of setting up their own menus logically and with simple labels for easy navigation.)

ThemeModule2-Menus_menu
The options in the “Menus” menu in “Customize.”

You’ll have two options from the Menus tab. Start with Main Navigation since this will allow you to define the setup of your main menu.


The Main Navigation menu in “Menus”

From the Main Navigation tab, you can then add new pages, remove pre-defined defaults, rename navigation labels, and revise the hierarchy structure, all through drag-and-drop. At the bottom, you can also define where the main navigation should exist on the website.


The Menu Locations option in “Menus”

Click on the back arrow and then navigate to the Menu Locations tab. From here you’ll be able to define which menus will exist on different parts of your website. There are two important things to note here: 1) Your view and options will differ based on the theme you’re using. 2) If you’re planning on having more than one menu on your website, you’ll have to define those other menus through a different process before you can assign them a location. (Steps for that can be found below.)

Regardless of which of the setup options you pursue, the theme customization modules are an important tool to have when setting up the basics of a website. For information on WPMU DEV’s Upfront theme’s menu customization, check out this article.

24/7 SUPPORT

Expert Superhero WordPress Support

Our support crew is waiting for you to start the conversation. We’re spaced out over the globe so we can provide 24/7 support for all your WordPress needs. It’s like having a personal WordPress team!

LEARN MORE

Option 2: WordPress Menu Setup

Menus

If your theme doesn’t come with a menu customizer or you’re just in need of more control over how each of your menus will look and function, WordPress has a default menu setup tool for that.

Before you begin, make sure that any content or links you want to include in your navigation have been created.

Then go back to your WordPress menu. Navigate down to the Appearance tab and select Menus.

There will be two tabs on this page that you can work with: Edit Menus and Manage Locations. Your view will automatically default to the Edit Menus screen.

Under Edit Menus, you can see that the screen is broken up into two sections. Start with the left side.

Add_to_Menu

On the left is where you have the power to add different types of content from your website into your menus. Basic web pages, blog posts, custom links (like if you have a customer portal or white paper PDF), and blog categories or tags are the basic content types. Depending on other content you’ve enabled on your website-projects, testimonials, portfolios, social media, etc.-you’ll have the ability to add those as well.

When you’ve found something you want to add, click the checkbox next to it or define the element (if it’s a link), and then hit the “Add to Menu button.” You’ll see that the new element(s) has dropped down to the bottom of your menu on the right-hand side of the Menus page.

Once your new element is in the menu, you can revise the navigation label, placement, redirect location, or hierarchy by dragging and dropping them into place within the visual map or you can click each element open for further customizations.

When you’re done, scroll to the bottom and define where this menu will exist on your website.

Click “Save Menu” when you’re done.

Within this Menus page, you can also create new menus. So, if you want something different to appear in the footer, in a sidebar, as a secondary menu above or below the main navigation, or somewhere else, click on “create a new menu” and set it up from scratch.

The Manage Locations tab on this page will accomplish the same goal as step 8, though the purpose of this page is to give you universal control over all menus on your website. (They’ll need to be set up first, of course.)

Keep in mind that if you should create a new page or post on your website and you want it included in any of your menus, you’ll need to come back here to add it in.

For mega menu creation, the WordPress Menus tool is not going to be enough. You’ll need to use a mix of widgets and plugins in order to achieve this effect. (More on that below.)

Option 3: CSS Styling

For those of you who prefer to go the route of coding, you can use CSS styling to set up menus as well. For more information on that, read on.

Customizing Your Menu: Turn to Plugins

Plugins… where would we be without you? Sure, coding could help us achieve some additional functionality and stylization of our menus, but that’s not always so easy. That’s why we love to turn to plugins. If you’re considering a new idea, look, or animation for a menu, chances are good that a developer has created a plugin to help you make it a reality.

These plugins will take your WordPress menu design to the next level:

  • Menu Icons

    Menu Icons plugin

    Many websites these days are turning to icons for a clean and consistent visual experience throughout their site’s design. They provide websites with a simple way of breaking up a lot of text or presenting bulleted lists in a new, more interesting way. If you’ve used icon imagery on your website and want to maintain that visual flair in your navigation, this plugin will do just that.

    Interested in Menu Icons?

  • Page Specific Menu Items

    Page Specific Menu Items plugin

    Have you ever wished you could more easily assign customized navigation settings to different pages without having to create multiple (but similar) menus in order to achieve the effect? Well, this plugin will allow you to do that. Setup your menus as you normally would and then you’ll have an extra variable to define, granting you the ability to easily hide certain menu items from view on specific pages.

    Interested in Page Specific Menu Items?

  • WP Menu Cart

    WP Menu Cart plugin

    It’s important for e-commerce websites to clearly display their shopping carts in the top corner of the website. Thanks to e-retailers like Amazon, it’s where visitors immediately look for it. For developers who don’t want to code a shopping cart-related icon into the top of a site’s design, you can instead use this plugin for easy integration into the navigation menu.

    Interested in WP Menu Cart?

  • Widgetize Navigation Menu

    Widgetize Navigation Menu plugin

    Have you ever seen a website that has a mix of elements laid out in a clean, columned navigation and thought it looked great? Well, you can thank widgets for that. This plugin will help you add complexity to your website’s navigation while keeping everything neat and organized in one place.

    Interested in Widgetize Navigation Menu?

  • Max Mega Menu

    Max Mega Menu plugin

    Mega menus are exactly what they imply: very large menus that require the use of a whole host of tools (plugins, widgets, images, video, animation, and more) in order to achieve the desired effect. That desired effect is a menu that will appear once a visitor has hovered over or clicked on an element in the top navigation of a site. The big reveal usually comes as a drop-down menu full of images or videos, columns of pages, search functionality, and more.

    Interested in Max Mega Menu?

  • Responsive Menu

    responsive-menu

    Last but not least, you’re going to need something to help you create a responsive menu design. This plugin offers over 120 customizations to help you create that perfect menu design, color, and layout regardless of what type of device it’s viewed on.

    Interested in Responsive Menu?

Menus in the Wild

If you looked at this guide and thought, “Okay, that seems pretty straightforward,” take a look at what some other companies have done with their website menus. It’s pretty inspirational if you ask us!

Food Network

Food Network Menu

This is the perfect example of a well-structured, multi-element mega menu.

Waaark

Waark Menu

When you first arrive at this website, you see the hamburger menu icon in the top-right. Clicking that open then reveals a full-page menu that contains contact info, social media, and navigation links.

Racket

Racket Menu

The Racket website also makes use of the hamburger navigation, but theirs is on the top-left of the website. Once you click it open though, you’ll see what looks like a simple navigation bar drop down. Visit any of those pages and the navigation bar hides away in order to maintain focus on the content.

Brindisa Tapas Kitchens

Brindisa Menu

Restaurants are just one of those business types that are expected to have lots of cool imagery on their website. Brindisa, however, has taken that use of imagery to new heights with their vertically-aligned, icon-laden, pop-open sidebar.

Wrapping Up

There are definitely more ways you can take your menu designs to the next level-especially if you want them to match the fantastic websites you’ve designed the menus around. But this should act as a good primer for immersing yourself in the world of menus and making the most of their power on your next WordPress site.

7 Existential Threats Digital Agencies Face [White Paper]

Winter is coming. No, not that winter, but the dreary idea that our economy could be entering choppy waters. That is, the potential of a general slump hitting us all.

When times get tough, digital agencies are likely to be more affected than others. As agencies thrive to stay afloat and remain relevant, the recent closure of high-profile names has caused a sense of unease among the industry.

To learn about the top challenges agencies face, and how WordPress plays a key role in what’s becoming an increasingly challenging environment for agencies to thrive, read this white paper now:

7 EXISTENTIAL THREATS DIGITAL AGENCIES FACE (AND HOW WORDPRESS CAN HELP)

You’ll learn about some of the main dangers looming on the horizon, including:

  • How the agency model is open to disruption
  • Past trends that could repeat themselves
  • The evolving technology matrix agencies must learn
  • And more…

Read on to discover seven key threats agencies must navigate through to stay alive, along with why WordPress is a viable solution.

The post 7 Existential Threats Digital Agencies Face [White Paper] appeared first on WP Engine.

How To Create a Mobile App for Your News Curation Website

If you follow WP Mayor you may have come across our tutorial on how to create a news aggregation or news curation website with WordPress. This post proved to be a great hit with some of you even opting to create their own news site, just like we did with WP News Desk.

Following the creation of that site, we were looking at ways of how to take it one step further, which is when we were approached by the great folks at Mobiloud. They helped us to create a mobile app for WP News Desk that automatically adds new news stories just as they appear on the website.

WP Engine Has Big Plans For SXSW 2017

It’s a bit early to start discussing SXSW 2017, isn’t it? Hardly! They say there’s no rest for the wicked, yet neither is there for the world-renowned festival for music, film education and (oh yeah) tech.

This year, WP Engine has submitted to participate in not one, but five panels, which you can vote for in SXSW’s Panel Picker. Each panel features our best and brightest in tech.

Founder and CTO Jason Cohen has advice for entrepreneurs looking for investors. WP Engine CEO Heather Brunner wonders when web tech will catch up with ad tech. CMO Mary Ellen Dugan and Director of Agency Partnerships Ryan Ashby want to help you reinvent your agency pitch! And last, but not least, Crystal Hansen has some great ideas around building diverse product teams!

Check out each panel in greater detail using the links below-but make sure you have a Panel Picker account. You’ll need one to follow these links and to cast your votes!

WP Engine’s SXSW 2017 Panel Picker Lineup:

Ask Before You Need: Startups, Investing & You

In this talk, serial entrepreneur, WP Engine Founder and CTO Jason Cohen, along with other entrepreneurs and venture capitalists will share startup secrets to make attracting investors (and knowing when to go after them) simple.

Building Creative, Diligent, Diverse Product Teams

Research shows that “being around people who are different from us makes us more creative, more diligent and harder working” (Scientific American, Oct 2014) – essential traits for any high performing Product Team. You’ll leave this session ready to take action to recruit and hire more teammates to better represent gender equality in the workspace

Reinventing The Agency Pitch: Close More Work Less

This panel moderated by Ryan Ashby, Director of Agency Partnerships at WP Engine; Mary Ellen Dugan, CMO at WP Engine; Edelman EVP B2B Digital Joseph Kingsbury; and HUGE Inc. Group VP of Technology, Thomas Prommer, shares creative digital strategies/techniques used to convert more business while using fewer resources and time.

When Will Web Tech Catch Up To Ad Tech?

Despite all the technological efforts towards developing personalized ad strategies online, web technologies have yet to deliver on the targeted content consumers want. In this talk, WP Engine CEO Heather Brunner divulges how marketers and the tech community can help web tech catch up to consumers wants.

Winning Small Biz Strategies For The Digital Age

In this post-mobile era, learn the secrets from serial entrepreneur Jason Cohen on how every business, even small ones, can win online today.

Cast your vote now!

The post WP Engine Has Big Plans For SXSW 2017 appeared first on WP Engine.

Creating Beautiful Page Transitions on Your WordPress Site

Okay, so you’ve heard it before: humans have a shorter attention span than goldfish. If you think about it though, that’s not really a fair comparison to make.

 

Your pet goldfish probably only has a few interesting things to look at in your home. They might occasionally tune into whichever show or movie is playing on the TV, but otherwise, it’s just a bunch of furniture they have to stare at. Not too many distractions there, right? But for humans, it’s a different story.

 

Whether it’s in the world around us or in the digital space, there are distractions galore-and they’re all competing for our attention. Right now. That’s why there is so much emphasis placed on designing websites effectively. Using colors and imagery to elicit the right emotions and reactions. Guiding visitors through your story with simple, easy-to-find navigation. Placing straightforward calls-to-action exactly where and when visitors are feeling motivated to do something.

 

One of the points we try to drive home as much as possible is the importance of your site’s speed. If you can’t provide your visitors with that (near-)instant gratification of accessing your site and opening new pages within it, all of that other hard work was for naught.

 

Back in 2000, you could’ve gotten away with a website load time of maybe 12 seconds (the average human attention span at the time). But in 2016, you’re dealing with a much shorter timeframe to hook your “fish.” Right now, we’re looking at an average attention span of about 8 seconds. However, marketing studies would suggest that you really only have 3 seconds to gain someone’s attention before they jump ship on your website.

 

So what do you do?

 

If you force visitors to sit and wait for a page to load, you’re going to lose them-them and the conversions you were hoping to make with your awesomely designed website. Don’t give them a chance to get distracted. If you’ve got a website that will unavoidably take some time to load or you just want to give the jump from page-to-page a little more pep, add some animation to your page transitions.

 

For Smoother Website Travels

 

There are a number of ways to increase your website’s speed. You could use a plugin (like Hummingbird) to minify and compress as much of your website’s files as possible. That’s always a great place to start. CDNs are also a must if you’re hoping to decrease any lag time caused by visitors from around the globe trying to access your site’s distant server files.

 

Regardless of the tools you use to keep your site’s speed in check, it’s a good idea to consider giving your page transitions a bit more life.

 

Let’s say someone clicks on a link from your homepage and there is a sudden flash of white (no more than half a second) as the new page loads. That might take some people aback, leaving them to wonder why the page didn’t load right away. Perhaps it’s not even a matter of how quickly that next page loads. Let’s say instead you have a single page website and your visitors are bored with the static banner strips littered through the page. Flat design is great in terms of keeping things simple, but it’s not always great in keeping your visitors’ attention.

 

This is where animation in page transitions comes in.

 

Why Use Page Transitions?

 

Animation, in general, is a great way to add more life to web design. However, it should be used strategically and should align well with the overall style of the website. This applies to basic elemental animation (like forcing an icon to spin when someone hovers over it) as well as in the transitioning from page-to-page.

 

Here are some reasons why animation works especially well for page transitions:

 
 
    • Movement: The right type and right speed helps keep visitors engage in what’s on the screen as your site loads in the background.
 
    • Entertainment: If your animation allows for some form of interactivity, you can keep visitors actively interacting with your site while they wait for a page to load.
 
    • Flow: As you tell your website’s story, you need to have smooth transitions from one page to the next. Rather than rely on a simple page change, use a transitional element that will keep the story moving seamlessly along.
 
    • Suspense: There are certain transitions that aim to create a sort of “pop” or surprise as visitors encounter them-these work especially well for single page websites that reveal different “pages” via a scroll.
 
    • Modernization: Websites with the right kind of animation appear more modern than their static counterparts, whether it’s through the use of video, parallax scrolling, and, in this case, page transitions.
 
 

If you want to minimize any gaps in UX caused by a slower-loading site or just want to give visitors something fun to do as they move through your website, page-to-page animation is a great way to hold their engagement and increase your conversion rate. Do keep in mind though that execution is of the utmost importance.

 

Here are some tips to help keep you on track when approaching page transitions:

 
 
    1. A website littered with animations (for page transitions or otherwise) may be just as distracting and unprofessional looking as an ill-designed website.
 
    1. Try to keep the amount of animation on your website to a minimum so that when it does occur between pages, it has the intended effect of holding your visitors’ attention.
 
    1. Page transitions should not be jarring. They should aid in the smooth transition from one part of your website to the next and be relevant to the overall story.
 
    1. It should be clear that an animation is guiding visitors from one part of the website to another. There should be no confusion as to what they’re looking at or what to do next, and there should always be a sense of continuity between two pages.
 
    1. Transition animations don’t have to always be over-the-top. If you want to use a bunny hopping across the page to indicate loading progress, go for it.
 
    1. Keep your page transitions consistent in style. So if you’ve used a storybook page flip between two pages, you should maintain that throughout the site.
 
    1. Ensure that the speed of the animation makes sense for what you want it to accomplish. Slower transitions tend to be less shocking and more effective at controlling visitors’ focus. Fast animations, however, tend to shake visitors out of one state (almost like a wake-up call) and bring them into another related state.
 
 

The moral of the story?

 

Choose your animations carefully. If not used properly, they can do as much harm to your website’s reception and business’s reputation as a poor design choice. Visitors shouldn’t see a page transition and realize you’re hiding a slow-loading page behind it nor should they be confused by why it’s there in the first place. The transition should enhance the experience of traveling through your website and motivate visitors to wait and see what else you have to offer.

 

Consider the Page Transition Possibilities

 

Before we discuss how to go about building page transitions in WordPress, let’s take a moment to review the possibilities.

 

The Spinner

 

For the most basic of page transitions, you can rely on a singular spinning or rotating object in the middle of the page to let visitors know something is coming next.

 
 
Domani is a digital agency specializing in strategy, marketing, and technology.
Domani is a digital agency specializing in strategy, marketing, and technology.
 
 

Smooth Slider

 

For websites with a minimalistic design, simpler page transitions will work best. A smooth slide will provide you with a simple, yet clean transition from one page to the next while adding an interesting touch of movement to your site.

 
 
This fun websites tests how well you know tools.
This fun websites tests how well you know tools.
 
 

Page Flip

 

How do you envision your pages moving? If you’re building an author’s website, you may want the page transitions to mimic the flip of a book’s page.

 

The online portfolio of freelancer Mary Smith features a book flip at the bottom of the page. Check it out.

 

3D Objects

 

Perhaps your website serves a creative, yet more structured artist type (like a designer or developer). A 3D page rotation would probably work better.

 

Smoke Screen

 

If your website leans more toward the dramatic, you could add a smoke screen or other nature-type transitional element (whatever relates best to your site’s overall style).

 
 
Train Robber is a virtual reality agency based in Los Angeles and New York.
Train Robber is a virtual reality agency based in Los Angeles and New York.
 
 

Reconstruction

 

Most commonly seen on parallax scrolling websites, “page” transitions can be as simple as the deconstruction and reconstruction of the central piece of the website. With these sorts of transitions, you’ll always want to make sure the reconstruction takes place on the same part of the screen so visitors don’t have to work to find it.

 
 
In Pieces is an interactive exhibition turned study into 30 of the world's most interesting but unfortunately endangered species.
In Pieces is an interactive exhibition turned study into 30 of the world’s most interesting but unfortunately endangered species.
 
 

Elemental Fade

 

Page fades tend to be more subtle transitions in general. However, for some extra pop, you can take the idea of reconstruction above and use it to fade in the individual elements of the next page.

 

Check out Loflo Records for a beautiful example of page fades.

 
 
Loflo Records, the online home of singer-songwriter Jane McNearly, is a beautiful example of an elemental fade.
Loflo Records, the online home of singer-songwriter Jane McNearly, is a beautiful example of an elemental fade.
 
 

The Basics

 

The examples above all demonstrate how page transitions work really well within the right setting and for the right company.

 
 
    • The style matches the overall vibe of the website.
 
    • The animation is simple and easy to focus on.
 
    • The movement contributes to a seamless and logical flow from one page to the next (usually from top to bottom or left to right).
 
 

If you’re just getting started with page transitions, consider taking a look at this collection of page transition styles. They’re all pretty basic in nature, but they do also provide enough variety in movement, direction, and style (especially the rotations) so that your website’s animation can stand out from others.

 

Remember: your goal here is to provide visitors with a seamless flow from one page to the next; not to overwhelm them with crazy-outlandish page transition effects. Sometimes, simpler styling is going to be the most effective choice for your website.

 

Now, if you’re ready, let’s talk how you create these transitions.

 

 

THEMES

 

Stunning drag ‘n’ drop themes with Upfront

 

Drag, scale, position, customize and see every edit you make to your website – in real-time – with our Upfront theme framework for WordPress. Choose from our collection of starter themes and get started customizing your site right away. You know that design you’ve got in your head? You can build it with Upfront.

 
 

FIND OUT MORE

 
 
 

 

 

Animate Your Pages with These Tools

 

When it comes to website animation, you can really only pull these effects off using CSS, HTML, and jQuery. If you’re not comfortable making updates to scripts or coding, never fear. WordPress, of course, does have some tools available to help. It’s important to note, however, that while there are WordPress plugins to help you animate page transitions, most are limited in what their capabilities are. So if you are more accustomed to relying on WordPress plugins and themes to help you build websites, just make sure to set your expectations accordingly.

 

Regardless of your skill level in WordPress or coding, here are the tools we’d recommend for bringing some extra life to your page transitions.

 
  • Animate It!

    Animate It plugin

    In terms of plugins, this is the one you’ll want to start with. This covers all your bases in terms of page transitions, scroll animation effects, as well as hover animation. You can also control delays, duration, mobile disabling, animation type, and more-and you can take care of this all from an easy-to use interface within WordPress pages, posts, and widgets.

     

    Interested in Animate It!?

  • Page Transition

    Page Transition plugin

    If you want to start with something a little simpler and that will only give you control over page transitions (instead of all other animation effects), this is a great plugin to use. Whether you want your pages to fade, rotate, flip, or zoom, this plugin simplifies the process of setting your transitional effects up while ensuring you create a consistent page transition experience across the site.

     

    Interested in Page Transition?

  • Page scroll to id

    Page scroll to id plugin

    For smooth scrolling animation-vertical, horizontal, or something a little more complicated than that-this plugin will help you set that up. This also has a pretty comprehensive setup screen where you can make adjustments to the animation speed, scroll styling, target destination or page position, and more.

     

    This plugin may require some editing of CSS in order to get it working properly, so only use this plugin if you’re comfortable making the needed changes.

     

    Interested in Page scroll to id?

  • CSS Animations Library & Tutorial

    CSS Page Transitions

    CSS animations are the new Flash, but they’re much more lightweight and work across most browser types. When it comes to adding CSS animations to your WordPress website, there are a few ways you can accomplish this.

     
     
      • You can edit your theme’s stylesheet accordingly. In order to do this though, you’ll need to know which properties to define and where to add them to your stylesheet. If you’re going to go this route, you should just use the CSS Animate! Plugin instead as it will accomplish the same thing.
     
      • You can download and use this CSS3 library of animations. You can test each of the effects out right on that page and decide which page transition effect you want before applying it to your website.
     
      • Remember those basic page transition samples from earlier? Well, Tympanus has also created a fairly simple tutorial you can use for creating these effects on your website along with source files for each of those animations.
     
     

    Interested in CSS Animations Library & Tutorial?

  • jQuery Plugins and Tutorials

    jQuery plugins

    If you prefer using jQuery and are looking for some more advanced page transitions, this is the route you will want to take. The Nino Dezign website has put together this extremely useful list of JavaScript plugins and tutorials that you can use to attain some beautiful transition stylings.

     

    Interested in jQuery Plugins and Tutorials?

 

Wrapping Up

 

Have you ever heard of the User Experience Honeycomb before? Basically, it lays out the seven UX qualities you’ll always want associated with your website:

 
 
    • Valuable
 
    • Usable
 
    • Findable
 
    • Credible
 
    • Accessible
 
    • Desirable
 
    • Useful
 
 

Those characteristics are all very simple ideas, but they make a lot of sense in the context of web design and what we know works well with our online audience. They don’t want fancy tricks and they don’t want to be bogged down by unnecessary excess. This is true for your websites as a whole and it’s especially true for page transitions.

 

Your goal in establishing page transitions should be to further strengthen the UX and keep visitors engaged with each new page load. If you can keep them interested in your site with some eye-catching movements when they jump from page-to-page, you can cut down on that urge many of them may have to flee and give them a reason to be interested in and trust your well-built brand even more.

 

On-Page SEO Tips And Tricks [Upcoming Webinar]

SEO is both art and science. Blended together, a creative and systematic approach is the first step to maximizing business results in site traffic and conversions. To help you improve your SEO strategy, there are some additional SEO tips and tricks we’d like to reveal.

 

Join WP Engine and Raven Tools on Wednesday, August 24 at 11 a.m. CDT for a live webinar to learn some essential SEO tips, tricks, and hacks you can implement into your daily workflow to perfect your SEO plan. Reserve your spot here:

 

WEBINAR: ON-PAGE SEO TIPS AND TRICKS

 

Jon Henshaw of Raven Tools and David Vogelpohl of WP Engine will discuss their expertise on the following SEO tips:

 
 
    • Preserving SEO value during a migration or redesign
 
    • How page speed affects SEO
 
    • WordPress SEO hacks
 
    • The best WordPress SEO plugins
 
    • How to monitor for issues and optimization opportunities
 
 

Packed with an abundance of SEO knowledge, this is surely a webinar you don’t want to miss! Sign up now to save your seat. By signing up you’ll also be emailed the recorded link and slides once the live session ends. There will also be a 15 minute Q&A at the end for any specific questions you might have about SEO.

 

Hope to see you there!

 

The post On-Page SEO Tips And Tricks [Upcoming Webinar] appeared first on WP Engine.

How to Add a Reading Progress Bar in WordPress Posts

Have you noticed how some popular sites show a reading progress bar indicator at the top of their articles? This little bar shows users how much more of the article is left to scroll and encourages them to continue reading. In this article, we will show you how to add a reading progress bar in WordPress posts.

 

Reading progress bar indicator in WordPress

 

Why and When You Should Add Reading Progress Bar in WordPress

 

Users spend only a couple of seconds on a webpage before deciding whether to stay or leave. Keeping users engaged becomes little more challenging if you publish long form articles, as they require users to scroll down.

 

Some site owners add inline related posts, others use videos or image galleries to keep users on the page.

 

A reading progress bar adds a little user-interface enhancement that encourages users to scroll down. It also motivates users to finish the article they are reading.

 

Many popular websites like The Daily Beast, use the reading progress indicators to engage their readers. However, you also need to make sure that the reading progress indicator is subtle and does not ruin user experience on your site.

 

Having said that, let’s see how you can easily add a reading progress indicator for your WordPress posts.

 

Adding Reading Progress Bar in WordPress Posts

 

First thing you need to do is install and activate the Worth The Read plugin. For more details, see our step by step guide on how to install a WordPress plugin.

 

Upon activation, you need to visit Settings » Worth The Read page to setup your progress bar indicator.

 

Setting up your reading progress indicator

 

First you need to enable the reading progress bar by checking the ‘Enable’ option. After that, you need to select where you want to display the progress bar.

 

The default option is on the top which is used by most sites. You can change it to display the progress bar on right, left, or bottom of the page.

 

The plugin allows you to choose the foreground and background colors of the progress bar to match your WordPress theme. The background color is used to fill the empty progress bar and the foreground color will be used to show progress as a user scrolls down.

 

You can also include comments in the total length of progress bar by checking the include comments option. If you are including comments, then you can also choose a different background color for comments progress area.

 

Last option on the page allows you to use a transparent background for the progress bar. Checking this option will override background color options and only the foreground color will be displayed as users scroll down an article.

 

Don’t forget to click on the save changes button to store your settings.

 

That’s all, you can now visit any single post on your website to see the progress bar in action.

 

Reading progress bar

 

The reading progress bar indicator only works on single posts. Currently it does not support pages and custom post types.

 

We hope this article helped you add a reading progress bar indicator in WordPress. You may also want to see our list of 10 WordPress plugins that will quickly help you get more traffic.

 

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 Add a Reading Progress Bar in WordPress Posts appeared first on WPBeginner.