One place for hosting & domains

      User

      The Ultimate Guide to WordPress User Roles


      WordPress is a powerful, flexible Content Management System (CMS) that can be an excellent solution for collaboration. However, to make the most of the CMS, it’s important to understand how to navigate and leverage its user roles and permissions features.

      WordPress user roles let you assign certain levels of access to people who are registered to your website. This can help you manage and control what tasks are possible and can ultimately help strengthen your site’s security and performance.

      In this post, we’ll explain what WordPress user roles and permissions are. Then, we’ll provide you with advice for assigning them and cover some helpful troubleshooting tips and useful plugins to help you manage your users. Let’s get started!

      An Introduction to WordPress User Roles and Permissions (And Why They’re Important)

      WordPress user roles and permissions are two different but interdependent concepts. User roles determine what a user can and can’t do on your WordPress site, based on their user type. These limitations are generalized for anyone who carries a certain user role status.

      Permissions, on the other hand, are more individualized. You can create custom permissions for specific users, and control exactly what they are allowed to do on your site. Moreover, you can give different users distinct permissions depending on their role.

      With this double-layered system, you can ensure that each user only sees and accesses the features that are appropriate for them. Furthermore, you can create custom roles with unique capabilities, which is a great way to provide additional functionality for advanced users or clients who need certain abilities not available in the default roles.

      Both user roles and permissions are set by the Administrator, which is typically the WordPress site owner. By default, there are six different user roles: Super Admin, Administrator, Editor, Author, Contributor, and Subscriber. Each role has its own set of capabilities, which we’ll discuss in more detail below.

      User roles and permissions play an important role in ensuring that your WordPress website is secure and runs smoothly. By managing these settings, you can control who has access to what areas of your site, and what they can do there.

      If someone has too many privileges, they can end up publishing low-quality content or changing settings that impact the functionality or appearance of your site. The good news is that when you implement user roles and capabilities, you can have peace of mind knowing that only trusted parties have full admin access.

      An Overview of the Default User Roles in WordPress

      Now that you know a bit about the importance of user roles, let’s take a closer look at the six default user roles you can choose from when managing your WordPress website. Keep in mind that as an Administrator, you have the ability to create new user roles and assign them to specific users on your site. You can also manage permissions for existing user roles.

      Super Admin

      The Super Admin is the highest level of user on a WordPress site. This user has complete control over the site, including the ability to add and delete users, install and activate plugins, manage themes, and more. Super Admins are typically only found on multisite installations of WordPress.

      Super Admins can manage every setting and feature for each site within a multi-site network. They can add and delete other Administrators, create new sites, and control content across each site.

      Administrator

      Administrators have complete control over a single WordPress site. They can add and delete users, install and activate plugins, manage themes, etc. Usually, they are the site owners or main authors:

       

      WordPress Dashboard

      This powerful role has complete access to content, features, and site settings. They can update the CMS as well as plugins and themes. The Admin is also responsible for assigning user roles and capabilities to other registered users. Ideally, you should only have one Administrator per website.

      Editor

      Editors can manage and publish posts and pages, as well as moderate comments. They can also schedule content and edit categories. However, they cannot install or activate plugins, or manage themes:

      WordPress Dashboard

      In a nutshell, an editor can modify content created by themselves and other users with a lower status, such as Authors and Contributors. They can’t change content for users with permissions higher than theirs, such as an Administrator. Typically, this role is reserved for content managers or similar titles.

      Author

      As you may have guessed, authors can write and publish their own posts and pages. They can also delete their own posts.  However, they cannot publish, edit, or delete anyone else’s posts. Additionally, authors cannot add or delete users, install or activate plugins, or manage themes:

      WordPress Dashboard

      Unlike Contributors, Authors have access to the WordPress Media Library. While they can edit reader comments, they can only do so on their own posts.

      Contributor

      WordPress Contributors can write and submit their own posts for review by an Administrator or Editor. Once a post is published, they cannot edit it. Furthermore, contributors cannot add or delete users, install or activate plugins, or manage themes.

      Contributors are usually roles assigned to freelance writers or guest bloggers. This role is also commonly used for new hires whose content needs editing or reviewing before it can be published on the site.

      Once submitted for review, only the Editor or Administrator can publish their posts. Contributors cannot access the Media Library.

      Subscriber

      Subscribers can manage their own profiles and read posts and pages on a WordPress site. They cannot write or publish their own posts or pages, nor can they add or delete users, install or activate plugins, or manage themes:

      WordPress User Profile Personal Options screen

      Subscribers have the fewest permissions and capabilities of all the WordPress roles. It is the default user role set for new registrations.

      There are a few additional user role options available on some WordPress sites. For example, if you’re running a WooCommerce site, Shop Managers have similar capabilities to Administrators, but with some added features specifically for managing WooCommerce stores. For instance, they can add and delete products, manage orders, and more.

      How to Manage User Roles in WordPress 

      Now that you have a better sense of what each user role can do, let’s get into how to manage them. Below, you’ll find instructions for how to add, delete, and update users and user roles in WordPress.

      1. Creating and Deleting Users in WordPress

      Before you assign a user role in WordPress, you first need to have a user to attach it to. To add a new user in WordPress, you can navigate to Users > Add New, then fill in the information. This will include details such as username, email, and password:

      WordPress add new User

      Note that, by default, the Role is automatically set to Subscriber. When you’re done, you can click on the Add New User button at the bottom of the screen.

      Alternatively, you can create a new user through your database. To do this, you can navigate to phpMyAdmin from your cPanel dashboard (or whichever system your host uses), then select your WordPress database.

      Next, locate the wp_users table (name may vary depending on your database prefix):

      phpMyAdmin user database

      Once you click on the users table, you can select the Insert tab:

      phpMyAdmin user database

      On this screen, you can enter the following credentials:

      • user_login: The username you want to assign the user.
      • user_pass: The password for the user’s account; you can select MD5 in the Function drop-down.
      • user_email: The email address you want to use.
      • user_registered: The date and time for when the user will be registered.
      • user_status: You can set this value to “0”.

      When you’re done filling out the details, you can click on the Go button at the bottom of the screen. Next, navigate back to your WordPress database, then select the wp_usermeta table, followed by the Insert tab:

      phpMyAdmin user database

      You can insert the following details in the form:

      • unmeta_id: This is autogenerated, so you can leave it blank.
      • User_id: The id of the user you created.
      • Meta_key: You can set this as “wp_capabilities”.
      • meta_value: Add this as “a:1:{s:13:”administrator”;b:1;}”

      Finally, you can add another row. Then, input the following information:

      • Unmeta_id: You can leave this blank.
      • User_id: The id of the user you created.
      • Meta_key: You can make this “wp_user_level”.
      • Meta_value: You can put this as “10”.

      When you’re finished, you can click on the Go button to save your changes.

      To find a full list of your users, you can go to Users > All Users from your admin interface:

      WordPress Users screen

      To delete a user from your WordPress dashboard, you can hover your mouse over the name of the user, then click on the Delete link. That’s it!

      You can delete a user from your WordPress database as well. To do so, log into phpMyAdmin, then navigate to the wp_users table:

      phpMyAdmin user database

      Next to each user, you’ll find an Edit, Copy, and Delete option. Simply select Delete to remove the user.

      Skip the line and get tips right in your inbox

      Click below to sign up for more how-to’s and tutorials just like this one, delivered to your inbox.

      marketing tips

      2. Adding a User Role 

      There are a few ways to create a new user role in WordPress. The easiest way is to go through the admin interface. As you may have noticed in the last section, you can assign a user role at the time of creating a new user.

      To assign or update a role to an existing user, you can navigate to User from your WordPress dashboard, then select the Edit link under the user name:

      WordPress User Editor

      At the bottom of the screen, you can select an option from the Role drop-down menu:

      WordPress select User Role Administrator

      When you’re done, you can simply select the Add New User or Update User button at the bottom of the screen.

      Another way you can add a new user role in WordPress is by manually editing your code. For instance, you can add a custom user role, such as Moderator, with the add_role() function.

      To do so, you can add the following code to your theme’s functions.php file:

      add_role( 'new_user_role', __( 'Moderator' ), array( 'read' => true, 'edit_posts' => true, 'delete_posts' => true ) );

      When you’re done, be sure to update the file to save your changes. It’s as simple as that!

      3. Deleting a User Role in WordPress

      If you want to delete a user role in WordPress so that it is no longer an option, you can do so by editing your theme’s files. Keep in mind that modifying theme files can be risky, so it’s best to create a backup of your site before you continue on.

      To get started, go to Appearance > Theme File Editor in your WordPress dashboard. Next, locate and open the Theme Functions file:

      WordPress Theme Editor

      In this file, you can add one (or all) of the following code snippets, depending on which user role(s) you want to remove:

      remove_role( 'subscriber' );
      remove_role( 'editor' );
      remove_role( 'contributor' );
      remove_role( 'author' );

      When you’re done, select the Update File to save your changes.

      4. Updating Existing User Roles and Permissions

      If you want to update an existing user’s permissions, you can select the Edit link from the User list. You can then scroll to the bottom of the screen and modify the role by selecting a new one from the User Role drop-down menu. Remember to save your changes.

      Another option is to use a plugin, such as User Role Editor:

      WordPress User Role editor plugin

      This free version of this tool lets you easily change user roles and capabilities. Once installed and activated on your site, you can browse to Users > User Role Editor:

      WordPress User Role Editor

      Next, you can select the checkboxes of the capabilities you want to allow the selected role to have. When you’re done, click on the Update button at the bottom of the screen to save your changes.

      The plugin also lets you add new roles or delete ones that you aren’t using. It even lets you assign capabilities on a per-user basis.

      Tips for Picking the Right User Roles and Permissions

      As a general rule of thumb, it’s a smart idea to set the user role as low as possible. In other words, you want to give users as few permissions as possible that won’t interfere with or impact their ability to do their assigned tasks.

      Selecting the roles for your users should be based on the level of access that’s necessary.There are also specific roles for certain use cases.

      For example, if you have a full-time writer for your WordPress website, you can assign them the Author role. They’ll be able to write, draft, and publish posts on your site, as well as access the Media Library. However, they won’t be able to access, edit, or delete other pages and posts. Therefore, if this is a necessary capability, you may want to assign them the Editor role.

      On the other hand, if you have a freelance writer or a new hire that you don’t want to give publishing privileges to, you can make them a Contributor. This will let them write pages and posts, but they won’t be able to publish them. They can only submit it to the Editor (or Admin) for review.

      Consider assigning the Contributor role to anyone that doesn’t work in-house. We also recommend having as few Administrators as possible. This can help safeguard your site and prevent errors.

      If you have a multi-site installation, it’s a good idea to have one Super Admin. That way, they can handle any security or site issues that arise on any of the sites without interference or confusion from other admins. However, you could assign a single Administrator or Editor for each of the sites within your multisite network.

      Troubleshooting WordPress User Role and Permission Issues

      WordPress user roles and permissions are relatively straightforward and easy to use. However, sometimes issues arise, which can make it difficult for users with certain roles or permissions to carry out their tasks properly.

      One of the most common is being locked out of your WordPress admin and encountering a page with the message “Sorry, you are not allowed to access this page”. This error can be frustrating because it can be challenging to nail down the cause of it.

      However, if you see this message it’s likely because there’s a permission setting that is preventing you from accessing a certain area for security purposes. If you’re an Administrator or should have access, there are a few potential solutions you can try out.

      If this issue occurred directly after a WordPress update, restore the previous version of your site. Next, you can try disabling all of your plugins and re-enabling them one-by-one. You can also try activating a default WordPress theme. These steps can help you narrow down the source of the notification.

      Alternatively, you can check to ensure that you have the necessary Administrator privileges. To do this, navigate to phpMyAdmin then to the wp_users table.

      Next, locate your username and make a note of your ID. Browse to the wp_usermeta table and locate your metauser ID:

      phpMyAdmin user database

      Under the Metavalue column, it should read as the following:

      A:1:{s:13:"administrator";s:1:"1";}

      If there is something else in this field, we recommend editing it to replace it with the above. Simply save your changes when you’re done.

      Useful WordPress User Role and Permissions Plugins

      At this point, you likely understand the various settings and options you have for changing user roles and permissions in WordPress. However, to make the process even easier, you might consider using a plugin.

      We already discussed the User Role Editor plugin, but there are a handful of additional options to choose from. Below, we’ll take a look at some of the most popular ones and explain what you can use them for.

      Members

      Members is a plugin that lets you manage the permissions of registered users:

      MemberPress

      It’s beginner-friendly, boasting an intuitive interface that is easy to navigate. You can use it to create new roles and add permissions to each one. You can also clone user roles and customize the permissions for blog content.

      PublishPress Capabilities

      PublishPress Capabilities is another useful tool that can help you gain more control over your user roles:

      PublishPress

      It lets you add new roles, clone existing ones, and add individual permissions for each role. You can also backup, migrate, and restore the permissions. It can be used for single websites or on multisite networks. The plugin also integrates seamlessly with WooCommerce, which is helpful for store and product management.

      WPFront User Role Editor

      WPFront User Role Editor is a popular plugin you can use for managing user roles in WordPress:

      WPFront

      You can use it to create, delete, and modify user permissions. You can add new names for roles and clone existing ones. It also lets you assign multiple roles to users.

      Take Control of User Role Management on Your WordPress Site

      If you’re looking to manage WordPress user roles and permissions, it’s important to understand the different capabilities associated with each role. With this information, you can better manage your site and ensure that users have the appropriate level of access to your content and features.

      Whether you’re managing a simple blog or creating a complex website with multiple authors, user permissions are an important part of WordPress. With the right set of permissions in place, you can ensure that your site remains secure and runs smoothly.

      Are you interested in learning about more ways you can make managing your WordPress site as simple as possible? Check out our Managed WordPress Hosting solutions to learn about DreamPress!

      Do More with DreamPress

      DreamPress’ automatic updates, caching, and strong security defenses take server management off your hands so you can focus on content creation.

      Managed WordPress Hosting - DreamPress



      Source link

      How To Create User Interactions with Events in Vue


      The author selected Open Sourcing Mental Illness to receive a donation as part of the Write for DOnations program.

      Introduction

      In Vue.js development, a client’s web browser reads HTML and JavaScript and renders web pages based off of the instructions that the developer writes for it. But the web page or application not only needs to process data; it also needs to process user interactions. To do this, developers use events in JavaScript that execute code when the user interacts with HTML elements.

      An event can capture any user interaction with a user interface button or a physical keyboard or mouse. In JavaScript, you would create event listeners that wait for that event to occur and then execute a block of code. In Vue.js, you are not required to listen for an event; that is done automatically with the v-on: directive.

      In this tutorial, you will use events in Vue to create an application of airport codes. When the user selects an airport code, the app will add that airport to a “favorites” collection. By following along with this project, you will learn what events are, how to use Vue’s built-in events, and how to create your own custom events.

      Prerequisites

      To complete this tutorial, you will need:

      Step 1 — Setting Up the Project

      The first step in this tutorial will be to set up a demo project with some data to display in the view. This will include an array of JavaScript objects that contain airport data and a Vue component to iterate over and render the data.

      First, generate a project using Vue CLI:

      • vue create favorite-airports

      This will create a project named favorite-airports. This tutorial will use Vue 3, so when prompted, select the option Default (Vue 3) ([Vue 3] babel, eslint):

      Output

      Vue CLI v4.5.6 ? Please pick a preset: Default ([Vue 2] babel, eslint) ❯ Default (Vue 3) ([Vue 3] babel, eslint) Manually select features

      Once you have created the project, make a directory to hold all of your local data for this project. First, make the new project folder your working directory:

      Next, make a data directory in the src directory:

      In your text editor of choice, open a file called src/data/airports.js. Add the following data to the file:

      favorite-airports/src/data/airports.js

      export default [
        {
          name: 'Cincinnati/Northern Kentucky International Airport',
          abbreviation: 'CVG',
          city: 'Hebron',
          state: 'KY',
        },
        {
          name: 'Seattle-Tacoma International Airport',
          abbreviation: 'SEA',
          city: 'Seattle',
          state: 'WA',
        },
        {
          name: 'Minneapolis-Saint Paul International Airport',
          abbreviation: 'MSP',
          city: 'Bloomington',
          state: 'MN',
        },
        {
          name: 'Louis Armstrong New Orleans International Airport',
          abbreviation: 'MSY',
          city: 'New Orleans',
          state: 'LA',
        },
        {
          name: `Chicago O'hare International Airport`,
          abbreviation: 'ORD',
          city: 'Chicago',
          state: 'IL',
        },
        {
          name: `Miami International Airport`,
          abbreviation: 'MIA',
          city: 'Miami',
          state: 'FL',
        }
      ]
      

      This data is an array of objects consisting of a few airports in the United States. Next, you are going to iterate through this data to generate cards consisting of the name, abbreviation, city, and state properties. When the user clicks on a card, the app will emit an event up to the parent, which will add that airport to a collection of data that will represent your favorite airports.

      Save and close the airport.js file.

      To render the data, create a single-file component (SFC) with the name src/components/AirportCard.vue and open it in your text editor. This component will contain all of the styles and logic for the airport card.

      Add the following contents to the file:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      
      <script>
      export default {
        props: {
          airport: {
            type: Object,
            required: true
          }
        }
      }
      </script>
      
      <style scoped>
      .airport {
        border: 3px solid;
        border-radius: .5rem;
        padding: 1rem;
      }
      
      .airport p:first-child {
        font-weight: bold;
        font-size: 2.5rem;
        margin: 1rem 0;
      }
      
      .airport p:last-child {
        font-style: italic;
        font-size: .8rem;
      }
      </style>
      

      This component contains a prop, which in Vue.js is a way to pass data down from a parent component to a child component. The template section then renders this data. For more on single-file components, check out the How To Create Reusable Blocks of Code with Vue Single-File Components tutorial.

      You may notice that there is some CSS included in the code snippet. In the AirportCard.vue component, the wrapper <div> contains the class of airport. This CSS adds some styling to the generated HTML by adding borders to give each airport the appearance of a card. :first-child and :last-child are pseudo-selectors that apply different styling to the first and last p tags in the HTML inside of the div with the class of airport.

      Save the file and exit from your text editor.

      Next, modify the existing App.vue component to iterate through the airports.js data and render a series of AirportCards.vue components. Open src/App.vue in your text editor and replace the contents with the following highlighted code:

      favorite-airports/src/App.vue

      <template>
        <div class="wrapper">
          <div v-for="airport in airports" :key="airport.abbreviation">
            <airport-card :airport="airport" />
          </div>
        </div>
      </template>
      
      <script>
      import { ref } from 'vue'
      import allAirports from '@/data/airports.js'
      import AirportCard from '@/components/AirportCard.vue'
      
      export default {
        components: {
          AirportCard
        },
        setup() {
          const airports = ref(allAirports)
          return { airports }
        }
      }
      </script>
      
      <style>
      #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
      
      .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 1rem;
        max-width: 960px;
        margin: 0 auto;
      }
      </style>
      

      This imports the data and the SFC, then uses the v-for directive to iterate over the data, creating an airport card for each object in the airport.js array. It also adds additional CSS targeted to the wrapper class, which uses CSS grid to manage the layout of the cards.

      Save and exit the file. With the project now set up, run a local development server with the following command:

      This will start a server on your localhost, usually on port :8080. Open your web browser of choice and visit localhost:8080 to find the following:

      A view of the airport data rendered on cards, with the airport abbreviation, full name, and location rendered in black, sans-serif font.

      Now that you have your sample project set up, you’ll next explore built-in events using the v-on directive. When this event is fired, an alert pop-up box will appear with the airport code of the airport associated with that event.

      Step 2 — Listening for Events With the v-on Directive

      As stated earlier, events are a way to execute functions when the user interacts with HTML elements in the DOM (Document Object Model). When writing vanilla JavaScript, to execute a function on an event, you may write something called an event listener. An event listener is a function that waits for that interaction to occur, then executes some code. With Vue, however, you can use the v-on directive for this purpose. A directive is a piece of re-useable code that a developer can use in order to manipulate the DOM. The v-on directive is provided by Vue.js out of the box.

      In this step, you will create a function in your application that runs when a user clicks on a card. Open the src/components/AirportCard.vue component in your text editor of choice.

      Create a function that alerts the user of the airport that they clicked on by adding the following highlighted code:

      favorite-airports/src/components/AirportCard.vue

      ...
      <script>
      export default {
        props: {
          airport: {
            type: Object,
            required: true
          }
        },
        setup() {
          function selectAirport(airport) {
            alert(`You clicked on ${airport.abbreviation}. It's located in ${airport.city}, ${airport.state}.`)
          }
      
          return { selectAirport }
        }
      }
      </script>
      ...
      

      In Vue.js 3, reactive functions need to be defined and exported in the setup component method. This tells Vue that it can execute the selectAirport function in the <template>.

      With the function defined, you’ll now attach it to an event on an HTML element. As stated before, you can use the v-on directive and attach an event with the name of click; this is an event provided by Vue.js. In the AirportCard.vue component, add the v-on directive to the wrapper <div>:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport" v-on:click="selectAirport(airport)">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      ...
      

      Once you have added this code, save and exit the file.

      Now, when you click on a card, an alert will pop-up with the message provided. If you click on CVG for example, you will find the following:

      Vue site with alert pop-up that reads "localhost:8080 says You clicked on CVG. It's located in Hebron, KY."

      The click event is not the only event that is provided to you out-of-the-box by Vue.js. In fact, you can use v-on any native JavaScript event, like:

      • keyup
      • mouseover
      • focus
      • mouseenter
      • change

      Next, you will change this v-on:click listener to mouseover to illustrate how Vue.js listens for events. mouseover is an event that fires whenever a mouse cursor moves over an HTML element.

      Open up src/components/AirportCard.vue again and update your file with the following highlighted code:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport" @mouseover="selectAirport(airport)">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      

      As shown here, Vue also has shorthand syntax for v-on: events. To use the shorthand syntax, you replaced v-on with @. Save and exit the file.

      Now when you visit localhost:8080 and hover over a card, that function will execute and display a native alert.

      This functionality is good for testing purposes, but may be undesired since it displays the alert every time a user hovers over it. A better experience might be to only display it the first time a user hovers over that card. In vanilla JavaScript, you may track the amount of times a user hovers over a card, then prevent further executions. Vue.js has event modifiers that you can leverage to accomplish the same thing with less code.

      In the next section, you are going to explore event modifiers and use them for a better user experience.

      Step 3 — Using Event and Key Modifiers

      In the previous section, you executed a function on the click and mouseover events. You also learned about the Vue.js shorthand for v-on events. Now you will expand on this further by attaching a modifier to this mouseover event so your function executes only once.

      Vue.js provides a number of event modifiers for you. Some of these include:

      • .stop: stops event propagation
      • .prevent: prevents the HTML element’s default behavior
      • .capture: handles an event targeting an inner element before the selected element
      • .self: only triggers the handler if event.target is the element itself
      • .once: only executes the function once
      • .passive: enables the element’s default behavior to happen immediately instead of waiting for the event, which can be used for optimizing performance for scroll on mobile devices

      In this case, you’ll use the .once modifier. In your text editor, open the AirportCard.vue component and add the modifier to the existing mouseover event:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport" @mouseover.once="selectAirport(airport)">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      

      Save the file. Visit your application in the browser and you’ll find that the event only fires once on the first mouseover event.

      Next, you’ll continue exploring modifiers by using key modifiers. These key modifiers are associated with keystroke events, such as keyup. For this next part, imagine that you want to make this clicking action a little more explicit. One way you can do that is by adding a key modifier to the @click event on the .airport <div> in your template.

      To do that, change the @mouseover to @click and add the .shift modifier:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport" @click.shift="selectAirport(airport)">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      

      Save the changes and open the application in your browser. If you click on a card without holding the SHIFT key, the alert does nothing. Now, try holding down the SHIFT key when clicking on a card. Your function will now execute, and you will receive an alert.

      In this section, you learned about Vue’s built-in events and the modifiers associated with those events. You can get a lot done with these built-in events, but there will be times when you’ll need to have a custom event. In the next section, you’re going to use custom events to emit an action up to a parent so that it will execute a function.

      Step 4 — Creating Custom Events

      When developing applications in Vue.js, there will be times when you need to pass data up to a parent component via a custom event. Props are read-only data that are passed down to a child from the parent, but a custom action via an $emit is the opposite of that. To create the most reusable components, it’s best to think of these as functions. You pass data down through props (arguments), and emit values back up to the parent (a return value).

      To emit an event from the child component to the parent, you use the $emit function. Before implementing this, this tutorial will guide you through an example to demonstrate how this works.

      The $emit function accepts two arguments: the action name (a string), and the value to pass up to the parent. In the following example, when the user clicks on the button, you are sending the value CVG to the parent component under the action favoriteAirport:

      ChildComponent.vue

      <template>
        <button @click="$emit('favoriteAirport', 'CVG')">A button</button>
      </template>
      

      In the parent component, you would use the v-on directive and listen for the favoriteAirport event. When this custom event is fired, the code will do something with the value:

      ParentComponent.vue

      <template>
        <child-component @favoriteAirport="favoriteAirport = $event" />
      </template>
      
      <script>
      import { ref } from 'vue'
      export default {
        setup() {
          const favoriteAirport = ref('')
      
          return { favoriteAirport }
        }
      }
      </script>
      

      The value of the event will be $event. In this case, $event is actually CVG, which you then store in a reactive data property called favoriteAirport.

      Now that you know what a custom event looks like, you will put it into practice by implementing this custom event into your application.

      Open the AirportCards.vue component in your text editor. In the @click event, remove the reference to the function and replace it with $emit("favoriteAirport", airport). Remember, the first arugment is the name of the event and the second is the value that you are emitting:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport" @click="$emit('favoriteAirport', airport)">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      ...
      

      Save the file. Now, when the user clicks on the airport card, a custom event will fire and pass up that airport object.

      Next, open src/App.vue to add some HTML to the template. You will show the favorite airports list after the six cards that are already present:

      favorite-airports/src/App.vue

      <template>
        <div class="wrapper">
          <div v-for="airport in airports" :key="airport.abbreviation">
            <airport-card :airport="airport" />
          </div>
          <h1 v-if="favoriteAirports.length">Favorite Airports</h1>
          <div v-for="airport in favoriteAirports" :key="airport.abbreviation">
            <airport-card :airport="airport" />
         </div>
        </div>
      </template>
      
      <script>
      import { ref } from 'vue'
      import allAirports from '@/data/airports.js'
      import AirportCard from '@/components/AirportCard.vue'
      
      export default {
        components: {
          AirportCard
        },
        setup() {
          const airports = ref(allAirports)
          const favoriteAirports = ref([])
      
          return { airports, favoriteAirports }
        }
      }
      </script>
      ...
      

      In this code snippet, you are creating a reactive data property called favoriteAirports, which is an empty array. In the <template>, you iterate through the empty array to render the <airport-card /> components, much like you did in an earlier step.

      Now you need to add the v-on event for your custom event:

      favorite-airports/src/App.vue

      <template>
        <div class="wrapper">
          <div v-for="airport in airports" :key="airport.abbreviation">
            <airport-card :airport="airport" @favoriteAirport="favoriteAirports.push($event)" />
          </div>
          <h1 v-if="favoriteAirports.length">Favorite Airports</h1>
          <div v-for="airport in favoriteAirports" :key="airport.abbreviation">
            <airport-card :airport="airport" />
         </div>
        </div>
      </template>
      ...
      

      In the @favoriteAiport custom event, you used the JavaScript push() method to add the airport from the child ($event) to the favoriteAirports reactive data property.

      Open you browser and navigate to your project at localhost:8080. When you click on one of the airport cards, that card will appear under Favorite Airports.

      Vue airport app with a list of favorite airports that includes the CVG airport card.

      In this section, you learned about custom events, what they are, and how to use them. A custom event is a way to pass data up to a parent component through the $emit function provided by Vue. Once that data has been emitted, you can further manipulate it in the parent component, like adding it to an array.

      Conclusion

      In this tutorial, you learned how Vue.js listens for a number of built-in events, such as click and mouseover. In addition to that, you tried out event and key modifiers, small pieces of code that you appended to your event to provide additional functionality. With this, you set up your app to execute the function once with the .once modifier and to only fire when holding down the SHIFT key using the .shift modifier.

      Vue provides an efficient way to listen for events that lets you focus on manipulating data over manually setting up event listeners. In addition to that, Vue allows you to think of components as functions: They accept data props and can return a value with $emit.

      To learn more about Vue components, it is recommended to read through the Vue documentation. For more tutorials on Vue, check out the How To Develop Websites with Vue.js series page.



      Source link

      What Is User Experience (And How Can You Use It to Build a Site That Suits Your Audience)?


      What a time to be alive!

      Beginners with no coding experience can now build a website with minimal effort and expense. Even better, the options are limitless: You’ve got an entire arsenal of colors, fonts, images, and buttons at your disposal. But with so many design elements to play with, it can be tempting to go a bit wild.

      “A sprinkle of animation here! A dash of cheetah print there!”

      But, as is often the case with things that glitter, it’s easy to go overboard — especially if your creativity is reducing the functionality of your site.

      Whether you want to sell a product or share some blog posts, you’re not really building the website for you. It’s your site’s visitors that need to be happy with the design and user interface. That’s where User Experience (UX) comes into play. Keeping a strong focus on UX while building your site should pay off in higher conversions and lower bounce rates.

      In this article, I’ll give you a crash course in UX and explain what a UX designer does. Then we’ll go over some tips on recognizing good UX design when you encounter it. Finally, I’ll show you how to use UX to create a better website for your audience. Feel free to jump ahead to the section that’s most beneficial to you!

      Ready to talk UX strategy? Let’s get started!

      An Introduction to User Experience (UX) and Why It Matters

      Simply put, User Experience (UX) is how interacting with technology makes a user feel. UX applies to any technology, from an app to a game console.

      When it comes to websites, UX design is about optimizing the interaction between the human user and the page. A site built with solid UX principles should leave the user feeling like they accomplished what they came to do without frustration.

      That may make you think of going all out with the website’s visual design. That might include flashy animations and gigantic image carousels. If you remember MySpace, you probably still have nightmares about animated glitter and MIDI versions of Blink-182 songs . . . yikes.

      A MySpace profile using lots of bright colors and glitter.

      But UX design has a lot less to do with how a site looks than how it’s used. To be effective, your website should be a complete experience — not just words and images on a page.

      Users will forget data, such as how much they paid for the products they ordered. However, the experience of ordering should be pleasant and effortless. That experience will stay with them, increasing the odds that they’ll buy from you time and again.

      If your site delivers a poor UX, you may see the opposite result. Users who become stressed out or angry when using your site will likely head to one of your competitors’ sites. They have many options and no reason to return to a website that’s difficult to use.

      If you’re still not convinced that UX matters to your website, here are a few key statistics:

      All of this serves to illustrate the importance of good UX design when building a website.

      The Role of the UX Designer

      UX is so vital there’s an entire profession dedicated to optimizing it. A UX designer’s day-to-day tasks will vary based on what kinds of projects they’re tackling. However, the goal is usually the same. The UX designer’s job is to optimize the user’s experience when interacting with digital technology while also keeping in mind the well-being of the business.

      To achieve this balancing act, the UX designer follows a process that results in multiple deliverables.

      Before any actual designing starts, there’s a lot of UX research to do. Therefore, the designer may first create one or more audience personas. This enables the designer to understand the user’s needs.

      Next, the UX designer may present a potential user flow diagram to help explore possible ways that a user may interact with the website. They can then translate that information into a prototype. Prototypes may be as basic as a wireframe, a rough blueprint for what a final web page could look like. The designer may also create a more visually-robust prototype or even one that can be interacted with.

      A basic wireframe for designing a website.
      A basic wireframe.

      The UX designer’s responsibilities don’t end with the final design. Once the site is launched, they may conduct usability testing or look into usage analytics to identify and fix potential problems.

      In other words, they’re involved with all stages of a website’s creation and launch.

      How to Recognize Good UX Design

      If you’re handling your own UX design, it’s your responsibility to advocate for your audience while ensuring that you’re still getting what you want from your site. To do that, the first step is to learn how to recognize robust UX design.

      With that in mind, let’s look at some examples of UX in the wild. There are four key elements you’ll want to pay close attention to.

      1. Navigation

      Poor navigational design can render any website useless. Moving through a site should be smooth and intuitive. The navigation menu should also be accessible no matter what device a visitor is using.

      Breadcrumb navigation is one way designers prevent users from getting lost, especially if a website has many pages.

      H-E-B’s website, using a navigation bar and breadcrumbs.

      It’s also important to pay attention to links. Web designers who employ strong UX make sure you can identify links when you see them. This often means underlining them and using a different text color. They’ll also use meaningful anchor text, so you know where the link is taking you before clicking on it.

      2. Content

      A significant part of successful UX is understanding how people interact with different parts of a website. For example, most people don’t read web page content normally. They scan it and then stop to read if they’ve found something interesting.

      Content is scannable if a user can quickly browse through a blog post or sales page and come away with a clear idea of what it’s communicating.

      Content made scannable using headings, short paragraphs, and a bulleted list.

      Keeping paragraphs short is one way to create scan-friendly content. Those paragraphs should be broken up frequently with headings, lists, and images. Designers may also make use of pull-quotes, bolded text, and similar elements.

      3. Animation

      Animation is an effective way to stand out from a sea of websites and grab a user’s attention. It adds an element of fun and can contribute to creating a memorable experience for the user.

      However, there’s a right and a wrong way to go about implementing it.

      Subtle animation can provide feedback while you wait for a transaction to complete. An animation can also loop endlessly while you struggle to focus on reading a product description. These approaches create two very different experiences. The overuse of animation can also affect UX on mobile devices.

      4. Responsiveness

      Optimizing a website for mobile users is a must. If you’re like most people, you usually use your phone to access the internet. If you come across a site that you have to struggle to use on your device, you’re likely to simply abandon it.

      Beyond choosing a responsive theme, you can take additional steps to ensure that your site works well on all screens. For example, you can run your website through Google’s Mobile-Friendly Test Tool.

      Sample results of Google’s Mobile-Friendly Test Tool.

      This tool will alert you to issues that are keeping your site from being mobile-friendly. You may find that a particular font is too difficult to read on a tiny screen, for instance, or that buttons are too small to tap easily.

      How to Use UX to Design a Site for Your Audience

      Now that you know what good UX is, how do you apply it to your site?

      You probably won’t be doing intensive market research or prototyping with high-fidelity wireframes. Still, putting on your UX designer hat can help you create a site that both you and your audience will love.

      First, it’s important to be clear about why you have a website and what you want it to do. For example, are you:

      Next, get to know your ideal user or potential customer. Creating a user persona will help you imagine how your target audience may interact with your website. This persona can be as simple as who the person is, what they want, and what keeps them from getting it. Crucially, you must identify what the user needs to be successful on your site.

      Remember that accessibility is an integral part of UX. You may have visitors who use assistive technology, so consider making accessibility a priority when building your site.

      You can also check out your competitors’ sites to see what’s working for them. Is the shopping cart icon always in the upper-right corner? Maybe yours should be, too. You can be creative without reinventing the wheel; users shouldn’t have to figure out how your site works to accomplish their goals.

      Sample results from Google’s PageSpeed Insights.

      Finally, website performance matters for UX. Slow pages will cause visitors to leave before the site has a chance to load. There are many ways to speed up your site, although your best bet is to start with quality hosting.

      Building a Better User Experience?

      Partner with DreamHost. We’ll make sure your website is fast, secure, and always up so your visitors trust you. Plans start at $2.59/mo.

      UX Resources

      At this point, you’ve likely figured out that UX design isn’t something you optimize in one shot. There’s a lot more to this field than we can cover in one article.

      UX Matters’ home page, which uses an infographic for navigation.

      Fortunately, there are many quality UX resources you can refer to as you continue to improve your website:

      • Awwwards is where you can find inspiration. Grab some coffee; you’ll probably be scrolling for a while.
      • UXmatters covers just about everything related to design. There’s content for everyone — from the seasoned UX strategist, UX researcher, UI designer, or graphic designer to brand-new UX enthusiasts.
      • UX Magazine publishes the latest news, timely insights, and UX research for anyone interested in improving their visitors’ digital experience.
      • Stack Overflow is the place for all your burning questions. It’s an open community of helpful, knowledgeable people.
      • Website and Digital Marketing Help is a Facebook group powered by DreamHost where website owners of all levels can share best practices and ideas.

      If you combine these resources with research and practice, you should find yourself implementing good user experience practices in no time.

      Design a Great User Experience

      You don’t need to be a professional UX designer to build a website your audience will love interacting with. All it takes is some understanding of what will make life easier for your visitors and a willingness to build a site that provides that experience.

      UX describes what the experience of interacting with your website is like for users. Optimizing your site’s UX means ensuring that it has clear navigation, creating content that’s easy to scan, testing it for responsiveness, and more. There’s a lot to learn, but there are also plenty of useful resources and knowledgeable designers who can help.

      After that, you’ll be ready to conquer the internet with your UX-optimized website! You can check some of the performance-related tasks off your list early with our high-quality shared website hosting plans.



      Source link