Archiv der Kategorie: Wordpress

Finding Your Comfort Zone with Clients

Being a freelance web designer means more than just focusing on graphics and code. It also requires communicating with both current and prospective clients.

The thing is, we can take any number of courses to help us learn a new app or programming language. But client relations? Those skills aren’t quite as easy to pick up.

New designers are often unprepared for this part of the job. Back when I started, I certainly wasn’t ready for what I was about to face. And it took years to even begin to figure things out.

While I’m far from perfect, I have learned some valuable lessons about gaining comfort and confidence with clients. Want to know more? Keep on reading for some tips you can use in your day-to-day interactions.

Being Yourself Makes a Difference

When communicating with clients, you might feel the need to show just how smart and talented you are. This can lead to overdoing it in a manner that takes you away from your authentic self.

For instance, there’s no need to have an immediate answer to every question a client poses. It may be tempting to use the old “fake it ‘til you make it” way of communicating, where you offer up some abstract answer that has little or no basis. Maybe it makes you sound smart. But what good does that do?

In reality, clients don’t expect you to know everything off the top of your head. So, rather than pretend to know something you don’t, take notes and promise to get back to them with accurate information. That will establish a level of trust with your client that is necessary for a successful relationship.

Beyond dealing with facts, it’s also important to create a comfortable atmosphere for a real discussion. In practice, this means avoiding hyperactive sales pitches and buzzwords. Speak with clients the same as you would a friend – just keep things polite and professional.

A person smiling.

Meet Clients Where They Are

No, we’re not talking about geography here – in-person meetings aren’t quite the necessity they used to be. Instead, we’re looking at getting to know who your clients are as people.

One realization you’ll find over time is that no two clients are exactly alike. That makes sense as we are dealing with human beings as opposed to one-dimensional stereotypes.

Individual personalities impact how we approach communication. Therefore, giving the same spiel the same way to each client will be ineffective. Designers must adapt to a client’s personality and present information accordingly.

Technical jargon is a prime example. While it’s probably not a good idea to go too deeply into this with clients, some will inevitably be more comfortable with these terms and concepts. This doesn’t mean we should insult the intelligence of a non-technical client; it just means that things should be explained in more accessible terms.

Also, the depth of the design and development processes are of varying degrees of interest. Some clients want to know the reasons behind every decision, while others are happy to be left out of the nitty-gritty.

Clients also vary in preferred times and methods for communication. 24/7 email will do just fine for some while others insist on early morning phone calls. While you don’t want to get away from your policies, it’s still important to consider these preferences.

This isn’t to say that you shouldn’t be consistent in how you get things done. It’s just that the way you communicate them won’t be the same across the board.

A man and woman talking.

Look for Common Ground

There’s much to be gained by finding some sort of common ground with your clients. And it doesn’t necessarily have to be personal – although that’s recommended, too.

The most basic is the end goal for a given project. All stakeholders should be able to define what makes for a successful outcome and work together towards achieving it. At the very least, designers should strive to meet this need.

However, we shouldn’t totally discount the benefits of something more personal. This type of connection can make the relationship even stronger. It provides another way to bond with clients and can alleviate some of the stress that will inevitably arise at various points.

Building this bond won’t require any profound personal experiences. It could be as simple as both of you being parents of small children or sharing a love of sports, books, or music. Even the smallest similarities will provide that foundation.

Three women having a conversation.

Aim for Fairness and Simplicity

A designer/client relationship is not one where you’re looking to gain any sort of upper hand. There’s no need to seek undue control over a client, nor should you cede control. It has to be a partnership in order to work effectively.

When one side dominates the relationship, it’s bad for everyone. If, for instance, a client is intimidating and intentionally uses this as a negotiating tactic – you’re not going to be a happy camper. You’re going to cringe every time you see an email from them and will dread doing your job.

To that end, it’s best to treat your clients fairly and expect the same from them. You’ll still have to do the hard work to please them, but you’ll likely do so with more positive motivation.

Also, look to keep things as simple as possible. Don’t involve yourself with the inner workings of someone else’s business or openly critique their staff. These things complicate the relationship and can lead to hard feelings. Everyone suffers from this type of atmosphere.

In that spirit, it’s also wise to address the bigger issues before they become major impediments. Design politics, for example, is one such area. Do your best to achieve a diplomatic resolution when possible. In other words: try to bring people together, rather than drive them apart.

A man laughing.

Client Relations Belongs on Your List of Skills

Becoming comfortable when dealing with clients comes naturally for some, while others need a bit more practice. To be sure, it’s an entirely different skill set than what’s required to build an awesome website.

The great thing is that you don’t need to have a big, gregarious personality. More often, honesty and patience are what is needed. It’s about being yourself and taking the time to listen and learn. From there, you can adjust to match your client’s needs.

Even if you’re having trouble in this area – don’t worry. The more clients you have experience with, the more likely you are to improve your skills. Over time, these relationships will become like second nature.

The post Finding Your Comfort Zone with Clients appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

Diving into WordPress Custom Post Types and Taxonomies

The ability to organize content is one of the most important functions of a content management system (CMS). It offers us a way to clearly define what belongs where. This impacts everyone from content creators accessing the back end to users navigating the public-facing website. And of course, search engines are also a big factor.

WordPress has an array of options for organizing content – but they might be easy to miss when you first install the software. Out-of-the-box, it comes with standalone pages, along with posts that can be further organized via categories and tags.

These items provide a great start and may be enough for a basic website. However, sites with a lot of different types of content can become messy when just relying on the default choices.

This is where a quick look under the hood unlocks the massively-useful WordPress custom post types and taxonomies. With them, you can create all-new and highly-specific ways to organize your content. Instead of trying to fit square pegs into round holes, you simply create new ones that are a perfect fit for your needs.

With that in mind, let’s look at a scenario where a custom post type or taxonomy can be helpful. We’ll also offer up some tips for making the most out of this feature.


Announcing Template Kits. Responsive WordPress Designs Built For Elementor.


Learning About Custom Post Types and Taxonomies

First, it’s important to have a cursory understanding of WordPress custom post types and taxonomies. You don’t need to be an expert, but it’s a good idea to know how they are set up and what options are available.

We have a short tutorial that will help you in getting started. In addition, it’s worth looking into the WordPress documentation regarding post types – and especially the register_post_type() and register_taxonomy() functions.

And, if you’re looking for a tool that makes creating custom post types and taxonomies a breeze, check out both Custom Post Type UI and Pods. Both of these free plugins greatly simplify the process. You can’t go wrong with either pick.

Lumping Everything into Posts Can Be Confusing

Standard WordPress posts are fine if you’re running a blog or news-oriented website. The ability to categorize and tag each post means you can easily separate press releases from opinion pieces.

But let’s consider a different scenario. What if you want to organize staff members by department? Forget about using standard pages, as they aren’t appropriate for this type of situation.

Posts might be a solution. You could create a “Staff” post category, then a child category for each department. From there, you can add a post for each staff member and assign them to their respective categories.

This all works, technically-speaking. But as your site fills up with content, visiting the WordPress Posts screen can become overwhelming.

A WordPress category listing.

