Category: Theme

Posted on

The Difference Between Taxonomies, Categories, and Tags (Oh My!)

Category Image 052

A common question for new WordPress users is, “what’s the difference between categories and tags?” Like everyone knows what a “category” is, but the idea of “tags” can seem very similar. And then you throw in related WordPress concepts like “taxonomy”, and things can get confusing very quickly. But no worries, it’s really not that complicated. Let’s break it down..

Contents

Taxonomies

In WordPress, Taxonomies are used to organize posts. There are different types of taxonomies. The two most familiar types of Taxonomies are Categories and Tags. Both are enabled by default when you install WordPress. So when you create a post, you can choose which categories and tags should be assigned.

Currently, WordPress provides three taxonomies by default:

  • Categories – hierarchical taxonomy
  • Tags – non-hierarchical taxonomy
  • Post Formats – non-hierarchical taxonomy

In addition to these default taxonomies, a WordPress site also may support some Custom Taxonomies that are provided by plugins. For example, an e-commerce plugin may add custom taxonomies for things like “Product Type”, “Price Range”, “Brand Name”, or any other attribute. And for each of these taxonomies, you can add any number of terms.

Note: You can learn more about Post Formats at WordPress.org.

Notice in the above list of default taxonomies, that Categories are hierarchical while Tags are not. This means that categories can have sub-categories (aka child categories), like this:

  • Hats
  • Shirts
  • Pants
  • Shoes
    • Fast shoes
    • Slow shoes
    • Nice shoes
      • Smooth shoes
      • Fancy shoes
      • Funny shoes

Categories can have as many sub-categories as needed. Tags on the other hand, are non-hierarchical, so there are no child tags or grandchild tags. It’s a “flat” taxonomy. Further, any custom taxonomies may be either hierarchical or non-hierarchical, depending on how they are configured.

Note: Some themes also provide their own custom taxonomies, although they shouldn’t. According to WordPress best practices, adding custom taxonomies is “plugin territory”. Only plugins should provide custom taxonomies.

Simple example

To illustrate, say we have a post that describes a store product, like shoes. It might have the following taxonomies (left column) and terms (right column):

Post = Shoes that don't leave any footprints

	Category:      Store
	Tags:          stealth, speed
	Product Type:  shoes
	Price Range:   $100-$300
	Brand Name:    Rolf Ahl

This shows how taxonomies are used to define relationships between posts. So on the front end, visitors can sort items based on their category, tags, product type, and so forth. Indeed, any Aspect of your posts can be classified and organized with taxonomies.

Real-world example

To check out an effective use of taxonomies, visit Amazon.com and do a search for something like “shoes”. Then look in the sidebar at all the different ways to sort the results. Each of those sidebar sections (like “Shoe Size” and “Shoe Width”) are added via custom taxonomies. Amazon doesn’t actually run on WordPress, but it’s a great example of taxonomies.

Search results for 'shoe' at Amazon.comAll the sidebar options are examples of custom taxonomies.

As shown here, taxonomies enable your visitors to easily sort through your posts and find related and similar content.

Categories vs. Tags

As discussed, both Categories and Tags are types of Taxonomies. The only technical difference is that Categories are hierarchical, while Tags are not. So with categories, you can create sub-categories (or child categories). With tags, you cannot. Tags always have a “flat” organizational structure.

Other than that, the main difference between Categories and Tags has to do with scope. With WordPress:

  • Categories are used to broadly organize posts into groups
  • Tags are used to denote any specific post characteristics

I know that’s a bit abstract, so let’s go through some “real-world” examples..

Categories: real-world example

Let’s say it’s our job to clean up a house that has tons of junk in it. There are piles of stuff all over the place, and it’s our job to go in there and clean it all up. First we create two piles: “stuff that stays”, and “stuff that goes”. Those two piles represent categories.

After hauling away the “stuff that goes” pile, it’s time to organize the “stuff that stays”. Again, we use categories to make things easier. There are many ways we could categorize all the remaining items. We could organize by room, so our categories would be like:

  • Living Room
  • Kitchen
  • Bathroom
  • Bedroom

