44 Inspiring WordPress Tutorials: Our Greatest Hits

Whether you’re just getting started with WordPress and need to learn the basics or you’ve been developing websites for years, we’ve got just the right article to help you out. Since 2008, we’ve published more than 4,800 WordPress articles on the WPMU DEV Blog, amassing a truckload of articles on everything from themes and plugins […]

How to Add Screencasts to WordPress

Want to offer quality educational content via WordPress? One great way to do that is to add screencasts to WordPress. Whether you need to educate your clients or your website visitors, screencasts are an excellent choice.

In this post, I’ll discuss some of the benefits of screencasts and how you can add them to both the WordPress front-end and dashboard. Then, at the end, I’ll give you a few quality tools you can use to record your own screencasts.

Screencasts Benefit You and Viewers

Add screencasts to WordPress

In a simple sense, screencasts are just a recording of a computer screen’s output with audio added on top. If you’re recording your own screencast, the video will be an exact copy of everything that you see on your screen (or a selected portion of your screen). While it’s possible to add editing effects later on, the base video is always your computer screen.

Screencasts are perfect for educational use. They allow you to place every action you describe in its exact context. For example, instead of saying “Go to Plugins and click Add New” you can actually show people how to do that, all while narrating the audio. This gives your viewers both a visual and auditory method of learning.

And the best part is that if viewers ever get confused or need clarification, they can pause or rewind to their heart’s content.

But screencasts don’t just benefit your viewers – they also benefit you, the creator. While screencasts certainly take time to create, it’s still easier to create a detailed screencast than it is to type up a detailed 1,500-word post. Basically, you can create the same educational value with less time invested.

And if you’re creating screencasts for clients, screencasts can save you a ton of time by eliminating the need to provide support for every tiny issue.

How Can You Use Screencasts With WordPress?

Obviously, the main use of screencasts is to embed them on your front-end site. You can use them in regular posts or pages, as part of a knowledge base (like the Divi screenshot above), or privately as course content for a membership site.

But that’s only part of the puzzle. If you’re a developer creating themes/plugins or WordPress sites for clients, you can also embed screencasts in the WordPress dashboard to help onboard users and give in-dashboard support.

How to Add Screencasts to WordPress Front-End

Here’s the thing about embedding screencasts on the front-end:

You really don’t need anything special. While you can host your own screencasts and use the native WordPress video player, I think it’s easiest to just upload your screencasts to YouTube or Vimeo and embed them in your content that way. Just make sure to use the proper privacy settings if you don’t want your screencasts to be 100% public.

I searched around for a plugin to help accomplish this and I couldn’t find a single one. And you know what? I don’t think you need one.

But if you do want more control over how your screencasts behave, you might want to go with a plugin like YouTube Embed Plus.

YouTube Embed Plus Features

YouTube Embed Plus

First off, YouTube Embed Plus lets you create responsive galleries and playlists, which is great if you need to embed a whole series of screencasts.

It also lets you enable autoplay, which, used judiciously, is a good way to push visitors to actually watch your screencasts.

And if you go with the Pro version of the plugin, you’ll also get access to lazy loading, video SEO features, and more.

Again, this plugin is not necessary to embed screencasts on the WordPress front-end, but it does give you more options for embedding YouTube-hosted screencasts.

Price: Free (Pro version costs $19) | More Information

How to Embed Screencast Tutorials in the WordPress Dashboard

While it’s totally possible to embed your own screencast videos in the WordPress dashboard, you don’t need to if you just want to include general WordPress tutorials. That’s because some helpful companies have already created WordPress tutorial videos that you can embed directly via a plugin.

I’ll first cover embedding general WordPress video tutorials, then I’ll give you some options for embedding your own screencasts.

WP101

WP101

WP101 is a popular tutorial series for WordPress. While their main project is consumer-facing, they also offer a developer focused plugin that lets developers easily embed WP101’s tutorial videos directly in clients’ dashboards.

Literally, all you need to do is install the plugin, add your WP101 API key, and select which tutorial videos you want to display.

WP101 has a general 20-video “Getting Started” series as well as a detailed series on Yoast SEO.