Imagine being a content creator who needs to edit a post. Since some entries are blog posts, others are news items and still others are staff members, it’s difficult to find what you’re looking for. There are simply too many different types of content in the same place.

Then, displaying the staff members on the front end isn’t so simple. While you could create a custom category template, you may well have to create ones for each department to duplicate the desired formatting. The structure is also hard to keep track of. It’s even worse for another developer who comes in later on.

How a Custom Post Type + Taxonomy Can Help

This type of issue is exactly what custom post types and taxonomies exist to solve. In this case, creating a custom post type for “Staff” and a taxonomy for “Departments” will provide a separate area within WordPress exclusively for this content.

It’s a more intuitive experience all the way around. Now, those seeking to add or edit staff-related content need only click the entry within the WordPress menu. It’s much easier to find and just plain makes sense.

A staff listing.

On the front end, staff and department content get their own archives. This would allow designers to create custom templates that better reflect the content in this post type. You won’t have to settle for the same look and layout used for standard blog posts.

The URL structure is also more reflective of content as well. This not only looks better to the end-user but can benefit SEO. Speaking of which, a custom post type also allows for more targeted SEO customization when using a plugin such as Yoast SEO or All in One SEO Pack.

Whether you’re a content creator or a visitor, there are benefits all the way around. Any type of specialty content that doesn’t fit the mold of the traditional post or page is likely a good fit for this type of setup.

Considerations for Setting up Custom Post Types and Taxonomies

The above is just one scenario where a WordPress custom post type makes sense. But things aren’t always so clear-cut. You may have content that could benefit from its own post type and taxonomy, but may be unsure as to the best way to configure it.

Let’s look at a few important factors to consider before you dive into adding content:

Think About URL Structure

We won’t spend a ton of time on this, but how URLs are structured is important. Custom post types require a slug, which serves as the basis for how your posts are organized.

You’ll want to choose a slug that makes sense for your content. Taking our Staff post type as an example, the URL for its archive index might be:

In this case, “staff” is the slug for our post type. Perhaps not the most exciting name, but certainly logical.

Also beware that existing content on your website may already be using a particular slug. Therefore, you may have to change things around in order to accommodate this new post type.

Do Posts or Taxonomies Require Parent/Child Relationships?

There’s a little secret to WordPress custom post types and taxonomies. Whatever you name them, they all function essentially the same as standard pages, posts, categories, and tags. And you can configure them to work within these parameters.

Pages are standalone pieces of content that are hierarchical – meaning they can have parent/child relationships. While a custom post type can be set up to utilize page-like functionality, it’s not all that common. Using the default Pages post type that comes with WordPress often works just as well.

Posts act as a collection of content within WordPress. Ideally, all posts in a custom post type are related in some way. They might be blog posts, staff member profiles, or even products that we’re selling. They are not hierarchical.

Categories and tags are two different ways to further organize post content. And each custom taxonomy we create contains properties specific to one or the other.

The main difference between the two is a hierarchy. If a taxonomy is hierarchical (enabling parent/child relationships), then it behaves like a category. If there’s no hierarchy, it behaves like a tag.

In our example, the “Departments” custom taxonomy is hierarchical. This allows us to:

  • Assign individual staff members to one or more departments (Executive Leadership, Human Resources, etc.);
  • Add more layers to organize content, such as sub-departments, which act like child categories (Executive Leadership > Finance, Human Resources > Benefits);
  • Display content based on departments and sub-departments;

A custom taxonomy screen for Departments.

On the other hand, not all content needs to be organized with a parent/child hierarchy. This where tags come in handy. And you can set up a custom taxonomy to behave in the same way. Content is grouped on a singular level.

When deciding on how you want to build out custom post types and taxonomies, determine your needs with regards to hierarchy. You can make changes after-the-fact, but it’s much easier to start on the appropriate path.

Create as Many Taxonomies as You Need

Custom taxonomies give you an easy way to organize content. And there’s no real limit to how many of them you can create to go along with your post types. This can be especially handy when you need to filter posts based on more than one criterion.

For example, let’s say that our Staff post type covers employees in several different office locations. By creating taxonomies for both Departments and Offices, we could easily filter posts based on a combination of the two.

A locations taxonomy listing.

If we need to see only Human Resources employees from the Scranton office, we can. Likewise, if we wanted to list all the Executive Leadership in the New York City and Stamford offices, a query can be built to do so.

Taxonomies provide a means to sort data in a way that would otherwise be incredibly difficult.

Go Further with Custom Fields

There are instances where the content you want to place in your custom post type goes beyond what WordPress offers in a default installation.

For instance, a staff member profile might include information such as the employee’s title and email address. While you could manually add these into each post’s main content area, it could lead to some inconsistencies in formatting.

Adding custom fields for both “title” and “email” would solve that problem. With them, data can be queried separately and allow for a more consistent way to add and display content.

WordPress custom fields for staff member profiles.

Customize Your WordPress Content

We spend so much of our time customizing the look and layout of our website projects. But it’s also important to pay close attention to how content is organized as well.

That’s what custom post types and taxonomies are there to do. They allow us to put related content together according to need. That, in turn, makes it easier to create, edit, and display.

We hope this guide has helped you better understand when it makes sense to implement these features and how to best use them. It’s the kind of knowledge that can help you deliver a website that is well organized, SEO-friendly, and easier to navigate.

The post Diving into WordPress Custom Post Types and Taxonomies appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

At What Point Does Obsessing Over Design Become a Liability?

The overall quality of a website’s design is often in the details. Those seemingly-small elements such as microinteractions, typographic spacing and color accents can be real difference makers. They have the potential to transform the mundane into something that stands out.

In these cases, being picky about design is a good thing. Whether that trait comes from you or your client, the goal is the same. It’s all about improving the look, the intuitiveness and, ultimately, the user experience.

As honorable as that may sound, it’s worth wondering: is there a point in a given project where pickiness becomes a liability, rather than a benefit? Can obsessing over every last detail actually cloud the bigger picture?

In my opinion, design focus can indeed be done to death – or at least to the detriment of a project. Let’s outline a few situations where the process can get in the way.

When Design Elements Turn Overly Complex

Sometimes the focus on detail can take us to a bad place – one where bells and whistles overtake usability. The result is a feature that may look really cool, yet be difficult for the end user to figure out. In some cases, it may not even be relevant to what you’re trying to accomplish.

This is one of those classic cases of web design gone too far. We saw it a lot in the days of Flash, where high-tech splash animations were used by everyone from gas stations to law firms. Once the novelty wore off, these sorts of features were merely obstacles for users to navigate.

The modern web has its own vices. Distracting video backgrounds and purposeless hero images take up valuable screen real estate and can make it more difficult for users to get the information they need. That’s not to say these features have no place in web design – just that there’s the potential to go over-the-top with them.

Plus, pouring a lot of time and effort into these elements doesn’t guarantee effectiveness. They still need to have a purposeful existence and be easy to use. Design should be there to help simplify them.

Wires connnected to an electronic device.

When Time and Budget Are Limited

Web designers are often saddled with the responsibility of getting projects done within tight budgets and deadlines. We’re pros at putting it all together. But a micro-managing client can stall progress significantly.