Makes sense, right? It’s the same idea with WordPress posts. Categories simply group similar types of posts together. For the purpose of organizing content and making it easier for visitors to find.

Categories: another example

Generally categories represent broad similarities among items, but you can get as specific as you’d like. For example, it’s common for a web-development site to group posts into the following categories:

  • CSS
  • HTML
  • PHP
  • JavaScript
  • Etc.

..such that each coding language gets its own category. That’s gonna keep posts broadly organized based just on the language. All posts about CSS go into the “CSS” category. All posts about HTML into the “HTML” category, and so forth.

But you can get more specific with categories. Say our tutorial site has a LOT of posts on all the coding languages. We might want to refine our categories to include version information, for example:

  • CSS
    • CSS 1.0
    • CSS 2.0
    • CSS 3.0
  • HTML
    • HTML 4.0
    • HTML 5.0
  • Etc.

Because categories can be hierarchical, we can get as specific or as broad as is necessary to organize your posts. And to organize things even further, we can throw tags into the mix..

Tags: real-world example

Returning to our “hoarder house” example, let’s look at how we can use tags to help further organize things. Recall that all the stuff currently is organized by room. So our categories are:

  • Living Room
  • Kitchen
  • Bathroom
  • Bedroom

In each room, we can further organize things by adding a tag to each item. For example, we tag the “chairs”, “tables”, “desks”, “electronics”, “clothes”, “food”, “towels”, and so on. And the nice thing about tags is that they can be added across categories. There may be “chairs” in both Living Room and Kitchen categories. Or there may be “electronics” in all categories. So when visitors arrive at your house, they can click the “food” tag and eat all of your food, regardless of which room it’s in :)

10-second summary

The difference between Taxonomies, Categories, and Tags:

  • Taxonomies are used to organize posts. WordPress provides two default Taxonomies: Categories and Tags. It’s also possible to create Custom Taxonomies. Taxonomies may be hierarchical or non-hierarchical.
  • Categories are used to broadly organize posts into groups. Categories may have a hierarchical structure.
  • Tags denote any specific post characteristics. Tags are non-hierarchical, flat organizational structure.

Resources


Posted on

How to Prevent Changes to Plugins, Themes, and WordPress Core Files

Category Image 091

This is a common question I get from folks in the WordPress community. How can I “lock things down” and prevent any changes to plugins, themes, and WordPress core files. For example, how to prevent any themes and/or plugins from being updated or deleted, and how to prevent any new plugins from being installed. This is useful for certain projects where it’s necessary to lock a website to a static version. Fortunately, WordPress makes this super easy with a couple of PHP constants. Let’s take a quick look..

Contents

Prevent Changes via File Editor

Did you know that WordPress provides a Plugin File Editor and Theme File Editor in the WP Admin Area. You can find them:

  • Under the Appearance menu ▸ Theme File Editor
  • Under the Plugins menu ▸ Plugin File Editor

These tools enable admins to make changes to any plugin or theme files. Huge convenience for those that need it. For those that don’t, you can disable any changes via the file editors by adding the following line to your site’s wp-config.php file, which resides in the root WordPress directory:

// disable file changes via plugin and theme editors
define('DISALLOW_FILE_EDIT', true);

Once this line is included in the site’s configuration file, all file-editing via the Admin Area will be disabled. No menu items, no editing, nada. It’s another layer of security that effectively minimizes your site’s attack surface, so sensitive files cannot be modified by any user, including admins. This helps to protect against any changes that could compromise or crash your site.

Note: As explained at WordPress.org, disabling the file editors via DISALLOW_FILE_EDIT constant may affect any plugins that check for sufficient capabilities using current_user_can('edit_plugins'). Plugins should check if the constant is set, and if so display an appropriate error message.

Prevent All Changes via Admin Area

While the previous technique disables changes to plugins and themes via the file editors, this next technique prevents all changes to any files from inside the Admin Area. This includes:

  • Updating, deleting, installing plugins
  • Updating, deleting, installing themes
  • Updating the WordPress core files