And the best part is the tutorial videos are white-labeled, so your clients will never know you outsourced your tutorial videos. Cool, right?

The plugin also lets you add your own videos to the list of tutorial videos. So if you want to outsource the general tutorials but still create a few specific tutorials of your own, you can do that.

Price: Starts at $99/yr | More Information

Sidekick

Sidekick

Sidekick isn’t a pure screencast solution, but it accomplishes the same end result, so that’s why I’m still including it on this list.

It adds over 100 interactive walkthroughs to you or your clients’ dashboards. What do I mean by interactive walkthrough? Sidekick will actually show where to click on the real dashboard interface, along with audio narration. It’s kind of like tooltip onboarding on steroids.

If you go with the Pro version, you’ll get access to additional walkthroughs as well as analytics.

Price: Free. Pro version costs $5/month per site | More Information

Custom Dashboard Widgets

General WordPress tutorial videos won’t work for all situations. If you need to explain your own plugin/theme/feature, you’ll obviously need to create and embed your own screencasts.

To do that, you can use a custom dashboard widget to embed the video. In Tom’s article on customizing the WordPress dashboard for clients, he shows you exactly how you can add a custom dashboard widget. All you need to do is add a simple function call.

Wrapping Up

Whether you’re trying to help your clients or your visitors, adding screencasts to WordPress is a great way to include educational content. If you want to include screencasts on your front-end site, you should go with an external service like YouTube or Vimeo and embed them that way.

If you want to include helpful tutorials for your clients, you can either go with something pre-made like WP101 and Sidekick, or you can create your own screencasts and embed them with custom dashboard widgets.

Have you used screencasts on your WordPress site? If so, what’s your personal strategy?

Article thumbnail image by RedlineVector / shutterstock.com 

The post How to Add Screencasts to WordPress appeared first on Elegant Themes Blog.

Designing Demos for Your WordPress Themes and Plugins: 5 Things to Keep in Mind

As a WordPress developer, it’s important that you set your themes and plugins up for success from the very start. Spending some time creating a high-quality demo is a great way to give potential customers a sneak-peak of your product’s functionality.

If you have a high-quality product, a demo is one of the best sales tools available. It helps to get prospective customers interested in your solution and addresses any concerns they may have. Ultimately, a good demo of your WordPress theme or plugin can make your product stand above the crowd.

In this post, we’ll cover five things to keep in mind when building and promoting your demo. By the time you’re done, you’ll be in a much better position to design incredible demos and get them in front of users. Let’s get right to it!

1. A Demo Builder Could Speed Up the Demo Creation Process

You’ve already developed a WordPress theme or plugin, but do you know how to create a live demo for it? You could go the traditional route: create a multisite network on your existing site, install your theme or plugin to it, and hard-code the rest of the management-related functionality into it. Or, you could go for a demo builder.

WPDemo homepage
WPDemo is one demo builder option for WordPress users.

A demo builder enables developers to create demos and offer trial back end accounts for your products. While product feature descriptions can be helpful, it’s also nice to be able to offer customers an interactive, hands-on experience. A demo will let prospects test drive your product so they can see how it will benefit them.

As an added bonus, with demo builders, you won’t have to worry about implementing best practices from scratch. Most builders, including MotoPress and WPDemo, automatically integrate almost everything you need to deliver an incredible product user experience.

MotoPress

MotoPress’ Demo Builder for WordPress Products is one of the best demo builders out there. It provides back-end accounts for users to trial your WordPress products. You can configure the lifetime of a personal demo and the plugin will automatically clean up expired accounts, so your server doesn’t overload. You can also set restrictions based on user roles, build email lists using MailChimp, promote products through the responsive toolbar, manage individual sandboxes, and view statistics.

Getting started with a demo builder does require a little bit of technical expertise. That said, the process itself is pretty straightforward. You’ll need to create a multisite network, install and configure the demo builder, and add a registration form. Once you launch your product demo, you can send prospects their account credentials via email.

2. Building Anticipation Before Launching Could Net You More Sales

Letting your email subscribers know about your demo launch ahead of time is a great way to create hype. Even though the user hasn’t had a chance to try out your product yet, building anticipation at this stage could ultimately lead to an increase in sales.