Make no mistake, clients are entitled to make changes – and their opinion counts. Still, there are occasions when one gets so hung up on a particular item that it throws the entire project status into question.

This is certainly understandable when it comes to major features. All stakeholders want to make sure that things look and function according to plan – and good things do often take time. It’s part of the due diligence that comes with building a website.

But these issues also tend to pop up over the most minute details. And they are often a matter of personal preference. For example, insisting that a button look and function exactly as it does on a competitor’s site, if only for the sake of one person’s ego.

In a perfect world, we’d have all the time and budget needed to go down this rabbit hole. But in reality, this can take valuable human resources away from other critical areas that need to be addressed. Things must be prioritized in order to ensure progress.

A person using a laptop computer.

When It Leads to Constant, Counterproductive Change

The design process can often be iterative, where things are improved upon over time. This happens as we become more aware of how visitors are actually using the things we create. They help us to understand their pain points so that we can refine them.

Therefore, change is to be expected. But if things change too dramatically it can backfire. A sudden change to the UI, for instance, might confuse visitors. They have to relearn their how to do what they want – or simply move on to a different site.

Amazingly, this strategy seems to be employed by some big brands. As of this writing, PayPal is a prime example. Their account management UI changes more often than the weather. It seems like every time I log in things are significantly different. Maybe there’s a method to this madness, but it feels more infuriating than useful.

Of course, techniques such as A/B testing are very much viable. But there’s a difference between making slight changes for the sake of conversions and obsessing to the point where you can’t make up your mind. Without at least some consistency, the user experience is bound to suffer.

The words "What Do You Mean" written on a sidewalk.

Attention to Detail Is Great. Obsession? Not as Much.

Every website needs to have an end goal. Perhaps it’s making an eCommerce sale or getting a user to reach out and contact you. Whatever it is, the site’s design should be focused on achieving the desired result.

But, as we are only human beings, that laser-like focus can be incredibly difficult to attain. Instead, stakeholders can obsess over design to the point where it does more harm than good. That could mean missing out on deadlines or busting the project’s budget. It might even result in an end product that’s not as user-friendly as it could be.

With that, there’s certainly a case to be made for slowing down the design process. Ideally, it gives everyone room to breathe and create the best possible outcome. That is, as long as the time is used wisely.

All stakeholders should focus on the details – just not at the expense of the stated goals.

The post At What Point Does Obsessing Over Design Become a Liability? appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

How to Update WordPress Themes and Plugins with a ZIP File

When updating a WordPress theme or plugin, we’ve long had two choices. Either manually upload the updated files via FTP or install the update within the WordPress dashboard.

In general, both of these methods work pretty well – most of the time. FTP is fairly reliable, but isn’t recommended for non-technical users. Then, some themes and plugins seem to be extra finnicky when attempting to update via the dashboard.

Thankfully, there is now a more convenient solution. WordPress 5.5 introduced the ability to apply updates to a theme or plugin by uploading a ZIP file within the dashboard. Now, the same downloadable file that has been long used for installing software can also be used to update it. It’s about time!

Today, we’ll walk you through the process of updating your website’s themes and plugins using only a ZIP file.


Announcing Template Kits. Responsive WordPress Designs Built For Elementor.


First, a Few Technical Notes

While updating a theme or plugin via a ZIP file is fairly straightforward, there are a few technical items to keep in mind:

Test and Back Up Your Site

As always, the best way to prepare your website for updates is to test them out. This could be done via staging site.

In addition, make sure to keep a current backup of your site on hand just in case something goes wrong.

Check the ZIP

If you’re downloading from the official WordPress theme or plugin repositories, your ZIP file should be good to go. However, software from other sources may require some more action on your part before you can upload to your website.

For example, there are commercial themes that provide more than just the installable files within a ZIP archive. You may have to extract another ZIP archive contained within for installation/update purposes. If you’re unsure, open up the archive first to see what you’re dealing with.

Beware of File Upload Limits

All WordPress websites have a file upload limit. There may be occasions when a ZIP file exceeds that limitation.

In this case, you’ll either have to increase the upload file size or unzip the archive and upload via FTP.

Now that we have these technical details out of the way, let’s explore the update process.

Update a WordPress Plugin with a ZIP File

Let’s start out with updating a WordPress plugin with a ZIP file. It’s nearly identical to that of a theme (which we’ll get to later) – the main difference being the location of the upload screen.

In this example, we’ll update Yoast SEO to the latest version. That requires us to download a fresh copy of it to our device.

1. Within the WordPress dashboard, navigate to Plugins > Add New.

2. Click on the Upload Plugin button at the top of the screen.

WordPress Add Plugins screen.

3. Next, click on the Browse button and locate the ZIP file on your device. Select it and click on Open (the look and terminology used here may be different, depending on your device’s operating system).

File Upload dialog box.

4. You should now see the file name displayed on the Add Plugins screen. Click the Install Now button to start the upload process.

The file name displayed on the Add Plugins screen.

5. Now, WordPress is going to do some detective work. It’s going to check to see if the plugin is already installed (which it is). Once it sees that we already have a version of Yoast SEO, it’s going to give us a comparison of the existing and uploaded versions.

WordPress comparison of uploaded file and existing plugin.

In our example, WordPress correctly sees that the plugin we uploaded is a newer version. We want to go ahead and apply the update, so we’ll click Replace current with uploaded to finish up.

6. Success! The new version of Yoast SEO was updated using a ZIP file.

Installed Plugin confirmation screen.

Update a WordPress Theme with a ZIP File

As we mentioned, the process for updating a WordPress theme with a ZIP file is pretty much identical as the one outlined above. Here, we’ll update to the latest version of the Twenty Twenty theme.

Here are the differences:

1. Within the WordPress dashboard, navigate to Appearance > Themes.

WordPress Themes screen.

2. Click on the Add New button at the top of the screen. You’ll be taken to the Add Themes page. Click on Upload Theme to select the ZIP file from your device.

Steps 3 – 6: Repeat those listed above.

Once again, WordPress will inform us that the theme we’ve uploaded already exists. From there, it will point out the version difference.

WordPress comparison of uploaded file and existing Twenty Twenty theme.

Clicking on Replace current with uploaded will apply the theme update.

A Simple Solution for Theme and Plugin Updates

The ability to update your WordPress website’s theme and plugins via a ZIP file is incredibly handy. There are a number of situations that arise where utilizing FTP or the automated dashboard updates either don’t work or aren’t very convenient.

This provides us with another method that just about anyone can do. It will make the process of maintaining your site that much easier.

The post How to Update WordPress Themes and Plugins with a ZIP File appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

Weekly News for Designers № 564

Envato Elements

GitHub Socialify – Showcase your project to the world by generating a beautiful project image with this tool.
Example from GitHub Socialify

Supercharge Testing React Applications With Wallaby.js – React developers, learn how to get real-time feedback on your JavaScript tests in your code editor even before saving the file.
Example from Supercharge Testing React Applications With Wallaby.js

The State of CSS Survey – Take the survey and help identify the latest trends in CSS.
Example from The State of CSS Survey

Thinking Outside the Box with CSS Grid – CSS Grid means not having to settle for boxy layouts. Check out these unique examples for inspiration.
Example from Thinking Outside the Box with CSS Grid