It also includes changes made via the plugin and theme file editors. Basically this technique staticizes a site to its current version. So if that sounds like you, here is the magic code to lock it down:

// disable all changes to all files via admin area
define('DISALLOW_FILE_MODS', true);

Once this line is included in the site’s configuration file, all changes (installing, updating, deleting) to plugins and themes will be disabled. Note that the above line also disables updates to the WordPress core files, so trying to update WordPress via Dashboard ▸ Updates will not work.

Of course, it always is possible for changes to be made directly on the server via SFTP or similar method. But any file changes from within the Admin Area will be disabled completely.

Note: As mentioned, the above line disables all changes from anywhere within the Admin Area, including the file editors. So you do not need to set both DISALLOW_FILE_MODS and DISALLOW_FILE_EDIT. Just including DISALLOW_FILE_MODS takes care of everything.
Note: Be careful when adding DISALLOW_FILE_MODS to your site’s wp-config.php file. WordPress needs to be able to make changes in order to keep plugins, themes, and core files current via updates. So only disable changes if you are 100% certain that you don’t want any updates on your WordPress site.

Posted on

15 Must Have Pinterest-Like WordPress Themes

Best Wordpress Themes 1

Must Have Pinterest-Like WordPress ThemesPinterest is still a popular social network that allows you to save websites and images as Pins, which are then displayed in Boards that you can name and customize. This is really great for saving visual items for inspiration. Whether you’re planning a wedding or a home remodel, Pinterest can serve you well. Since the […]

The post 15 Must Have Pinterest-Like WordPress Themes appeared first on WPExplorer.

Posted on

How to Check if Post has Taxonomy Term

Category Image 036

Something I did not know about when working with Custom Post Types and Custom Taxonomies. Normally when checking if a regular WP Post belongs to a specific category, we can use the WordPress function in_category(). But that does not work with Custom Post Types. To check if a CPT belongs to a specific term in a Custom Taxonomy, use has_term() instead.

Check if WP Post belongs to specific category

To check if the current post belongs to a specific category, use in_category(). For example in your theme's single.php template, you can do this:

if (in_category(1)) {
	
	// post is in category with ID = 1
	
}

Here we are checking if the post belongs to category with ID = 1. You can change that to any category ID, name or slug, or an array containing multiple values.

Here is an example where mutliple categories are checked:

if (in_category('donuts')) {
	
	// post belongs to "donuts" category
	
} elseif (in_category(array('coffee', 'beer'))) {
	
	// post belongs to either "coffee" or "beer"
	
} else {
	
	// post does not belong to any of the above categories
	
}

Notice the use of an array in the elseif condition. You can specify as many categories as needed using an array of category IDs, names, or slugs.

Check if CPT belongs to specific taxonomy term

Now for the main point of this tutorial. To check if the current post belongs to a specific term in a custom taxonomy. For example, if we have a taxonomy named download_category and want to check if the current post belongs to the term combo, we can do this:

if (has_term('combo', 'download_category')) {
	
	// post belongs to "combo" in "download_category" taxonomy
	
}

When calling has_term(), the first parameter is the name of the term, and the second parameter is the name of the taxonomy.

To check multiple terms, use an array of term IDs, names, or slugs. For example:

if (has_term(array('combo', 'book', 'deal'), 'download_category')) {
	
	// post belongs to "combo", "book", or "deal" in "download_category" taxonomy
	
}

So this example will check if the current post belongs to "combo", "book", or "deal" in the "download_category" taxonomy.

Bonus Tip: Check for *any* taxonomy term

To check if the current post belongs to any term in a given taxonomy, simply leave the first parameter empty/blank. Example:

if (has_term('', 'download_category')) {
	
	// post belongs to a term in the "download_category" taxonomy
	
}

Here we are checking if the current post belongs to any term in the "download_category" taxonomy.

That's the thick and thin of it.

Bottom line is just remember:

  • Check post for category — use in_category()
  • Check post for tax term — use has_term()

Posted on

10+ Examples of Responsive Websites That Got It Right