Writing an enticing and utterly irresistible email campaign that creates buzz for the demo site can get you a ton of support. It can also give you a chance to establish yourself as a knowledgeable developer. A key element of a good pre-demo email is letting the user know how the demo will benefit them and highlight what they’re missing.

Aside from a traditional email campaign, there are plenty of other ways to generate buzz before launching your demo site. You could run a contest, create a social campaign, or give snippets of information over a period of time. Most important of all, keep your prospects in suspense!

3. You Could Benefit From Restricting Your User’s Demo Access

The purpose of a demo is to give potential customers a sneak peek of your product – not unlimited access to it. Typically, developers create separate test sites (called sandboxes) for each user. This makes it easier for the user to test out all the features and settings the theme or plugin has to offer, without having to worry about interference from other users.

The downside to creating sandboxes is that your server starts to fill up quickly. Setting restrictions on the number of sandboxes per registration and the lifetime of each one will help you save a ton of server space. Additionally, enabling automated cleanup of expired sandboxes ensures that your server won’t overload with inactive test sites. Most demo builders come with lifetime expiration and automated cleanup functionality right out of the box.

Deciding the sandboxes’ lifetime can be difficult. Some businesses offer a short 3–7 day trial period, whereas others let their customers try out their products for up to 30 days. This depends entirely on you and the product you’re offering. What you should keep in mind, however, is that your trial period should be long enough for the customer to experience the actual value your product delivers.

4. Your Signup Page Must Encourage Conversions

Crafting the perfect signup page could be your gateway to success. This page is where you connect with visitors who are genuinely interested in your product, and it offers the perfect opportunity to build high-quality email lists. A well-designed signup page can help you grow your business much faster.

Unless your focus is to obtain lots of user data, the signup process should be as simple as possible. Prospects who are interested in trying out your product want to get their hands on it without the hassle of long forms. Making things straightforward will not only increase your chances of converting them into loyal customers but also improve their overall experience with your business.

Of course, signup pages are not one-size-fits-all solutions. That said, here are some tips that might help you arrive at a high-converting design faster:

Remember that you can continue to refine your signup page, even after your demo has launched, and the best way to achieve a killer design is to A/B test it regularly.

5. A Call to Action is Crucial for Your Demo Site

Attracting visitors to your site is important, but converting them to customers is even more so. Calls to Action (CTAs) are elements (often clickable buttons) that prompt your visitors to act immediately. A CTA button gets your visitors started on their conversion journey and is an extremely important component to consider. The statistics speak for themselves:

CTA buttons can be tricky when you actually set out to add them to your site. The ultimate goal is to design buttons that are simple yet effective. Here’s a list of essential elements that will improve your CTA button’s design:

Once you’ve created the perfect CTA, you also need to get prospects to click it. This is where button placement comes in. 47% of websites have a clear CTA button that takes users three seconds or less to see.

Conclusion

Allowing potential customers to test drive your WordPress themes and plugins can be incredibly beneficial to both you and them. Prospects get hands-on experience with your product and you get a better chance of converting them to loyal customers. Having well-designed demos puts you in a better position to boost conversion rates and see your products generate revenue.

Let’s quickly recap what you need to keep in mind when designing demos for your WordPress products:

  1. A demo builder can speed up the demo creation process.
  2. Building anticipation before launching could net you more sales.
  3. You might benefit from restricting your user’s demo access.
  4. Your signup page must encourage conversions.
  5. A CTA is crucial for your demo site.

Do you have any questions about designing demos for your WordPress themes and plugins? Let us know in the comments section below!

Image credit: StruffelProductions.

John Hughes

John is a blogging addict, WordPress fanatic, and a staff writer for WordCandy.

The post Designing Demos for Your WordPress Themes and Plugins: 5 Things to Keep in Mind appeared first on Torque.

Flexbox Froggy


Flexbox Froggy →

If, like me, you’ve known about CSS flexbox for a long time but don’t really know it, I have something that might help. It’s not the solution — I just finished it and I don’t feel like a flexbox-master — but it is REALLY REALLY good as a learning tool. I now would consider reaching for flexbox when before I wouldn’t have thought to.