The good line-height – Use this tool to easily calculate the perfect CSS line height for each text size in your scale.
Example from The good line-height

SVG Favicon Maker – Create your own, scalable SVG favicon with this online tool.
Example from SVG Favicon Maker

TALLBOY™ Typeface – Grab a copy of this free ultra-condensed typeface for use in your projects.
Example from TALLBOY Typeface

iOS 14 GUI – Download the biggest collection of free iOS 14 screens and components. Works with Sketch, Figma and Adobe XD.
Example from iOS 14 GUI

CSS Background Patterns – Generate your own seamless background pattern.
Example from CSS Background Patterns

The Grumpy Designer’s WordPress Plugin Pet Peeves – A few of the more egregious and frustrating WordPress plugin behaviors.
Example from The Grumpy Designer’s WordPress Plugin Pet Peeves

I want my own media queries in browsers – How to test new CSS media queries before they make it to browsers.
Example from I want my own media queries in browsers

Alternative Text for CSS Generated Content – Find out how images displayed via CSS content can be made more accessible.
Example from Alternative Text for CSS Generated Content

UXArchive – Browse the world’s largest library of mobile user flows.
Example from UXArchive

PatternPad – An app for creating exportable patterns using endless variations.
Example from PatternPad

Signs Your WordPress Website Has Outgrown Its Hosting – How do you know when you need a hosting upgrade? Read this guide for telltale signs.
Example from Signs Your WordPress Website Has Outgrown Its Hosting

Feather – Download this minimalist iOS 14 icon pack based on Feathericons.
Example from Feather

CSS Spider – This Chrome extension is billed as the quickest and most convenient way to copy, visualize, edit and export CSS.
Example from CSS Spider

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

via Speckyboy Design Magazine

WooCommerce: Adding the Product Short Description to Archive Pages

Final product image
What You’ll Be Creating

WooCommerce comes bundled with archive pages and loops that do a great job, but sometimes you might need to display a bit more information on your main shop and other archive pages.

In this tutorial, I’ll show you how you can add the product short description to your archive pages and display it below the product title.

If you want to learn how to use WooCommerce from start to finish, check out my free beginner’s course.

If you want to learn how to use WooCommerce from start to finish, check out my free beginner’s course.

What You’ll Need

To follow along, you’ll need:

  • A development installation of WordPress.
  • A code editor.
  • WooCommerce installed and activated.
  • Products added—I’ve imported the dummy product data that comes with WooCommerce; for details of how to do this, see this guide.
  • A WooCommerce-compatible theme activated—I’m using Storefront.

Before you start, make sure you’ve got WooCommerce set up. To add the product short descriptions, you’ll follow three steps:

  1. Create a plugin for the function and activate the plugin.
  2. Add a function that outputs the product short description.
  3. Identify the hook in WooCommerce that we need to hook the function to, and attach the function to that hook.

So let’s start!

Creating the Plugin

In your wp-content/plugins directory, create a new PHP file. I’m calling mine tutsplus-product-archive-short-descriptions.php.

Open the file in your code editor. At the top of the file, add this:

This sets up the plugin and gives WordPress everything it needs to activate it.

Now go to the Plugins screen in your WordPress admin and find the plugin:

Plugins screen

Now activate it.

At first it won’t make any difference as you haven’t populated it. Here’s what the main shop page looks like right now:

Default shop page

Writing a Function to Output the Short Description

The short description for products in WooCommerce uses the excerpt that you’d find in normal posts, so to display it all you need to do is display the excerpt for the post.

In your plugin file, add the code below:

It’s as simple as that! But now you need to hook your function to the right action, so that it’s output in the correct place in your archive pages.

Hooking the Function to the Correct Action

Let’s take a look at the file in WooCommerce that outputs the content of the loop on archive pages. This file is content-product.php, and you’ll find it in the templates folder in the WooCommerce plugin.

The file includes a number of action hooks, all of which are used by WooCommerce to output different content.

As we want to display our excerpt below the title of the product, the hook we need to use is woocommerce_after_shop_loop_item_title. As you can see from the content-product.php file, it’s already got two functions attached to it, woocommerce_template_loop_rating() and woocommerce_template_loop_price(), which have priorities of 5 and 10 respectively. So we need to hook our function with a higher priority number, to ensure it fires after those. I’ll leave some leeway and use 40 as the priority.

Beneath your function, add this:

Now save your plugin file and refresh the shop page in your browser. You’ll now see the product short descriptions below the product names:

Shop with short descriptions

Restricting the Length of the Product Descriptions

If your product short descriptions are long, they could mess up the layout of your shop page. Here’s how it looks with a longer description:

shop with long description

Personally I’d use shorter descriptions on a live site, and keep the more detailed information for the long description. But what if you want to use a longer short description on your product pages but restrict their length on the main shop page?

You can do this by using the wp_trim_words() function in your function to display the excerpt. Edit the function so it looks like this:

Your product short description will be displayed limited to the number of words you specified in your function:

shop page with shorter description

Hiding the Short Description on the Product Page

Another thing you might want to do is use the short description for the shop and archive pages, and use just the long description on the individual product pages.

By default, WooCommerce displays the short description at the top of the product page and the long description lower down:

default product page

To remove the short description from the product page and add the long description in its place, you need to unhook the function that outputs the short description and replace it with one outputting the content, which is the long description.

Add this to your plugin file:

This will remove the short description form the top of the product page and replace it with the long description. But the long description is now duplicated at the bottom of the page, so you need to remove it from the product tabs. Do it with another function, hooked to the woocommerce_product_tabs hook:

Now you’ll find that your individual product pages have the long description at the top instead of the short one:

long description on product page


Because WooCommerce outputs nearly all of its content using action hooks, it’s straightforward to add more content by writing functions and attaching them to those hooks. In this tutorial you’ve learned how to add product short descriptions to your product archives. If you wanted to take this further, you could include one or more conditional tags in your function to do this on specific archive pages.

from Envato Tuts+ Code – WordPress

12 Best WordPress Community Plugins for 2020

Whether you’re an online freelancer or running a brick and mortar store, having a website is no longer enough to get and retain customers. You also have to provide value through engaging content. Engagement drives traffic to your website. It provides new leads that you can convert to customers. Engagement is also key to retaining customers.

So, along with your website, you need to create a community of customers and engage with them. This is the best strategy to grow your business. Online communities have created and continue to create enormous value for businesses.

In this post, I’ll show you some of the best WordPress community plugins available on CodeCanyon. But before we do, let’s talk a bit about online communities.

What Is an Online Community?

An online community is:

„a network of people who communicate with one another and with an organization through interactive tools such as e-mail, discussion boards and chat systems.“ — Business Dictionary

Online communities come in different forms:

  • online forums
  • social networks
  • community blogs
  • email groups
  • subscription newsletters

Communities are hosted on a variety of platforms. Each community serves a specific purpose. Before you decide what platform you will use to start and host your community, here are some things you should consider:

  • What specific purpose is your online community going to serve?
  • What value are you going to provide for your members, and how will you provide it?
  • What type of community do you want to create?
  • What kind of content do you want to share with members?
  • Finally, how you will keep the community going?