Best Wordpress Themes 1

When designing a new website, there’s a long list of specifications and requirements you have to fulfill. It’s just the nature of web design these days. And at the top of that list sits responsive web design.

Thankfully, high-quality WordPress themes like BeTheme make it insanely easy to check off all the technical requirements you’re expected to meet — including responsive design. But why does it matter so much?

Well, for starters, more than half of all website traffic takes place on mobile according to data from StatCounter.

While desktop has put up a good fight for a couple years, mobile has prevailed as the winner. It will continue to do so, too, considering how much more convenient it is to access the web from the palm of one’s hand.

Plus, Google has made it clear that it rewards responsive web designs and mobile-friendly websites with better search rankings, so there’s no hiding from it now.

Responsive web design is a must.

Just keep in mind that following the rules for good mobile design doesn’t mean you ignore desktop users. By prioritizing the mobile experience, you can design more beautiful and efficient websites for all users.

Let’s look at some examples that demonstrate how to do this well.

Responsive web designs that encourage leaner desktop experiences

Just because you have more space to work with when designing for desktop users doesn’t mean you need to make the most of every pixel.

In fact, as Internet-enabled devices have grown smaller in size, it’s encouraged many designers to create leaner and more efficient experiences on desktop.

Take the website for designer/developer Rob Grabowski, for example.

This is how his website appears on a mobile screen:

With minimized logo and navigation out of the way, this allows the focus to remain on his photo and welcome message. Desktop visitors encounter the same thing:

This consistency in design is great because it enables visitors to seamlessly transition from viewing a website on one device to another (which happens often).

Mobile web designs that improve the decision-making process

Consumers today struggle with an overabundance of choice. It might be easier to find that thing or service they’re looking for, but that doesn’t make choosing between similar options any easier.

One of the benefits of responsive design is that it forces web designers to create websites in a modular fashion so that, as the screen size shrinks, each section falls in line beneath the others.

In turn, this makes it easier for customers to review options one-by-one. BeRepair, one of the 500+ pre-built sites from BeTheme, demonstrates this point really well:

This is one of the services offered. Notice how the responsive layout allows the visitor to really focus on the details before them and not get distracted by too much information.

This works well for other types of websites. Take, for instance, the BeRestaurant pre-built desktop site:

It’s a great-looking restaurant website. The mobile counterpart looks just as great, but minimizes the distractions so the core elements can really shine:

Rather than try to fit the menu to the right of the food images, the responsive website maintains the integrity of the original design by tucking it into the hamburger menu icon in the top-right.

Again, this is all about giving your visitors the ability to pause and really focus on the key actions you’re asking them to take. A navigation bar in full view would only distract from that.

Responsive designs that cut out the excess

Think about the last time you went to an art gallery or museum and the kinds of paintings you encountered:

  • The landscape murals that have a central focus but beautiful details surrounding it.
  • The portraits with a singular focus that’s chock-full of intimate details.

What’s cool about responsive websites is that they allow us to display the same web page in both formats.

Desktop screens thereby display landscape murals and mobile screens display portraits. But it’s important to know where the excess is in the desktop view so you can trim it back enough to make the mobile experience worthwhile.

For instance, this is the desktop site for BeITService:

This is a great looking hero banner on the home page. It’s well-balanced, the colors are carefully chosen, and the message is crystal-clear.

This is a good example of how smart designers have become when it comes to choosing responsive images for websites.

Here’s that same image and banner from above, but now displayed on mobile:

The image may not appear in full, but there’s nothing lost in this translation from desktop to mobile. What’s more, the message remains front and center.

Culturally Connected does something similar:

On desktop, it shows an elaborate background graphic that enhances the overall design. On mobile, however, it turns into this:

Even with the image now reduced and placed at the bottom, it’s still a striking design that allows the message to really shine through.

Another great example is BeTutor. This is how the desktop version looks like:

Here we have the main title and some more info using smaller text. In order not to cramp the mobile view, the design omits the extra content and focuses on the primary message:

The mobile view stays uncluttered without loosing any of the important subject matter that reveals the type of service offered.

Responsive websites that leverage their space

While a small screen requires reducing content in most of the cases, some responsive web designs leverage the space and use the different ratio to their advantage.

Take 1987 Masters for example:

While the desktop version focuses on their main tagline, the mobile version makes use of the vertical space and shows more content, giving the mobile visitor an option to learn more about the company right away:

So a mobile design don’t necessarily have to show less content in order to work well.

The mobile screen ratio allows for making use of the vertical space, like it’s shown in this example of BeCosmetics. Check out the desktop view:

The mobile view has more vertical space so the introductory content can be shown along with the button that invites the user to explore all products:

Once again, these examples demonstrate that less space doesn’t need to mean less useful content for the mobile website user.

Responsive websites that enhance readability

When laying out text on a desktop website, you have to be careful about how much you show to a reader at once. Put too many words on a line or not include enough spacing between letters, and your visitors might skip reading it altogether.

It’s a tricky balance to maintain and usually requires visual elements to balance out the text. Take, for example, the BeDanceSchool site:

Thanks to the funky designs and eye-catching graphics around the text, it’s easy for visitors to focus on the content and read it all the way through.

This won’t work on mobile though, which is why it’s important to understand the strengths of each screen size. Here you can see how that same text from above should be handled on mobile:

The design is paired back immensely so that all the visitor can see is the content. But that’s okay because the text is still beautifully styled which helps keep attention.

That said, text presented to mobile visitors doesn’t always have to be so heavily styled. If you select the right font size and type, you can create something that’s readable and engaging just as Base Coat does:

Just be mindful of the vertical length of text on mobile. While it might be easy to see where it ends on desktop, it can seem daunting on mobile if it appears to go on and on.

Mobile sites that put a spotlight on visual content

Responsive web designs aren’t just useful for websites with lots of text. Because of the way content responds to smaller screen sizes, visual storytelling elements look great on mobile, too.

Here’s what visitors see on the BeBand website on desktop:

Mobile screens don’t have the ability to play with balance as in the example above, but they do have the ability to shine a spotlight on the images you’ve chosen:

Websites that contain eye-catching images like this one would certainly benefit from responsive web design.

It’s not just static images that this works with either. The Scott Resort, for example, invites first-time visitors to watch a video:

Regardless of what kind of device the visitor is on, the video automatically conforms to the width of the screen.

This is the video on desktop:

And this is the video on mobile:

With a mobile responsive design, you really allow your content to adapt to the device and experience your users want.

Mobile responsive sites that collect more leads

Although more website traffic comes from mobile devices, it’s still quite difficult to get mobile users to convert as much as they do on desktop. That’ll come with time, but we’re not there just yet.

In the meantime, your responsive site needs to be prepared to capture leads whenever it can to improve those conversion rates.

Let’s take a look at how this works.

This is the pre-built site for BeClub:

This “Newsletter” section stands out beautifully on the homepage. And because it’s so convenient (e.g. it’s light on text and requires only one field be filled out), it’s likely to get a ton of subscribers.

This is how that same subscriber form appears on mobile:

Again, it’s really well done — and the smaller, dedicated space on mobile might be an even more effective way to catch the attention of potential subscribers.

So, if you can design your responsive site to collect visitors’ email addresses, you’ll empower them to reconnect with your website from their preferred device. As a result, you can increase the number of conversions it gets.

Responsive web designs for the win

When WordPress users go looking for a theme to design their website with, they look for qualities like:

  • Ease of use
  • Cost efficiency
  • Features
  • Customizability
  • Overall design quality

It’s easy to take responsive web designs for granted because we see them everywhere, but, the truth is, not every WordPress theme is built with the mobile user in mind.

BeTheme is different. Each of its 500+ pre-built sites comes with mobile responsiveness baked in.

So, when you use BeTheme, you can spend less time stressing over how to make your website look like the responsive designs above and more time getting your new website online and in front of consumers.

10+ Examples of Responsive Websites That Got It Right was written by Bogdan Sandu and published on Codrops.