Flexbox, for those who don’t know, is a solution to a lot of annoying CSS problems. It’s not without it’s own rough edges. Mainly that you have to think a little harder about the difference between up and down and left and right. But getting past that unlocks a whole lot of awesome power.

Now to what we’re here for: Flexbox Froggy is a little 24-level game that leads you through the basics of flexbox by placing frogs on lily pads. It sounds simple enough, and is. Well, until the last level. Which is pretty hard and I nearly cheated to find the solution. But I didn’t and I eventually got it working right. But it’s a great primer on working with flexbox, and probably a fun and pretty-looking little skill test if you are already a master.

How to Build a Responsive Fixed Sidebar with Smooth Scrolling Anchor Links Using Divi’s Specialty Section

Sidebars aren’t so popular anymore. In many cases, they end up being more distracting than they are helpful. But sometimes a sidebar makes perfect sense, especially when dealing with lengthy content. That is why I set out to create a sidebar that makes a lot of sense.

Today I’m showing you how to use the specialty section in the Divi Page Builder to create a responsive fixed (or sticky) sidebar menu with smooth scrolling anchor links (or jump links). Because the sidebar remains visible and the anchor links smoothly scroll to different sections on the page, the sidebar stays married to the content, making it a helpful UX feature. Like a document outline, this combination makes your web page content more accessible and easier to read. It is a refreshing solution for those long scrolling pages.

Check it out!

Today’s Before & After: A Responsive Fixed Sidebar with Smooth Scrolling Anchor Links Using Divi’s Specialty Section

Here is a gif showing the page without the fixed sidebar modification. I added the anchor links to the menu to capture the inconvenience of having to scroll back up to the top of the page to view the menu.

before-img-600

Below is an example of the fixed sidebar and anchor link combination. The end result is an elegant solution with seamless transitions throughout your content.

fixed-sidebar-600

The Concept & Inspiration

google-doc-img

Earlier this year, Google added a helpful document outline tool for Google Docs that allows you to easily deploy a fixed sidebar with a clickable outline that jumps to the different headings on your document. I love it because it helps me find information a lot faster. I thought it would be cool to bring this same feature to your website.

Preparing the Design Elements

In this example, I’m setting up a mock tutorial to display the functionality of the sidebar. Even though this functionality will be used with your own content, here is what I’m using today:

For the page content, I’m using dummy lorem ipsum text with custom CSS added to the headers. I’m also adding five royalty-free images from https://unsplash.com sized 700px by 400px.

For the sidebar, I’m adding a mock logo/image sized 200px by 200px to fit at the top of the sidebar. The rest of the sidebar is styled using CSS.

Implementing the Design with Divi

To add these modifications to your own website, follow the instructions below step-by-step.

Adding the Specialty Section

First, add a specialty section to your page by choosing the “Specialty Section” option from the in-line “add new section” controls.

specialty-sec

Select the one-third / two-thirds layout.

specialty-section-edited

Adding the Rows & Content

To create a section for the page title, click the insert column link inside the existing row module.

insertcolumn

Insert a fullwidth row.

add-row

Next, add a text module to the row module. Inside the text module under general settings, locate the content section and make sure the text tab is selected. Add the following html for the title (make sure to use an h1 tag).

<h1>Cooking <span style="color: #406ac2;font-weight: 600">101</span></h1>

add-h1

(Optional: You can label the module by scrolling down to the Admin Label field and entering “page title”. I suggest doing this for all future modules as well.)

Click Save & Exit.

Now add the first of five additional row modules for the rest of your content sections. Each of the five rows will have…

  • a text module (for the subtitle)
  • an image module (for the image)
  • another text module (for the rest of the text).

To add another row module click “Add Row” beneath the existing row module. Select the full width row option, insert a text module, and add the text “Section 1” in the content section (give it an h2 tag since this is a subtitle).

step1

To add a dark gray background to the text module, select the Advanced Design Settings tab and change the background color to the hex color #333333.

gray-bg

Give it a border radius by selecting the Custom CSS tab and adding the following css to the Main Element code editor box:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