Importance of Online Communities

Because they are integral to the success of your business, here’s why it makes sense to create an online community as part of your business growth strategy:


You will be able to reach a very large number of people, which means you will have access to high-quality leads that you can market to cheaply and convert to reliable repeat customers. You won’t have to rely on expensive traditional advertising.


Having an online community means that you will be challenged to provide information that is of value to your users. This will help you build a loyal following, which means longevity.


Through the community, you’ll be able to constantly engage with your customers. You can post questions about what changes your customers want to see and get immediate feedback about what they think of a new product or service. This level of engagement keeps them coming back.

What Does an Online Community Need?

Online communities need tools to facilitate direct engagement between users and your content, between users and the business, and between the users themselves.

Some tools needed to facilitate engagement in your online community are: 

  • membership tools for users to sign up, create profiles, and log in
  • means to engage with content through commenting, posting, or liking
  • ways for members to communicate with each other
  • the ability to join groups and have private conversations

Ultimately, the kinds of tools you need depend on the purpose you want the online community to serve.

Why Is WordPress the Perfect Choice for Building an Online Community?

Millions of websites are now powered by WordPress.

WordPress is built specifically for content. It started as a blogging tool, but was later revamped into a fully fledged content management system. It is highly adaptable and can be customized by adding themes and plugins to get the desired results.

The fact that it’s easy to customize makes it an ideal choice for building your online community.

Building an Online Community With WordPress

WordPress is a content management system that has user management built into it. This takes care of your user registration and login tools.

WordPress also comes with a built-in posting and commenting mechanism. This lets users engage with content you make available, questions you have for them regarding your product and service, and each other.

The basics of hosting an online community are already there with WordPress. And thanks to WordPress’s flexibility, any other features you could want for an online community are available as plugins, either in free plugins from or more full-featured premium plugins from CodeCanyon.

Now that you understand the importance of having your online community, I’m sure you can’t wait to get started creating your online community so you can grow your website and engage your users.

What Are Community Plugins?

You don’t need to create a community platform from scratch. There are plugins for that.

A plugin is a piece of software that allows you to add a specific function on your website. It saves you the time and headache of creating that particular functionality from scratch.

community plugin is a piece of software you add to your WordPress website to help you create your own social network or online community.

There are plenty of community plugins available to help you out. When choosing a plugin to start and host your online community, here are some things to consider:

  • It must be easy to use, flexible, and adaptable to fast-changing technology.
  • It must be fast: as your community grows, loading speeds become important.
  • It must be fully responsive and compatible with all devices—desktops, laptops, and mobile.
  • It must seamlessly integrate with other WordPress plugins that you’re using.

Now that we know what to look for, let’s review some of the best community plugins on CodeCanyon.

WordPress Community Plugins on CodeCanyon

There are currently over a 100 premium community plugins for WordPress on CodeCanyon. You can use them to add all kinds of community based functionality to your websites. This include things like user profiles, user testimonials, team member pages, forums and much more.

WordPress Community Plugins on CodeCanyon

Using a premium community plugin gives you access to free updates for lifetime and 6 months of support.

Top WordPress Community Plugins

We have created this list of top WordPress community plugins to help you save some time.

1. UserPro: Community and User Profile WordPress Plugin

UserPro Community and User Profile WordPress Plugin

With UserPro, you can do just about anything you need to build your WordPress Community website. Here are some things you can do:

  • Build your own community with searchable members directory.
  • Give each user a custom and elegant profile.
  • Customize registration and login.
  • Restrict access to content based on membership level.
  • Enable social connect and instant profile sync via Facebook, Twitter, Google+, Bkontakt, LinkedIn, and Instagram.

User ACleverCat says this about UserPro:

„I’ve been using this plugin for years. Works great and looks professional on the front-end. Plus, really good customer support…“

2. Youzer: BuddyPress Community & WordPress User Profile Plugin

Youzer BuddyPress Community  WordPress User Profile

Youzer focuses on creating beautiful community and user profiles. It offers a lot of tools to enable users to customize their profile and community pages.

Some of its features include:

  • social login
  • extremely customizable, with many different header styles, profile widgets, and color schemes
  • fully responsive design
  • lots of social features: likes, follows, points, reviews, ratings, badges, mentions, comments, and more…

It’s also fully compatible with the BuddyPress platform.

User cmh2010 says:

„It’s fast, lightweight and beautiful, with excellent support. Great plugin.“

3. Ultimate Membership Pro

Ultimate Membership Pro

For subscription-based communities that give access to content and other services depending on membership level, Ultimate Membership Pro is your plugin of choice.

Ultimate Membership Pro allows you to:

  1. Create your subscription-based online community with different membership fee levels.
  2. Provide different levels of access to content and other services based on the type of membership each user has paid for.

Here’s a look at some of its features:

  • manage your membership forms, membership pages and content lockers directly from WPBakery Page Builder (Visual Composer)
  • drip content: release content at regular intervals, with settings for when each item becomes available based on subscription time or level
  • content locker: lock content based on subscription level
  • sell subscriptions using WooCommerce
  • integrated payment gateways: PayPal,, Stripe, and more
  • integrated with popular email marketing platforms

Customer BreoganGal has this to say:

„An excellent plugin, it adapts perfectly thanks to all its editing possibilities… as well as editing the fields I need. Keep in that way!“

4. PrivateContent

Private Content Multilevel Content Plugin

PrivateContent is a powerful yet easy way to turn your WordPress site into a true multilevel membership platform.

It comes with complete user management, a modern form framework, and a unique engine to restrict any part of your website. All this without needing coding skills!

Some features that make PrivateContent awesome include:

  • five different ways to incorporate the login form into your custom WordPress theme
  • use third-party forms to register users and edit their data
  • WooCommerce checkout to create PrivateContent users
  • locked posts can be searchable and indexable but have hidden contents

PrivateContent is also integrated with Google Analytics to provide precise reports: each page view, each login, logout, and registration will be recorded. You will be able to know exactly what users see. All in real time!

PrivateContent is a developer-friendly plugin and can be easily extended and customized by developers.

Customer Fibeus says this about PrivateContent :

„Amazing! The ease of use. The flexibility. The attention to detail. Thank you for the amazing plugin, making my life just so much easier. Great work. An absolute steal at this price for user specific content!“

5. ARMember

ARMember WordPress Membership Plugin

Make the membership building process as simple as possible with the ARMember plugin. 

ARMember is a one-stop solution to all your membership needs, including member management, payment tracking, drip content, and more. It is so easy to set up that within minutes you will have your own membership site up and running!

You can do so much more, for example:

  • set up custom grace periods for late or failed membership payments
  • upgrade or downgrade membership levels
  • invite-only membership signup
  • choose from a wide selection of striking and customizable templates for member profiles and directory listings
  • track member statistics and payment histories

Members are more comfortable signing up if they are being offered convenient and popular payment gateways. The ARMember membership plugin for WordPress comes with some of the most popular gateways like Stripe, PayPal, Bank Transfer, 2Checkout, and

User Lynn_HCM says this:

„If you are looking for an all-in-one membership plugin for your WordPress website with amazing and fast customer support then I highly recommend AR Membership.“