border-radius

Click Save & Exit.

Inside the same row module add an image module under the text module. In the image module settings, upload your image (I’m using one from unsplash.com).

upload

Click Save & Exit.

Next add another text module under the image module. Also add some text to the content box. A few paragraphs of lorem ipsum text will do the trick for now.

Click Save & Exit.

Now your layout should look like this:

after-step1

For the next 4 rows, speed up the process by duplicating the row you just made. Simply click the duplicate icon on the row module four times.

duplicate

Your layout should look like this:

after-duplicate

(Note: After duplicating the rows, you will eventually need to go back and change the subtitles, images, and content for each as you see fit.)

Now that you have all five content rows completed, you need to go back to each one and add your anchor link target ID. This target ID is how your sidebar links will know where to scroll to on the page.

For each of the five row modules, go to the Row Module settings and add a unique CSS ID under the Custom CSS tab (make sure it is CSS ID and not CSS Class). Since I’m going to be linking to different steps for a tutorial, I’ll just name them “step-1”, “step-2”, “step-3”, “step-4”, and “step-5”. So, the first content row should have a CSS ID of “step-1”.

step-1-edited

The next row will have a CSS ID of “step 2” and so on.

Creating the Custom Menu

Now that you have your rows and css id’s setup, you can start creating a custom menu for your anchor links. Start by going to Appearance → Menus in the WordPress admin. Click “create a new menu” and name it “fixed sidebar menu”.

create-new-menu

After that, click to toggle open Custom Links and add your anchor link. You want this first one to link to the first row you created with the unique class id “step-1”. To do this, type “#step-1” in the URL text box. Also give the link a name in the Link Text field. Then click the “Add to Menu” button.

create-menu-links-edited

Repeat this for the next four links and make sure the CSS ID names for each row match the url for each custom link (don’t forget to add the hashtag (#) before). For example, the custom link url “#step-2” should correspond to the CSS ID “step-2” and so on. Save your menu. The links are now properly setup to jump to the five specific sections of the page when clicked.

Note: The smooth scrolling effect for the anchor links will happen automatically because it is built into Divi already which is a nice bonus!

Creating a New Widget Area

Next, create a new widget area for your new menu. In your WordPress admin, go to Appearance → Widgets, enter the name “fixed sidebar” in the Widget Name box and click the “create” button.

add-fixed-sidebar-widget-edited

Note: You may have to refresh the page after creating the widget area for the new area to show up.

To add a logo/image to the top of the sidebar, locate the text widget on the left side of the page and drag it over inside the Fixed Sidebar widget area you just created. Click to toggle open the Text Widget and add an html img tag using this code (notice the dimensions for the image should be 200px by 200px):

<img src="Your Image URL" alt="Your Alternate Text" width=”200px” height=”200px” class="aligncenter" style=”padding-right: 15px” />

badge-image

Replace “Your Image URL” with the the full url of your image and “Your Alternate Text” with an alternate name for your image.

Click Save.

Next, locate the Custom Menu widget on the left side of the page and drag it over inside the Fixed Sidebar widget area under the Text Widget. Click to toggle open the Custom Menu widget and select the custom menu you created called “fixed sidebar menu”. Then give your menu a title (you can put “Cooking Steps” for now).

add-menu-edited

That’s it. Save the widget and head back to your page.

Creating the Sidebar

Finally, it’s time to add your sidebar to the page. Using the Divi Page Builder add a row with a full width column in the ⅓ column (left side). Next, add the Sidebar Module.

sidebar-module

Under the Sidebar Module general settings tab change the following:

  • Widget Area: fixed sidebar (the one we created earlier).
  • Text Color: Light
  • Disable On: select phone and tablet (This is an important step in making this mobile friendly)

add-widget-to sidebar-edited

Under Advanced Design Settings, switch the setting “Remove Border Separator” to “YES”.

remove-border-edited

Now go to the Custom CSS tab and add the following css in the Main Element code editor box:

background: #333;
position: fixed;
width: 25%;
padding: 120px 0px 20px 15px;
top: 0;
left: 0;
height: 100%;

sidebar-custom-css

Click Save & Exit.

Taking Care of Mobile

Currently, the fixed sidebar will not render correctly on mobile devices. This needs to be fixed. Remember how you hid the sidebar from phone and tablet displays? Now you need to add a “non-fixed” version of the sidebar that only shows on phone and tablet.

First, duplicate the sidebar module by clicking the duplicate icon.

duplicate sidebar-edited

In the Sidebar Module settings under general settings, edit the Disable On setting by unchecking the phone and tablet options and checking the desktop option (the opposite of what you had for the first sidebar).

Then go to Custom CSS and take out all the code in the Main Element box and add the following:

background: #333;
padding: 20px 15px 20px 30px;

Now you have two sidebars – a fixed sidebar that shows on desktop only and a traditional sidebar that shows only on mobile devices.

Note: Some of you may prefer to make the sidebar responsive by other means such as media queries. That is a great option too. I did it this way to keep it simple.

Additional Styling

This last step is all about styling. Right now the fixed sidebar overlaps your footer at the bottom and the menu links are just too boring. You can add a few custom css elements to fix this.

Go to Divi Theme Options on the WordPress admin. Under the General tab add the following css in the Custom CSS box at the bottom of the page:

#menu-fixed-sidebar-menu li a { 
color: inherit; 
display: block; 
width: 100%; 
padding: 15px 15px 15px 30px; 
margin-bottom: 10px; 
background: #555; 
border-left: 4px solid #888; 
text-transform: uppercase; 
} 

#menu-fixed-sidebar-menu li a:hover { 
background: #fff; 
color: #333; 
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
} 

@media (max-width: 1280px){
.et-social-icons, #footer-info {
float: none;
text-align: center;
}

@media (max-width: 980px){
#main-footer { 
width: 100% !important; 
}

theme-options

Note: The css id selector is dependant on the name of your menu. For this style to work, make sure you named your menu “fixed sidebar menu” so it corresponds correctly to the css #id selector “#menu-fixed-sidebar-menu”.

The Final Result

fixed-sidebar-600

That’s it. You now have a responsive fixed sidebar menu with smooth scrolling anchor links!

The beauty of this setup is you can easily add fixed sidebars to any page with different anchor link menus. This would be great for membership courses, tutorials, FAQ’s, portfolios, or long blog posts. Do you have other uses to share? I’m interested to hear what they are in the comments.

In Conclusion

The Divi Specialty Section is something we haven’t written a lot about yet–but we plan to! So keep your eyes peeled for more posts like this one in the future. And please, let us know in the comments below if you have any requests!

The post How to Build a Responsive Fixed Sidebar with Smooth Scrolling Anchor Links Using Divi’s Specialty Section appeared first on Elegant Themes Blog.

Doc Pop’s News Drop: 1st Annual Domain Swap

Doc’s WordPress News Drop is a weekly report on the most pressing WordPress news. When the news drops, I will pick it up and deliver it right to you.

This week, Doc visits the 1st Annual Domain Swap and talks with the organizer, Danielle Baskin, about unused domains.

Doctor Popular is an artist and musician living in San Francisco. As a full disclaimer, he is neither a doctor nor popular.

The post Doc Pop’s News Drop: 1st Annual Domain Swap appeared first on Torque.

ManageWP dashboard load time improvements

This week our development team pulled out all the stops to make the ManageWP dashboard load time significantly faster. A big part of the ManageWP appeal is creating an efficient working environment, and loading up your websites 3x faster will certainly make you more efficient. No time wasting here.

 

ManageWP dashboard

 

Originally, when we were thinking up the ManageWP dashboard, we wanted our users to see only one loading screen, and that was it! This scaled well at first, but as we added new features such as the Automatic Security Checks, Automatic Performance Checks etc. the data needed to display your dashboard grew significantly. So, we rolled up our sleeves, started benchmarking and plotting charts.

After all of this Scientific Method ™ we came to a conclusion that the main bottlenecks were:

  • State recalculation (uptime statistics, SEO statistics etc.)
  • As the codebase grew, some of the data became obsolete
  • Sub-optimal queries and algorithms were used in some places