6. User Profiles Made Easy

The User Profiles Made Easy plugin does just what it says—it makes user profiles easy. It offers a front-end profile, login, and registration plugin for your membership-based WordPress site.

User Profiles Made Easy

Features include:

  • fully searchable membership directory
  • beautiful custom profile pages
  • customizable and searchable members list
  • private content module that restricts parts of the site based on user roles and guests
  • private content restriction messages with predefined design templates

The User Profiles Made Easy WordPress plugin is one of the best ways to build an online membership directory.

User RomeoLab says:

„A great plugin, but greater support!! Very fast in answering emails and fixing problems…“

7. Chat Support Board

This Chat support board plugin is a great way to automate basic interactions with customers using artificial intelligence. The UI is similar to popular chat services making it easier for everyone to use it.

Chat Support Board

Here are some of its features:

  • rich messages and surveys
  • registration and login
  • multilingual and RTL support
  • email and desktop notifications with sound
  • and more

The plugin also offers a lot of great tools to admins to help them manage different conversations and users. Admins are also able to save replies and find, sort or filter users.

8. Team Showcase

This WordPress plugin allows you to showcase different members of your team or company in a variety of layouts. You can provide some basic information like their title and social media links along with their profile picture.

Team Showcase

Here are some interesting features of this plugin:

  • filter team members by categories
  • reorder members using drag-drop
  • single pages for each entry
  • can be used inside widgets
  • user friendly shortcode generator
  • and more

Consider using Team Showcase if you want your team members to be easily accessible for your readers. This could potentially increase their engagement with your website and give team members more recognition at the same time.

9. Sabai Discuss Plugin

You can use the Sabai Discuss plugin in your WordPress website to create a questions and answers forum. The plugins allows users to ask and answer questions similar to websites such as Stack Overflow.

Sabai Discuss Plugin

You get a lot of features with this plugin, such as:

  • filter questions and answers
  • post comments on both questions and answers
  • tag questions with auto-suggest
  • profile pages
  • close and reopen questions
  • and more

You should definitely check out this plugin if you want to build a solid community of users based around the content of your website.

Free WordPress Community Plugins

You can also find quite a few free WordPress community plugins out there. We are listing three good ones here that have decent reviews. Before going ahead with free plugins, keep in mind that you might not always get regular updates and support.


This is a custom user profile plugin that aims to bring all kind of user data from a variety of plugins together. It is basically an all encompassing user profile builder that makes managing user data easier.


This plugin allows you to create a community similar to popular social networks. Members of your website will be able to create their profiles, have private conversations and interact in groups.


The wpForo plugin allows you to integrate a full-fledged forum into your website. It comes with a variety of layouts with in-built SEO and cache system.

Important Tips to Keep in Mind

Here are a few tips that will help you in choosing the best community plugin for your own website:

  1. Make sure that the plugin looks great on mobile devices. More and more people are now using the internet on their mobiles instead of their desktop computer. This makes it important to choose a plugin that loads quickly and looks great on mobile devices.
  2. Forum and social networking plugins will require comparatively more server resources. Be aware of the resources that might be needed by a plugin to work properly. The most feature rich plugin will do you no good if the website starts showing 503 errors with only 10 users!
  3. Spam can be a big issue for community based websites. Any plugin that you use should come with tools to help you easily moderate content and prevent spam. 


Endless customization possibilities built into WordPress have made it easier than ever to build and host your own online community. You don’t need to build your community platform from scratch. There are many WordPress community plugins to help you get started. Once you have established what purpose you want your online community to serve, you will find community plugins for every need on CodeCanyon.

from Envato Tuts+ Code – WordPress

8 Horizontal Rules and Dividers Enhanced with CSS

Some design elements are so common that they almost become afterthoughts. The horizontal rule is one of them. It’s easy to simply place them within our content without any attention to detail.

But this venerable HTML tag is capable of doing so much more – thanks to some clever CSS. Horizontal rules can be quite decorative, whether you prefer a bold or subtle design. They can also be used as an enhanced branding mechanism, complete with color and logo elements in tow.

If you’re looking to take your HR’s up to the next level, you’ll want to check out this collection of fanciful dividers that go beyond the default. Let’s dig in!

The Measure of an HR

This example is incredibly clever, if a bit on the extreme side. It features a large conglomerate of <hr> tags (100 in all) that are styled to simulate the look of a ruler. Practical? Maybe not. But it’s certainly creative.

See the Pen
A Horizontal rule-er
by John W

Inline Lines

While this snippet doesn’t use an actual horizontal rule, it simulates the effect with CSS. Text or other design elements can be placed inline with the divider, making for an attention-grabbing effect. It’s also delightfully simple in terms of code.

See the Pen
Inline horizontal rule
by Ohad

Iconic Shapes

Here’s proof that subtlety can still stand out. A standard horizontal rule is enhanced with shapes (circle, diamond, star, etc.) and provides for an attractive visual. Combined with the rule’s short width and bright color, it helps readers delineate one section of content from another.

See the Pen
Fancy Horizontal Rules
by szpakoli

Accordion Rules

Accordions have become one of the more popular UI elements due to their penchant for being space savers. This pure CSS take on the feature includes horizontal rules as part of the usable interface. A rare instance of the good old <hr> being used for functional purposes.

See the Pen
Accordion Effect with Horizontal Rules
by Will Boyd

Simple Style Variations

This snippet offers up 9 interesting horizontal rules that can fit a variety of styles and use cases. Examples include the usage of symbols, centered text, colors and border patterns. There’s something here for everyone.

See the Pen
Some HR Styles
by Mark Murray

Medium Style with Accessibility

Placing text inside a horizontal rule can be tricky. It often involves techniques that aren’t very accessible. This snippet is different, as it utilizes content from <h2> tags. It not only offers a cool Medium-style aesthetic, but it’s friendly to screen readers as well.

See the Pen
Accessible Medium Style Dividers
by Zoë Bijl

Decorative and Minimal Designs

Perhaps you’d like your dividers to look nice without distracting from the rest of your content. This collection of 18 simple styles is for you. The effects are well-executed without going over-the-top with flashy features.

See the Pen
18 Simple Styles for Horizontal Rules (hr CSS Design)
by Ibrahim Jabbari

Charlie Brown’s Shirt or Bart Simpson’s Hair?

When viewing this zig-zag pattern, one conjures up images of cartoon characters. But its also a clever bit of code. It’s a combination of two <hr> tags with angled CSS gradients. Now, which character does it best represent? Let’s go with Bart’s hair.

See the Pen
Zigzag Horizontal Rule
by m0cha

(Horizontally) Divide and Conquer

Sure, the default styling of a horizontal rule gets the job done – but where’s the fun in that? Take a cue from the examples above and create something that compliments all of your great design work.

Need even more inspiration? Check out our CodePen collection for more divider snippets.

The post 8 Horizontal Rules and Dividers Enhanced with CSS appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

A Guide to Overriding Parent Theme Functions in Your Child Theme

If you’ve had any experience working with parent and child themes in WordPress, you’ll know that the template files in your child theme override those in your parent theme. So for example if your parent theme has a page.php file and you create a new one in your child theme, WordPress will use the one in the child theme when displaying pages.