Now, because we had the data, we could make a game plan:

  1. Optimize queries and calculations
  2. Only pull the data that is needed
  3. Stream bigger responses to the dashboard
  4. Make an event stream (more on this below)

Event stream

This is what made the biggest difference. Every time a website went down, a new Security Check was ran or a new SEO keyword result came in, an event is fired off in our system. Then, the event is pushed to an event queue where dedicated workers consume them and do the heavy lifting (state recalculation).

Stats

Here are some stats regarding the optimization:

  • The average load of benchmarked users, who had a load time over 5 seconds was 11.36 seconds. Now it is 4.15!
  • The average load of benchmarked users, who had a load time over 3 seconds was 6.09 seconds. Now it is 3.42!

Final notes

This is not the end of our effort to optimize the ManageWP dashboard. It’s an ongoing process. I would like to thank Nebojsa Urosevic, one of our hardworking software engineers, who did a great job implementing all of the optimizations discussed in this article.

The post ManageWP dashboard load time improvements appeared first on ManageWP.

Ask Yoast: nofollow layered navigation links?

If you have a big eCommerce site with lots of products, layered navigation can help your users to narrow down their search results. Layered or faceted navigation is an advanced way of filtering by providing groups of filters for (many) product attributes. In this filtering process, you might create a lot of URLs though, because the user will be able to filter and thereby group items in many ways, and those groups will all be available on separate URLs. So what should you do with all these URLs? Do you want Google to crawl them all?

In this Ask Yoast, we’ll answer a question from Daniel Jacobsen:

“Should I nofollow layered navigation links? And if so, why? Are there any disadvantages of this?”

Check out the video or read the answer below!

Want to outrank your competitor and get more sales? Read our Shop SEO eBook! »

Shop SEO$ 25€ 25 – Buy now » Info

Layered navigation links

Read this transcript to learn how to deal with layered or faceted navigation links:

“The question is: “Why would you want to do that?” If you have too many URLs, so if you have a layered or a faceted navigation that has far too many options -creating billions of different types of URLs for Google to crawl – then probably yes. At the same time you need to ask yourself: “Why does my navigation work that way?” And, “Can we make it any different?” But in a lot of eCommerce systems that’s very hard. So in those cases adding a nofollow to those links, does actually help to prevent Google from indexing each and every one of the versions of your site.

I’ve worked on a couple of sites with faceted navigation that had over a billion variations in URLs, even though they only had like 10,000 products. If that’s the sort of problem you have, then yes, you need to nofollow them and maybe you even need to use your robots.txt file to exclude some of those variants. So specific stuff that you don’t want indexed, for instance, if you don’t want color indexed, you could do a robots.txt line that says: “Disallow for everything that has color in the URL”. At that point you strip down what Google crawls and what it thinks is important. The problem with that is, that if Google has links pointing at that version from somewhere else, those links don’t count for your site’s ranking either.

So it’s a bit of a quid pro quo, where you have to think about what is the best thing to do. It’s a tough decision. I really would suggest getting an experienced technical SEO to look at your site if it really is a problem, because it’s not a simple cut-and-paste solution that works the same for every site.

Good luck!”

Ask Yoast

In the series Ask Yoast we answer SEO questions from followers! Need help with SEO? Let us help you out! Send your question to ask@yoast.com.

Read more: ‘Internal search for online shops: an essential asset’ »

What Are WordPress Plugins? And How Do They Work?

Often beginner users ask us what are WordPress plugins and how do they work? Plugins are an important part of the WordPress ecosystem, and they are essential for building great websites using WordPress. In this beginners guide, we will explain what are WordPress plugins and how do they work?

What Are WordPress Plugins? How Do They Work?

What Are WordPress Plugins?

WordPress plugins are apps that allow you to add new features and functionality to your WordPress website. Exactly the same way as apps do for your smartphone.

New plugins directory page on WordPress.org

There are more than 48,000 free plugins available right now on the WordPress.org plugin directory. Thousands more are available from third-party websites like Github.

On top of that, there are also thousands of premium WordPress plugins that are sold by individual developers and companies like ourselves.

In 2003, WordPress started as a simple tool to help you start a blog. Over the years, it has evolved into a powerful content management system and application framework, thanks primarily to plugins.