You might think that functions would work in the same way: create a new function in your child theme’s functions.php file with the same name as one in the parent theme, and it’ll take precedence. Unfortunately it isn’t as simple as this.

In this tutorial I’ll show you three methods you can use to override functions from the parent theme in your child theme:

  • pluggable functions
  • function priority
  • removing functions from the hook they’re attached to

How Functions in Parent and Child Themes Work

Before examining the methods for overriding functions in your child themes, it helps to understand how functions work in parent and child themes.

Firstly, you need to know that all of the functions in your parent theme will be run when you’re using a child theme. You don’t have to add anything to your child theme’s functions file to make this happen. This is different from CSS, where you have to manually include the parent theme’s stylesheet in the child theme’s stylesheet.

Another thing to know is that if your parent and child themes have functions with the same name, this will break your site—unless the function in the parent theme is a pluggable function (more on this shortly). This is why it’s important to use prefixes for all your functions, and to use a different prefix in parent and child themes—just in case.

However you can change the order in which functions are fired, and you can prevent functions from being fired altogether, as we’ll see shortly.

Pluggable Functions

Pluggable functions are something you code into your parent theme, so they won’t be any use to you if you’re working with an existing parent theme that doesn’t have them.

But if you’re writing your own parent theme, maybe as a starting point for future projects, or if you’re creating your own theme framework, it’s good practice to make your functions pluggable so that you can easily override them in child themes. It’s also a good idea to look through the functions that are written into the parent theme you’re using, as many of them, including the WordPress default theme, will have pluggable functions.

To write a pluggable function, you simply enclose it in a conditional tag to check if a function with that name has already been run:

So if you enclose the functions in your parent theme in a conditional tag like this, WordPress will check if there is a function with the same name in your child theme that’s already been run, and if that’s the case it won’t run the function from the parent theme.

Then when you come to write a function in your child theme which you want to override the one in the parent theme, you just give it the same name as the one in the parent theme:

WordPress will run the function in the child theme first, and when it comes to the one in the parent theme, it’ll check if it already exists and because it does, it won’t run it.

Function Priority

If you’re not using your own parent theme, or you’re using a third party one without pluggable functions, you’ll need another method.

When you write functions you can assign them a priority, which tells WordPress when to run them. You do this when adding your function to an action or filter hook. WordPress will then run the functions attached to a given hook in ascending order of priority, so those with higher numbers will run last.

Let’s imagine the function in the parent theme isn’t pluggable, and looks like this:

This function is attached to the init hook and hasn’t been given a priority. By default WordPress assigns a priority of 10 to functions which haven’t had a priority added, so to fire your function after it you use a number larger than 10. I tend to use 15 so I’ve got some breathing room in case I want to add another function between the two later on.

This means the function in your child theme would look like this:

Alternatively, the function in your parent theme may have had a priority assigned to it:

So you just need to make sure the priority you give the function in your child theme is higher:

Removing Functions From Hooks

Sometimes running another function after the first one isn’t enough to override it—you need to make sure the function in the parent theme doesn’t run at all. In this case, you can remove the parent theme function from the hook it’s attached to, using the remove_action() or remove_filter() functions. The one you use will depend on whether the function is attached to an action hook or filter hook in the parent theme.

So let’s return to our previous function in the parent theme:

To remove this function from its action hook and therefore prevent it from firing, you create a function in your child theme to remove it using remove_action():

However, this won’t work on its own—you need to attach this function to a hook which will fire after the hook which the parent theme function is attached to. This is because you can’t remove the action before it’s been fired. You can find details of the order in which actions are fired in the Codex.

Once you’ve done this, you can simply write an alternative function to replace the parent theme function in your child theme’s functions file, or you can do nothing if all you wanted to do was remove the functionality from the parent theme.

A Note on Priorities

Note that if you’re trying to remove a function using remove_action() or remove_filter() and the function has had a priority assigned to it, you must include the priority when removing it, or it won’t work.

So if the function in the parent theme looks like this:

… you’ll need to include the same priority value when removing it:

Advanced Parent and Child Theme Functions: Plugable Functions and Extending Functions

As well as the above, there are some specific scenarios in which you might want to take things further. The following tips are in response to questions that have been asked in the comments below.

How to Partially Override a Function in the Parent Theme

Strictly speaking, you can’t partially override a function. You can only let it run, or disable it. But there are workarounds.

The first is if the function you want to partially override itself contains functions that are pluggable. You might find that the function includes a call to another pluggable function from within the parent theme.

If this is the case, you can override any functions within the main function, if that’s the code you want to change. Do it by writing a new version of the pluggable function that either contains just a return statement or contains alternative code. Note that this will only work if the function is pluggable—if it isn’t, your site will break. 

However this method only works if you’re lucky enough to need to override functionality within a function that’s provided by another contained and pluggable function.

In the vast majority of cases, this won’t be an option. In which case, you’ll need to deactivate the function and replace it with a function of your own, with a different name. To create your new function, you can copy and paste the function from the parent theme into the child themes functions.php file, and then edit it to remove the code you don’t want.

You’d use two of your own functions: one to remove the original one, and the second to provide new code, like this example overriding a parent theme called on the init hook:

How to Override Non-Pluggable Functions

Functions in the parent theme that aren’t pluggable can’t be overridden in any special way. So you’d have to use the method above, removing the function from its action hook and then writing a new function on the same action hook that provides the new code.

Don’t give the function in your child theme the same name as the function from the parent theme as this will break your site!

How to Extend Parent Theme Functions

Functions are generally not designed to be extendable. However there may be an exception if your function includes calls to other pluggable functions.

If this is the case, you can extend the function by overriding the functions within the main function, without having to replace the whole of the main function.

In most cases, you can only extend a parent theme function in one of three ways:

  • If the function you want to extend is pluggable, copy it into your child theme and add extra code to extend it.
  • If the function isn’t pluggable, remove it from its hook using remove_action() and write a new function (with a different name) on the same hook with extra code. You might want to copy code from the original function into your new function and edit that.
  • Write a second function which is called on the same hook as the first function and adds extra code that will run before or after the first function. Use the priority parameter in add_action() to specify whether your second function will run before or after the original function.


Overriding functions in a parent theme is more complicated than overriding template files or styling, but it can be done. Here I’ve shown you three methods for doing this:

  • If you’re writing your own parent theme, or using one which has them, use pluggable functions so that a function in the child theme with the same name as one in the parent theme will replace it.
  • Assign higher priorities to functions in your child themes to ensure they’re run after those in your parent theme.
  • Use remove_action() or remove_filter() to remove functions in the parent theme altogether.

Which method you use will depend on the way your parent theme is coded and whether you need to remove the parent theme function altogether or just run another function after it to override it.

from Envato Tuts+ Code – WordPress

WP_Query Arguments: Categories and Tags

In the earlier parts of this series, you’ve learned how WP_Query is structured and what its properties and methods are. The next stage is to understand the various arguments you can use with it and how best to do so.

WP_Query has a large number of possible arguments, which makes it extremely flexible. As you can use it to query just about anything held in your wp_posts table, it has arguments for every permutation of query you might want to run on your content.

In this tutorial I’ll look at two types of argument for categories and tags:

The arguments for these two taxonomies are similar but do have some differences you need to know about if you’re going to use them effectively.

A Recap on How Arguments Work in WP_Query

Before we start, let’s have a quick recap on how arguments work in WP_Query. When you code WP_Query in your themes or plugins, you need to include four main elements:

  • the arguments for the query, using parameters which will be covered in this tutorial
  • the query itself
  • the loop
  • finishing off: resetting post data

In practice this will look something like the following:

The arguments are what tells WordPress what data to fetch from the database and it’s those that I’ll cover here. So all we’re focusing on here is the first part of the code:

As you can see, the arguments are contained in an array. You’ll learn how to code them as you work through this tutorial.

Coding Your Arguments

There is a specific way to code the arguments in the array, which is as follows:

You must enclose the parameters and their values in single quotation marks, use => between them, and separate them with a comma. If you get this wrong, WordPress may not add all of your arguments to the query or you may get a white screen.

Category Parameters

Let’s start with category parameters. The options you have here are as follows:

  • cat (int): use category id.
  • category_name (string): use category slug (NOT name).
  • category__and (array): use category id.
  • category__in (array): use category id.
  • category__not_in (array): use category id.

Note that for none of these do you use the name of your category. Even the category_name parameter takes the slug as its value, not its name. I tend to use this one rather than the ID as when I come back to my code at a later date, slugs are easier to identify than IDs. However if you think your site users might change the slug for one or more categories, I recommend using the ID to avoid any problems.

Let’s take a look at how you use each of these.

The cat Parameter

The cat parameter is straightforward: just use a single category ID or a string of category IDs.

Querying for one category looks like this:

Querying for multiple categories looks like this:

The above will tell WordPress to fetch posts that are in any of the categories listed. If you want to find posts in every one of an array of categories, you use the category_and parameter, of which more shortly.

You can also use the cat parameter to find posts that are in one category but not another, by using a minus sign before the category ID as follows:

The above would query posts in category 12 but not in category 13.

The category_name Parameter

The category_name parameter uses the category slug, not the name (confusing, I know!). Again you can use it with a single category or with a string of categories to find posts that are in any of the categories.

To query posts in a single category you add:

And to find posts in one or more of a number of categories, use this:

As with the cat parameter, this won’t find posts that are in all of the categories, but it will find posts in any of the categories.

The category__and Parameter

If you want to find posts that are in all of an array of categories, this is the parameter you use. It takes the category IDs for its value. So to find posts in all of three categories, you would use:

Note that this uses an array not a string, so you code it differently. The parameter has two underscores in its name: use just one and it won’t work.

The category__in Parameter

The next parameter looks for posts in one or more of an array of categories. It actually works in the same way as the cat parameter, and also takes the category ID as its value.

So to query posts in one or more of an array of categories, you would use:

The above would fetch posts from one or more of these categories.

The category__not_in Parameter

The category__not_in parameter does as you would expect: it queries posts which are not in a category or an array of categories.

To exclude posts from one category, you would use the following:

And to exclude posts from an array of categories:

This would exclude posts from any of these categories.

Tag Parameters

Tags have slightly different parameters from categories: you can’t work out what they might be based on your knowledge of category parameters, I’m afraid!

The tag parameters are:

  • tag (string): use tag slug.
  • tag_id (int): use tag id.
  • tag__and (array): use tag ids.
  • tag__in (array): use tag ids.
  • tag__not_in (array): use tag ids.
  • tag_slug__and (array): use tag slugs.
  • tag_slug__in (array): use tag slugs.

Let’s look at each of these.

The tag Parameter

The tag parameter takes the tag slug for its value and can be used to find posts with one tag or with any of a string of tags.

So to find posts with one tag you use:

And to find posts with tags from an array of tags:

Note that the above queries posts with any of the tags in the array, not all of them.

The tag_id Parameter

The tag_id parameter works in a similar way to the cat parameter: it takes the tag ID and can be used with a single tag or multiple tags.

To find posts with a single tag you use this:

To find posts with one or more tags from a string of tag IDs:

You can also use tag_id to exclude tags, either when using it for single tags or multiple tags.

So to query posts except those with a given tag, you’d use:

While to find posts with one of two tags but without another tag, you’d use this:

So the above will query posts with either or both of tags 21 or 23 but not tag 22.

The tag__in Parameter

This parameter lets you find posts with one or more of an array of tags. It works in the same way as tag when used with an array:

This will query posts with any or all of the tags listed. If you want to find posts with all of the tags, you use tag__and, which I’ll cover in a moment.

The tag__not_in Parameter

The tag__not_in parameter lets you query posts which don’t have a given tag or array of tags.

Use it like this to exclude one tag:

Note that you still need to use an array even though you’re only using one tag. For more tags, use:

This will query posts that don’t have any of the above tags.

The tag_slug__and and tag_slug__in Parameters

These two parameters behave in exactly the same way as the tag__and and tag__in parameters, except that you use that tag slug in your arrays instead of the tag ID.

So for example to find posts which have both of a pair of tags, you use tag__slug_in:

This finds posts with any of these tags. You could also use the tag parameter with a string of tag slugs to achieve the same result.

To include posts with all of a set of tags, use tag_slug__and:

Instead of querying posts with any of the tags, this only queries posts that have all of the tags.

Advanced Use of Categories and Tags with WP_Query

Let’s take a look at some advanced uses of category and tag arguments with WP_Query, based on questions raised in the comments to this article.

List Subcategories of a Category

To list the subcategories of a given category (with a link to the subcategory archives for each), you wouldn’t use WP_Query. Instead you’d use wp_list_categories(), which outputs a list of categories with links to their archives. To output the subcategories of a specific category, use the ‘child_of' argument.

Here’s the code:

Substitute the 5 in the code above for the ID of the category whose subcategories you want to list.

Display The First Post from a Category in One Element Then More Posts in Another Element

This is a useful technique if you want to highlight the most recent post from a category, maybe including the excerpt and featured image for that post, and then show a list of the next few posts from the category.

You do this by using the 'posts_per_page' and 'offset' arguments.

The simplest way to do this is to write two separate queries. The first uses 'posts_per_page' => 1 to just fetch the first post. The second query uses'offset' => 1 to fetch posts after the first post, and also uses 'posts_per_page' to define how many posts to output.

Here’s the code:

An alternative method, which involves fewer calls to the database, is to write one query and then loop back through that query a second time, rewinding the query and using a variable to make sure the post output by the first loop isn’t repeated. 

You can find more about using one query for multiple loops in our tutorial on the subject.

Display Posts From Multiple Categories

If you want to display posts that are in a given category and also in one or more of your other categories, you use the cat and category__in arguments. For each of these you use the category ID.

Imagine you want your posts to be category 1 and also in one or more of categories 2, 3 and 5.

Here are the arguments you would use for this:


Querying your posts by category and/or tag is something there’s a good chance you’ll have occasion to do with WP_Query. By using the arguments above, and combining them where necessary, you can create powerful arguments to extract exactly the data you need from the database.

If you want to learn more about WP_Query, check out some of my other posts in the Mastering WP_Query series.

from Envato Tuts+ Code – WordPress