What Can WordPress Plugins Do?

WordPress plugins are small software apps that integrate and run on top of the WordPress software. This allows you to create almost any kind of website with WordPress (not just blogs).

For example, you can:

There is a popular saying in the WordPress community, “There is a plugin for that”.

No matter what you are trying to do on your WordPress site, it’s possible. If the feature is not available in default WordPress, then there is certainly a plugin available for that.

There are WordPress plugins to improve SEO, boost performance, add contact forms, social media buttons, create galleries, and so much more.

Plugins can be small and offer just one tiny little feature (like adding an image to sidebar).

Or they can also be quite large and act as their own platform as well (Example: WordPress eCommerce plugins or WordPress membership plugins).

More feature rich plugins can have their own addon plugins to extend them just like you would extend WordPress.

How WordPress Plugins Work?

WordPress is written in a way so that other developers can add their own code into it. The WordPress plugin API offers a robust set of hooks and filters which allow developers to modify existing WordPress functionality or add new functionality.

WordPress also allows developers to store data in the WordPress database. Plugins can utilize WordPress content types, taxonomies, and custom fields which allow users to store different types of content not just post and pages.

Each WordPress plugin installed on your site is registered in your WordPress database. You can activate and deactivate them at any time you want.

Installed WordPress plugins

Upon each visit, WordPress connects to the database, loads the core software, and then loads your active plugins. All this code is processed on your server and then sent to user’s browser.

How to Find WordPress Plugins and Install Them?

You can find free WordPress plugins by visiting WordPress.org plugin directory or you can also find them directly from your WordPress admin area.

Simply head over to Plugins » Add New page and search by typing plugin name or functionality you want to add.

Searching for plugins from WordPress admin area

WordPress will search the plugin directory and display the available plugins in a list. You need to review the results, and click on the install now button next to the plugin you want to install.

Reviewing and installing plugin from search results

However, search results inside the WordPress admin area are not always helpful because they are limited to free plugins only. Most beginners find it difficult to decide which plugin is best for the job.

Another approach is to look for plugin recommendations and tutorials on sites like WPBeginner.com. We have a WordPress plugins section where you can find the best WordPress plugins that we have thoroughly tested and reviewed.

You can also find WordPress plugins in our editor’s pick of the best WordPress plugins for business websites or checkout the plugins we are using on our website in the WPBeginner’s Blueprint.

More FAQs About WordPress Plugins

I cannot see or install plugins on my WordPress blog?

Most probably you are using WordPress.com. You can only install WordPress plugins on self-hosted WordPress.org websites. See our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.

How many WordPress plugins are too many?

A common misconception among users is that too many plugins can slow down their website. It is NEVER too many plugins that are slowing down your site. It is always poorly coded plugins that degrade performance. For details see our guide on How many WordPress plugins should you install?.

Should I install plugins not tested with my WordPress version?

Sometimes authors of free plugins do not update their plugin files on each new WordPress release. Simply because if it works, then they don’t feel the need to update it. For more on this topic, see our article on installing plugins not tested with your WordPress version.

How to choose between free vs paid plugins?

There are thousands of free plugins and there is a good chance that you can find a free plugin offering the same functionality as a paid plugin. If it works good for you, then use it.

Please keep in mind that free plugins are offered as they are, with no warranties, and no promise of support. Plugin author can stop working on a plugin at anytime they want.

If you feel you will be needing lots of support, and you want regular updates, then paid plugins do a much better job at it.

We use a combination of both free and paid plugins on all our websites.

How do I get support for free WordPress plugins?

Free WordPress plugins are offered without the promise of support. However, most good plugins offer limited free support for their plugins through the official WordPress support forums. Simply visit the plugin page and click on the support tab to post your question.

Getting support for free WordPress plugins

For more on this topic, we recommend you take a look at our guide on how to properly ask for WordPress support and get it.

We hope this article helped you understand what are WordPress plugins and how do they work. You may also want to see our beginner’s guide on how to choose the best WordPress plugin.

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 What Are WordPress Plugins? And How Do They Work? appeared first on WPBeginner.