Websites that feature eCommerce or memberships are prime examples. Each plugin may store data in a different spot. Some create separate database tables. Others use the default WordPress locales.

Export plugins exist that help in some – but not all – circumstances. For example, you might be able to export customer orders. However, grabbing additional data not directly related to those orders may not be possible.

Writing a custom query is another option. But you’ll need to know your way around PHP and MySQL. Not everyone has the expertise to do so.

Artificial intelligence (AI) can help. As I discovered, tools like ChatGPT can do the dirty work. It simplified the process and saved me loads of time. Perhaps it saved my sanity as well.

Here’s how to use AI to get what you need from the WordPress database.

Before We Get Started

There are a few items we should mention before starting:

• Back up Your Site’s Database or Create a Local Copy of Your Site
  None of what we’re doing here should hurt your database. However, create a fresh backup – just in case.
• You can also create a local copy of your site for experimenting. That enables you to work without the risk of harming your production website.
• Have Access to a ChatGPT Account
  We’re using ChatGPT for this demo. Therefore, you’ll want to have access to a free account. You can follow along and experiment.

Other AI tools, such as Google Gemini, may also work. The point is to use an AI tool that will generate code.

Also, a warning: Use caution when generating code. AI tools can make mistakes! Review the code before using it.

What Are You Doing with the Data?
There are a couple of things you can do with the data you retrieve:

• Display the data on the front end of your site;
• Download a CSV file that contains the data;

You’ll want to determine this beforehand. The process is a bit different depending on your choice.

Oh, and you’ll also need access to your site’s database. Access to your theme is required for displaying data on the front end.

Retrieving User Data from Different Plugins

Now, onto our experiment. Let’s take a common sticking point and try to make sense of it.

Our fictional website has two purposes. We sell various products with WooCommerce. Customers come to our site, create accounts, and order from us.

On the other side of the coin, we also sell memberships. Our members pay for access to exclusive content. We use the Restrict Content Pro plugin to power this feature.

Both WooCommerce and Restrict Content Pro have reporting features. For example, we can find out how many members we have. Or the number of WooCommerce customers.

But what if we want to combine this data? There’s no straightforward way to do this. So, let’s see if AI can help.

Step 1: Find the Data You Want

The first step is to determine what data you want to retrieve. Then, you’ll need to find the data inside the WordPress database.

Our goal is to create a CSV export file that includes users who are:

• A customer in our WooCommerce shop AND…
• Have an active membership via Restrict Content Pro;

Data isn’t always easy to locate. In some cases, you may need to reference plugin documentation. Or contact their technical support. A thorough database search can help if all else fails.

In our case, WooCommerce and Restrict Content Pro create custom database tables. That will make our job a bit easier.

• WooCommerce table names use the ‘wp_wc‘ prefix.
• Restrict Content Pro table names use the ‘wp_rcp‘ prefix.

We’ll also want to bring in data from the ‘wp_users‘ and ‘wp_usermeta‘ tables. That allows us to tie customer and membership data to specific users.

With that in mind, we’ll look for the following information:

Step 2: Ask ChatGPT to Create a Database Query

Next, we’ll ask ChatGPT for some help. We’ll want to provide a clear explanation of the task.

Here’s the prompt I used:

I'd like to create a MySQL database query for a WordPress website. I only want to retrieve users who have both a WooCommerce Customer ID and a membership via Restrict Content Pro.

Here is the data I'd like to retrieve:

From the wp_users database table:
ID

From the wp_usermeta database table:
Meta Key: first_name
Meta Key: last_name

From the wp_wc_customer_lookup database table:
customer_id

From the wp_rcp_memberships database table:
status
object_id

Step 3: Get the Response

ChatGPT’s response included a code snippet and a detailed explanation of it (view the full response). The snippet joins multiple database tables together to produce a single report.

So, how do we see if it works? We can run the query in a tool that connects to the site’s database. I’m using a local website that includes AdminerEvo.

You could also use phpMyAdmin, MySQL Workbench, or similar apps. ChatGPT can even provide instructions for whatever app you’re using.

I’ve pasted the query into the SQL Command screen inside AdminerEvo.

Step 4: Study the Results

The results are in! Our fictional website has 198 users. 15 of them have a paid membership. There are also 200 product orders.

So, how many are WooCommerce customers and Restrict Content Pro members? A grand total of seven.

The query results returned the columns we requested. From here, we can tweak things further or export the data.

Going Further with AI

Our example query may seem simple. However, bringing together data from multiple plugins is challenging. A custom solution is often the only solution.

I’m no coding expert. Thus, figuring out how to get data became frustrating. Thankfully, AI has proven to be a terrific tool for the job.

It’s one of the areas where this technology shines. Many of us struggle to write this sort of code on our own. Writing a prompt describing what we want isn’t so bad, however.

There are also opportunities to take things further. We could change our prompt to display data on a WordPress page. Or return data relevant to the currently logged-in user.

A working knowledge of PHP and MySQL can take you a long way. So, experiment and see what you can accomplish. And be sure to add up all the time you save in the process!

The post How to Use ChatGPT to Export Data from a WordPress Database appeared first on Speckyboy Design Magazine.

But with that flexibility also is the reality that it’s easy to do things the “wrong” way. Now, in this case, “wrong” means that something is either inefficient or a bit of a pain to maintain down the road. While it may work in the sense of being functional, there are usually better ways to get things done.

Let’s have a look at five of the more common mistakes found in theme development, along with alternatives that will save you future headaches.

1. Using Absolute URLs in Templates

If you’ve ever looked at the HTML code a WordPress page or post produces, you’ll notice that both images and internal links use absolute (full) URLs. But this isn’t the best way to get things done when adding code to your theme templates.

As an example, let’s say you are developing a website that is using a temporary URL. A hardcoded absolute URL in a template means that you’ll have to manually make code changes when you are ready to launch the site on its permanent domain. While this can be done, it’s too easy to forget all of the spots where this type of code could be lurking.

WordPress has built-in ways to determine the correct URL – pulled right from the Settings > General area of the Dashboard.

For a link, echoing esc_url( home_url() ) will provide a full path to the home page. So, instead of explicitly placing the URL in your code, you could add a simple link back to your home page like so:

<a href="<?php echo esc_url( home_url() ); ?>" />Home</a>

What’s more, you can also use this to point to secondary pages. For example, if we wanted to link to our site’s About Us page, we could use the following code:

<a href="<?php echo esc_url( home_url() ); ?>/about-us/" />About Us</a>

A similar snippet also works for images. This example pulls an image from our active theme’s /images/ subfolder:

<img src="<?php echo esc_url( get_stylesheet_directory_uri() ) ; ?>/images/hello.png" />

2. Adding Scripts and Styles Directly to a Template

Using third-party scripts and styles with WordPress is a world of its own. When you first start out in building themes, you may be tempted to simply place <script> or <style> tags, or even a Google Font embed code directly into your theme’s header. This is generally how things are done with static HTML sites, so it makes sense to do the same here.

But, like just about everything else in WordPress, there is a better way to go about it. Instead, take advantage of wp_enqueue_script() and wp_enqueue_style() – which add scripts and stylesheets to the correct spots for you. It also makes managing assets that much easier, as everything is called from your theme’s functions.php file.

Rather than reinvent the wheel here, the WordPress Theme Handbook has a fantastic guide on how properly add scripts and styles to your theme.

3. Calling Outside Instances of jQuery

In a related note, one of the hidden secrets of WordPress is that it already includes a copy of jQuery, along with several popular UI features. So, you don’t need to install jQuery or call it remotely. This makes it easy to take advantage of the popular JavaScript library and implement elements such as tabs, datepickers, dialogs and a whole lot more.

The only catch is that you have to specifically enable the items you want to use through your theme’s functions.php file. While that creates a bit of a learning curve, it also cuts down on bloat.

And, truth be told, it’s not overly difficult to implement a desired jQuery UI element. For example, to enable the use of jQuery UI Tabs, just add the following snippet to your functions.php:

function my_jquery_elements() {
   wp_enqueue_script( 'jquery-ui-tabs', array('jquery'));
add_action( 'template_redirect', my_jquery_elements ', 10 );

This tells WordPress to load in the element from its already-existing library. From there, design your tabs and define them as specified in the jQuery UI documentation.

4. Taking Customization Too Far

The ability to add custom fields and custom post types can make life for both developers and site content editors much easier. They offer convenience, better content organization and a more intuitive UX. But sometimes we take it too far.

I’m a huge fan of custom fields, for example. But even I admit that there have been times when I’ve customized a theme to the point of inflexibility. Fields are great for setups where we know exactly what content will need to be input – like the fields of a staff member profile.

However, it can get messy when there are inconsistencies in the types of content someone wants to add. Clients are notorious for having “minor” exceptions in content that can make using customizations more difficult. Conditional logic can account for some of this, but you can only take it so far before the UI gets out of hand.

There are no hard and fast rules for this type of customization. The only thing we can really do is use our best judgment about what should be customized and what can be better left to either the WordPress content editor or even a niche plugin. When we do add fields or post types, just know that things could change down the road and try to build with that in mind.

5. Failing to Comment Code

I’m going to make another admission here: Commenting code is not one of my strong points. It’s not that I don’t use comments at all, but it’s more that they aren’t very articulate. Usually, I’ll point out the start and end of particular items with not a ton of insight in-between. Should I be doing more? Probably so.

Commenting is important because it at least provides some reference points within the code. When digging through PHP or JS files that contain more than one thing, you’ll want to know where to find a particular item.

Even if you’re the only one who will ever edit that code, comments are highly recommended. If, for instance, you need to change something six months from now, it’s unlikely that you’re going to remember the exact spot you placed a snippet of code.

So, I’m not going to be a huge hypocrite and implore you to comment everything with great depth. But I will say that even a minimal effort here makes future maintenance easier for you or another developer that has to comb through your work.

Better Techniques Over Time

Building your own WordPress theme can be a great experience. But it does take a good bit of practice to pick up on the finer details of creating a well-coded theme and easy to maintain. The more experience you gain, the more your techniques will evolve.

I can honestly say that the first few themes I put together were nowhere near as efficient as they are now. And I’m also certain that they still might not be up-to-snuff when viewed by a truly expert developer. In that sense, our evolution is a constant one.

Finally, I’d like to note that I have personally made every one of the mistakes mentioned above. It’s only through trial and error, along with several visits to the Codex, that I found out how to start doing things the “WordPress Way.”

The lesson is that we’re all going to make mistakes. But each one provides us with a chance to learn and improve.

The post How to Avoid Common WordPress Theme Development Mistakes appeared first on Speckyboy Design Magazine.

If your website has a lot of content, you’ll first want to give some thought to how it’s organized. Without proper care, pages and posts can become a jumbled mess in the dashboard. Not only does it make a particular item harder to find later on, but it’s also a pain to rearrange after the fact.

That’s why it pays to have a plan. By mapping out your needs at the start of a project, you’ll be able to store content logically. It looks professional, helps with SEO, and will likely reduce your stress levels. What’s not to like?

Today, we’ll share some tips to help you effectively organize content within WordPress. Let’s get started!

What’s a Page? What’s a Post?

A default WordPress installation supports both Pages and Posts. Each has specific use cases, and they aren’t easily interchangeable. This can trip up even experienced users. As such, it’s worth pointing out some key differences.

Pages are geared toward standalone content. For example, your website may have an About Us page that contains a biography or a Contact page that includes a form.

These items could have parent/child relationships with other pages. Thinking of our example, the Contact page might have child pages for each location of a business.

Posts are generally best for creating a collection of similar content. If your website has a blog or needs to publish news items, posts are a perfect fit.

They can also be sorted into categories and tags, which helps to organize content by a specific subject. A post can belong to multiples of each, making it easier to narrow down large volumes.

Use Custom Post Types for Niche Content

While Pages and Posts are powerful, they’re rather generic in terms of labeling. Consider having all of your eCommerce products live alongside press releases in the Posts area. While it’s technically possible, it could make managing content confusing – particularly if you’re handing the site off to a client.

That’s where custom post types and taxonomies come in handy. Functionally, they’re no different than Pages and Posts. But they allow for housing and organizing a site’s niche content in a highly-tailored way.

WooCommerce is a prime example of these features in action. Install the eCommerce plugin and you’ll see a post type for Products appear in the WordPress admin menu. In addition, they can be further organized through custom taxonomies (product categories and tags).

Using custom post types and taxonomies creates a more intuitive management experience. When every type of content has a unique name and place, it’s easier to find, edit, and add to. It’s a level of flexibility you can’t get by lumping everything into the standard content types.

Plus, optimizing for search engines becomes simpler. You can target certain content and implement structured data that accurately represent products, events, or anything else you need.

The benefits of “going custom” may lead you to eschew traditional Posts altogether.

Take Advantage of Parent/Child Relationships

As we mentioned, WordPress pages are capable of parent/child relationships. Custom post types can also do so – if configured to use them.

This creates a hierarchy that makes related content easier to locate and manage within WordPress. Likewise, it establishes consistency in your site’s URL structure – another feature to boost your SEO.

For sites with dozens (or hundreds) of pages, parent/child relationships are a lifesaver. This method organizes the Pages listing screen according to those relationships. Without them, you might be scrolling through several screens trying to find a proverbial needle in a haystack.

When should you use these relationships? A good rule of thumb is to group pages that have something in common.

One method involves mimicking your site’s menu structure. If you have multilevel menus, for instance, you can arrange parent/child relationships that reflect this setup.

In practice, it means that the About Us page could serve as the parent for each subpage in that navigation tab. With that, both the listing and URLs follow a pattern. For example:

• About Us (parent – /about-us/)
• -Mission Statement (child – /about-us/mission-statement/)
• -Leadership (child – /about-us/leadership/)
• -Staff (child – /about-us/staff/)

By organizing your content identically on both the front and back ends, you’re simplifying the experience and making future edits a breeze.

Keep Your WordPress Content Neat and Tidy

While it’s easy enough to create content with WordPress, keeping things organized isn’t so obvious. And a bit of carelessness here can lead to a lot of frustration down the line.

Thankfully, WordPress offers features that can help you keep things neat and tidy. Standard Pages and Posts, along with custom post types and parent/child relationships allow you to organize content in any way you choose.

The key is to plan ahead. That requires careful thought to determine what content your site will feature and how to best organize it.

Doing it right requires a bit of work. However, it’s well worth the effort. The reward is a website where everything has its place.

The post How to Better Organize Content within WordPress appeared first on Speckyboy Design Magazine.

These are prime examples of why you’d want to customize or extend an existing WordPress plugin. It’s one of the really cool aspects of how the CMS allows us to build highly custom websites. We can take a plugin we’re already using on our site and integrate extra functionality or usability items that help us to do more.

And, while it may sound like something reserved for seasoned developers, extending a plugin doesn’t require a PhD. Depending on what you’re looking to achieve, a basic understanding of PHP, HTML, and CSS may be all you need to add some powerful features.

Today, we’ll review the process of choosing a plugin worth extending and some basics regarding what you can achieve.

Finding the Right Plugin

The first part of this process is also the most important: choosing a plugin. Sure, you can pick any one of the tens of thousands of available choices out there. And you may already have one in mind. But if you’re going to go to the trouble of adding extra capabilities, your ultimate pick is worth some serious consideration.

In many cases, a plugin you would consider customizing is playing a key role in what your website does. For example, an eCommerce plugin such as WooCommerce is going to be a major part of an online store. Just as an organization that holds a lot of events might heavily rely on a calendar plugin.

Regardless of what the plugin does, it’s vital to choose one that you can commit to for the long term. Therefore, you’ll want to look for software that:

• Is being actively maintained by its author;
• Has an adequate userbase, relevant to its niche;
• Has a track record of fixing bugs and responding to support requests;
• Offers, at the very least, a majority of the features and functions you need;

While these aren’t the only characteristics of a good plugin, they make for a solid place to start. Another great feature, for instance, would be a library of plugin-specific hooks that allow you to more easily tap into its various functions. It’s not required, but certainly a great help in the customization process.

Once you’ve taken the plunge, it’s time to start thinking about what type of extras you want to add!

Exploring Potential Add-Ons

The types of features you can build to customize a plugin are limited only by your skill and imagination. Just think of some of the amazing add-ons that developers have built for plugins such as Gravity Forms or Advanced Custom Fields. They prove that you can take an already great piece of software and make it even more useful.

However, our focus here is more on site-specific functionality rather than pie-in-the-sky endeavors. These items are narrower in scope and help facilitate what you want to do with your website. You might also want them to make a certain aspect of your site easier for you or a client to maintain.

Here are a few basic ideas that can help you brainstorm:

Adding More Types of Data

A default installation of your favorite plugin might not include all of the relevant data that your website has to offer. But through using WordPress custom fields (which can be created with plugins like the aforementioned Advanced Custom Fields), enables you to add just about any type of data you like.

Take, for example, a calendar plugin. Let’s say that your website uses one to post meeting information. Out of the box, that plugin may not allow you to easily add links to an agenda or other documents you’d like to share with users.

While you could manually add links to these items within the content of each event, that may not necessarily be the easiest thing in terms of maintenance. Instead, you could create a simpler process that is more user-friendly.

In this case, integrating a few custom fields into event posts can make a huge impact with regard to ease of use. It also adds a layer of consistency to both the front and back ends of your website. The back end is now easier to maintain, and the fields can be styled in your theme to help users find this important information.

Changing Plugin Output

Going beyond adding different types of data to go along with a plugin, you might also find a need to change its default output. There are a couple of situations where this could be of use:

It’s Not Relevant to Your Site

Sometimes, the language or terminology a plugin uses may not fit the subject matter of your website. For instance, if your site uses WooCommerce to take online donations – but doesn’t sell products – the cart’s terminology could seem confusing to users.

By default, WooCommerce calls everything you sell a “Product.” This is fine for a typical online store, but here it seems out of place. Thankfully, there are ways to change it.

Through the use of the gettext WordPress filter, it’s possible to change all instances of the word “Product” to “Donation”, along with any similar terms you deem appropriate.

Changing or Adding Data in Special Situations

There are often little bits of information that could really enhance the user experience of your site. Yet, they may only be relevant at specific times.

Sticking with WooCommerce, let’s say that you need to display important information to all products within a specific category. The goal, once again, is to streamline things so that you don’t have to manually add this message to each product.

A fairly simple conditional statement in your theme or a custom plugin can do the job. By combining the is_product() WooCommerce function and the has_term() WordPress function, you can target just the products in a specific category and add in the important information.

// Add important information to products within the "Jackets" category.
add_action( 'woocommerce_single_product_summary', 'jacket_information', 10);
// Check to see if it's a WooCommerce product and in the "Jackets" category.
 if ( is_product() && has_term( 'Jackets', 'product_cat' ) ) {
 
 // Now, provide the important information.
 function jacket_information() {
 echo 'Wear a jacket - it is very cold outside!';
 }
 }

Combining Features with Other Plugins

On occasion, you might want to combine all or parts of what one plugin does into another. This one may sound like it’s well beyond the scope of the word “simple” – which is a fair point. But, depending on what you want to do, it may be easier than you imagine. Here are just a few ideas:

• Use a slider plugin to dynamically display the best-selling products from your WooCommerce store.
• Provide access to purchase a product after a user completes a specific lesson on an online course.
• Include a survey form on a user’s account page – but only after they have been a part of your membership site for a month.

These types of combinations are often possible through plugin-specific hooks or ones that have been built into WordPress itself. The possibilities here are endless. All it takes is a little imagination and a willingness to experiment with code. Reading through documentation can provide you with some clues on how to put it all together.

A More Customized WordPress Website

Building a great website isn’t just a matter of implementing large, sweeping functionality. It’s often the smaller details that help to separate a great site from an average one.

WordPress plugins tend to help us with the big stuff. They provide the framework for us to get up and running. But with a little elbow grease, we have the ability to further customize things to match the needs and goals of our projects.

The post Simple Ways to Customize & Add Functionality to WordPress Plugins appeared first on Speckyboy Design Magazine.

Even so, we’re not out of the woods. To paraphrase the old saying: a website is only as secure as its weakest link. Beyond potential exploits due to code, the weakest link tends to be an uninformed user. Someone who, through no fault of their own, makes a bad choice that leaves their website vulnerable.

To use another cliché: the best defense is a good offense. In this case, it means being proactive when it comes to teaching clients about security best practices. Some things (like strong passwords) are universal, while others are more specific to WordPress itself. And that’s our focus for today.

With that, let’s review five things your clients need to know about WordPress security.

Don’t Install a WordPress Plugin Without Consulting a Professional

We get it: the temptation to install plugins is real. They are, after all, just a few clicks away.

But the risk is also real. WordPress plugins vary greatly in terms of quality and, thus, security. It’s not uncommon to find a plugin in the official repository that hasn’t been updated in a year or more. Maybe it’s harmless; maybe it’s not.

Because of this, web designers should encourage clients to perform a quick consultation before installing a plugin. Offer to take a look and review the particulars. This single step could prevent a nightmare scenario with regards to security and site stability.

There are several benefits. First, this keeps you in the loop as to what’s going on with the site. In addition, it allows you to point clients in the direction of good, reputable plugins. Not to mention that this trains clients to think before they click. That benefits everyone.

Create New User Accounts, Rather Than Sharing a Single One

Many organizations have more than one person who needs access to the WordPress dashboard. Too often, those users share a single account.

On the surface, this may seem like a simple matter of trust. And there certainly is an element of that. If a team member leaves the organization, there is the possibility of them still having access if the password hasn’t been changed. And a malicious person could do some damage.

The other real concern here is about device security. If you have, say, five people sharing a WordPress administrator account, all it takes is one of their devices to be exploited. For example, a keylogger on one user’s PC could compromise the account.

Therefore, it’s recommended that each user have their own account. This is easy to do within WordPress, and we can even create custom user roles that limit what someone can and can’t do.

Keep WordPress Core, Plugins and Themes Up-To-Date

Ideally, your clients will contract with you to handle software updates. But if they’re the ones taking responsibility, it’s important that they treat the issue very seriously.

As a developer, there are few things more irritating than troubleshooting a compromised website, only to log into WordPress and see that things are several versions out-of-date. It’s akin to leaving the front door of your house wide open, 24/7. You shouldn’t be too surprised when someone comes in and takes your fancy new TV.

The importance of keeping WordPress core, plugins, and themes updated cannot be overstated. Knowing that it still may be beyond the comfort level of some clients. That’s OK. Either they can hire you to deal with it or, at the very least, enable auto updates where possible.

Regardless of how updates are implemented, they must be taken care of. While it won’t guarantee security, it’s much better than the alternative.

Two-Factor Authentication Can Make a Big Difference

Adding two-factor authentication to WordPress is fairly simple. But it’s only worthwhile if stakeholders actually use it.

True, it’s not very convenient. Having to verify an email, a text message, or check a mobile app to login can be a major pain. But this extra step is vital. It puts up a huge barrier between a malicious actor and access to your website’s back end.

And the user experience is actually getting better. Some implementations are now combining device recognition with 2FA. This means that, so long as a user’s device is recognized, there won’t be a need to verify a login for a specified amount of time.

Plus, 2FA has become standard in so many places. Some online banking apps won’t let you login without it. There’s no reason why your website shouldn’t take advantage of this technology as well.

What’s Secure Today May Not Be Tomorrow

Regardless of the platform it runs on, a website is not a one-and-done affair. It requires frequent (if not constant) attention – with security playing a major role.

The web is constantly evolving. New technology gets old very quickly. And what was once thought to be a security best practice can sometimes be proven otherwise.

Because of that, website security is a challenge that really has no end. It’s a daily battle for small and large organizations alike.

The result is that websites need to change along with the times. When it comes to WordPress, that may mean replacing older security plugins with something better. Or doing away with abandoned themes and plugins to tighten things up. It could also require a change in hosts or server environments.

It’s important to understand that just because you’ve invested in security today doesn’t mean you won’t have to do so again tomorrow.

Educate Clients Today for a More Secure WordPress Website

Our clients often rely on us to provide some knowledge along with a killer website. And security may just be the most important subject we can educate them on.

Making an effort to do so from the beginning can pay long-term dividends. A client who understands how to keep their WordPress website secure is less likely to make one of those crucial mistakes. That alone may be the difference between cleaning up a hacked site and smooth sailing.

The post How to Educate Clients on WordPress Security Best Practices appeared first on Speckyboy Design Magazine.

But, if your client is responsible for managing content themselves, those pixels may no longer be so perfect after a while. You may find that your carefully crafted layouts and typography have been rendered a mess by a well-meaning user. Color contrasts designed for maximum accessibility become illegible.

For so long, this has been accepted as the natural order of things. We design pretty and functional things; clients make them slightly less pretty and functional.

It doesn’t have to be this way! With a little creative thinking, technical knowledge, and education, we can build WordPress websites that can withstand a bit more punishment – and even avoid such situations in the first place.

Assign the Right User Roles

One of the best ways to prevent a client from accidentally changing a key setting is to take away their means to do so. That’s what WordPress user roles and capabilities are for.

It’s fairly common to see clients provided with administrator-level accounts for their websites. But this enables them to do everything. They can activate themes, remove or install plugins and make any number of other changes. A curious user could do some real damage.

However, it’s usually not necessary for them to have this type of access for everyday tasks. For most content management duties, an Editor account provides enough access and keeps users away from anything dangerous.

For Editors, theme and plugin management are off the table. This can eliminate some of those potential issues. Going to even lower account levels limits users even further by cutting out content they didn’t create. That could, for example, save a home page from an unintended consequence.

If someone needs a bit more specialized capabilities, a custom user role can be created to accommodate them.

That said, a client should ideally have an administrator account on hand – just in case. But a lower-level account should be used for day-to-day site management.

Make Design Decisions for Content Managers

One common mistake in the design and development process is creating elements that rely too much on good faith. They are destined to cause problems down the road.

For instance, consider a card UI layout that displays the latest blog posts. There are a number of ways to build this type of feature.

We could configure things so that our clients need to write a post description through a custom field. That’s great, but what if they enter too much text? We could risk breaking or severely throwing-off the layout.

Sure, you can explain that the post description field should contain no more than x amount of characters. But that still leaves the possibility of something going wrong. And, even if one person heeds your advice, that doesn’t mean the next person will do the same. It’s just not sustainable.

The better solution is to build in safeguards – or, better yet, automatically generate that post description via a template.

A safeguard could include setting a character limit on the post description field. This allows a client to write their own copy while preventing too much text. Automatically generating an excerpt, however, will take the decision out of a user’s hands.

Either way, it’s important to consider what might go wrong when designing and building features.

Limit Choices

Some portions of a WordPress website are difficult (if not impossible) to fully make design decisions for clients. In general, this is because the CMS, theme, and plugins offer users several different choices.

A page builder plugin or even the Gutenberg block editor makes it possible for a user to drastically change a layout. This is one of the downsides of an increasingly visual design process.

Unfortunately, there’s only so much web designers can control here. Some page builders let you turn off features for specific user roles, which could be helpful. There is also the potential to lock down block editor templates, but it’s not always a realistic option.

One neat feature of Gutenberg is the ability to define custom color palettes, which can help users make brand-appropriate choices for blocks. The same goes for gradients and font sizes.

Combine these customizations with disabling the ability to choose beyond the options you’ve defined and users can’t go outside of these parameters. That means no crazy color combinations or tiny font sizes.

Not all WordPress software has these capabilities, however. If you don’t see any obvious settings for a theme or plugin, check out the documentation. Fail that, and it might be worth contacting the author to see if there are any undocumented hooks or filters to help you rein in users.

Think Before You Build

The most important part of keeping your design and functionality intact is thinking ahead. Plan for how that beautiful design element is going to withstand everything your client might throw at it. Consider the possibility of something breaking and ways to prevent it from happening.

You may not be able to stop a determined client at every turn. But you can build and manage a WordPress website in a way that rebuffs the most egregious issues. That should provide both you and your client with some extra peace of mind.

The post How to Build Client-Proof WordPress Websites appeared first on Speckyboy Design Magazine.

Even though the weight of web fonts makes up only a small portion of the overall web page, every optimization you make helps contribute to faster load times. Check out some ways below to speed up those fonts!

What are Google Fonts?

First off, for those of you who might not know, Google Fonts is an open-source (free) directory of over 800 web font families which you can use on your website. They are also available to download locally for print and other uses. Millions of WordPress websites utilize Google Fonts as it is a great free way to enhance the look and usability of your site.

If you are going for pure performance, system fonts will always win, but there is nothing like the professionalism and aesthetic of a good web font. And in fact, typography has been shown to affect conversions in a positive way. But everything has its cost. And so, it is important to understand how adding Google Fonts to your WordPress site affects speed and performance.

How to Use Google Fonts in WordPress

There are a couple of ways to add Google Fonts to your WordPress site. The first and default way is to grab them directly from Google. This method uses their global CDN to deliver the fonts quickly from different servers from around the globe.

When you add them to your site there will be an external request to fonts.googleapis.com.

The are also external requests to fonts.gstatic.com for the WOFF or WOFF2 versions depending upon browser support.

WordPress Plugin

If you are a WordPress beginner, the easiest way to add Google Fonts to your website is probably with a free plugin. The Easy Google Fonts plugin is a good popular example. As of writing, it currently has over 300,000 active installs with a 4.9 out of 5-star rating.

Add Embed Code From Google Fonts

It is important to note that most WordPress plugins add slight overhead, and so I prefer to add Google Fonts with their much simpler to use embed code. So, head over to Google Fonts and choose the font you want. For this example, I’m using Roboto.

Click on the “Customize” option. This is an important step as each font family has different font weights. Typically you will want regular, medium, and bold.

Note: Every font-weight you include adds to the overall load time of your fonts, so don’t just select all of them. The less, the better.

Then click on the “Embed” option. This is where you will want to copy the embed code it provides.

Take that code and put it into the <head> section of your WordPress site. There are different ways you can do this, some might prefer to enqueue the fonts, but for this example I simply added the code to the header.php file. Note: This might vary slightly depending on the theme you are using.

Then, to actually make your WordPress theme use the Google Fonts, you have to add some CSS styles. Below is an example of what I’m using. If your theme admin panel doesn’t have a custom CSS editor you can always use a free plugin like Custom CSS and JS.

body {font-family:roboto; font-size:18px;}
h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;}
h1 {font-size:28px;}
h2 {font-size:26px;}
h3 {font-size:24px;}
h4 {font-size:20px;}
h5 {font-size:18px;}
h6 {font-size:16px;}

Now that you know some quick methods for adding Google Fonts to your WordPress site, I’m now going to do a few quick tests to see alternative ways of speeding them up. I ran some tests first with the setup above and the average speed came out at 418ms. Note: Each test was run five times, and the average result was taken.

Host Google Fonts Locally

Another way to deliver Google Fonts on your WordPress site is to host them locally on your web server. If your audience is in a certain geographical location and close to your server, it can actually be faster to host them locally than it is to use Google Fonts. Google Fonts CDN is great, but adding those additional external requests and DNS lookups can cause delays.

This method will typically only work if you are using fast hosting. In the example, I’m using managed WordPress hosting from Kinsta, which is ironically powered by the Google Cloud Platform.

To host locally I actually utilized a free tool called the google-webfonts-helper. This allows you to download the Google fonts locally more easily and gives you all of the CSS. Below is an example of what we will end up with. You will need to upload the fonts you downloaded to your web server. In this case, I put them in a folder called “fonts.”

/* roboto-regular - latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

We then need to make sure to remove the embed code from Google Fonts in the header so that you no longer have those external calls. I then again ran some tests with the setup above and the average speed came out to 386ms.

Note: The web server is located in Iowa, and the speed test from Pingdom was run from Dallas, TX. So as you can see, even though the server is located elsewhere in the United States, it is still slightly faster to load Google Fonts locally on the server. Of course, you will want to test various locations yourself based on your own audience.

Host Google Fonts on Your Own CDN

Now for a third scenario. On the site above, I’m using a third-party CDN provider already (KeyCDN) to host all of the other assets(images, CSS, Javascript, etc.). What happens if we now throw our fonts on the same CDN, instead of Google’s CDN?

I’m using the free CDN Enabler WordPress plugin. This actually copies the fonts from the “fonts” folder on the web server to KeyCDN automatically. We then have to tweak the code slightly so that the path to the fonts is now pointing to the CDN (such as cdn.domain.com).

/* roboto-regular - latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

I then again ran some tests with the setup above and the average speed came out to 384ms.

As you can see, using a CDN is yet again just slightly faster. Not by much, but if you compare it to Google’s CDN, test it, it definitely is faster. Part of this is because it can utilize the same HTTP/2 connection, and it still reduces the external call and DNS lookup, just as hosting locally does. And of course, one advantage to this method is that it will be globally faster.

Summary

As you can see from the tests above, the Google Fonts CDN is great, but it might not always be the fastest. Of course, it will always depend on your own environment and where you are serving up traffic, whether it be to a local audience or global.

I recommend testing each method above for yourself and see which one is the fastest and works the best for your WordPress site. And remember, only load the font weights you actually need!

The post How to Speed up Google Fonts in WordPress appeared first on Speckyboy Design Magazine.

So, in this tutorial, I will show you how to use the built-in WordPress functions to create those links.

There is a function for both the previous link and the next link. Both of these functions should be used on a single post within the loop. Both functions will echo the links on the screen and allow you to change the format of the links on the page.

The Previous Post Link

WordPress has the function previous_post_link which should be used in the loop of the single posts. This function will create a link to the previous post by date. If there are no posts, then a link will not be displayed.

To use the previous post link just use the below snippet:

<?php previous_post_link($format, $link, $in_same_cat = false, $excluded_categories = ''); ?>

This function accepts four parameters:

• $format – This will allow you to change the format of the outputted link. To define just the link, use the token %link.
• $link – This defines the text that is used on the link. The default is %title of the post.
• $in_same_cat – This is a boolean which defines if the linked post is in the same category or not. The default is false.
• $excluded_categories – This allows you to define which categories are excluded from being linked to.

Examples of Using Previous Post Link

All of the parameters in the previous_post_link are optional, so the simplest use of this function is to use no parameters:

<?php previous_post_link(); ?>

Change Link Format

To change the format of the link, you can wrap it in an h1 tag by using the first parameter:

<?php previous_post_link('<h1>%link</h1>'); ?>

Change Link Text

To change the text of the link, you need to change the second parameter:

<?php previous_post_link('%link', 'Link To Previous Post'); ?>

Link to Posts in the Same Category

To only link to previous posts in the same category, use the following snippet:

<?php previous_post_link('&laquo; %link', '%title', TRUE); ?>

Exclude Links in Category

To exclude any categories from being linked to from this link, you need to use the 4th parameter. To exclude all posts with a category ID of 17, use the following snippet:

<?php previous_post_link('&laquo; %link', '%title', FALSE, '17'); ?>

Next Post Link

The next_post_link function works the same way as the previous link but will return the next post. This takes the same parameters as the previous post link function and will work the same way.

If there is no next post, then the link will not be displayed.

<?php next_post_link('format', 'link', 'in_same_cat', 'excluded_categories'); ?>

Examples of Using Previous Post Link

All of the parameters in the next_post_link are optional, so the simplest use of this function is to use no parameters.

<?php next_post_link(); ?>

This adds a link on the page to the next post using the default values.

Change Link Format

To change the format of the link, you can wrap it in an h1 tag by using the first parameter:

<?php next_post_link('<h1>%link</h1>'); ?>

Change Link Text

To change the text of the link, you need to change the second parameter:

<?php next_post_link('%link', 'Link To Next Post'); ?>

Link to Posts in Same Category

To only link to the next posts in the same category, use the following snippet:

<?php next_post_link('&laquo; %link', '%title', TRUE); ?>

Exclude Links In Category

To exclude any categories from being linked to from this link, you need to use the 4th parameter. To exclude all posts with a category ID of 17, use the following snippet:

<?php next_post_link('&laquo; %link', '%title', FALSE, '17'); ?>

Use in a Theme

When you use these in your WordPress theme, you would want the previous link to float to the left and the next post link to float to the right.

Here is a real-world example of using these functions.

<?php
    previous_post_link('<span class="left">&laquo; %link</span>');
    next_post_link('<span class="right">%link &raquo;</span>');
?>                           
<div class="clearfix"></div>

This adds a span around both of the links adding a CSS class of left or right, so you can float the link. We then use the clearfix example to clear the floats on the page.

The post How to Create Next & Previous Links in WordPress Posts appeared first on Speckyboy Design Magazine.

WordPress 6.1 has brought about one of these hidden gems: the ability to use block template parts within a classic theme.

It takes the capabilities of block themes and ports them over to their classic counterparts. Classic themes still make up the overwhelming majority of the market. Therefore, it makes sense to bring them up to speed on the latest tools.

Let’s explore what this feature does and why you might want to use it. Then, we’ll demonstrate how you can implement it on your website.

What’s a Block Template Part?

WordPress 5.9 introduced Full Site Editing capabilities. When combined with a block theme, the feature allows users to edit various templates within the back end.

Block template parts represent any area of a website you’d like to manage within the WordPress Site Editor. Examples include the site’s header and footer. But they could also include niche areas as well.

Theoretically, a block template part can be as broad or narrow as you like. This allows web designers to define only the theme elements they want to make editable. At best, this offers convenience for site owners while protecting the layout from any major mishaps.

Unlike the custom templates that have long been used in classic themes, block template parts are saved as HTML files. They also consist of block markup, rather than PHP.

Classic themes have traditionally used the WordPress Customizer to make specific areas editable. The feature works well enough but lacks the advanced capabilities of the Site Editor. Now, there’s a way for these themes to move past those limitations.

Adding a Block Template Part to a Classic Theme

Adding a block template part to a classic WordPress theme is a relatively simple 4-step process. Here’s an example of how to set things up.

Step 1: Allow Block Template Parts in Your Theme

The first step involves allowing your theme to use block template parts. This can be accomplished by adding a code snippet to your theme’s functions.php file:

Code snippet courtesy of Learn WordPress.

Note that if your theme’s functions.php file already has a function that adds theme support for other items, you’d only need to paste add_theme_support( 'block-template-parts' ); within the existing function.

Step 2: Design Your Template in the Block Editor

Next, it’s time to fire up the WordPress Block Editor. The easiest way to go about this step is to create a new page – we’ll call ours “Test Block Part”. It can be deleted once we have our block template part up and running.

Within this page, we’ve created a simple two-column layout. It includes our fictional client’s contact information and links to their social media profiles. Everything here uses standard blocks included with WordPress core.

The idea is to allow our client to make edits to this information as needed – but without having to touch the rest of the site’s layout.

Step 3: Copy and Paste Block Markup into an HTML File

Now that we have our layout built, it’s time to copy and paste the block markup into an HTML file.

There are a couple of options for copying the block markup:

1. Select the blocks you’d like to copy within the Block Editor and enter CTRL + C (or COMMAND + C on a Mac) to copy the markup, OR;
2. Enter the WordPress Code Editor for your page by clicking on the Options button within the Block Editor, then copy the relevant markup;

Next, open the code or text editing app of your choice and paste the block markup into a new file. Our markup looks like this:

Save the file as an HTML document into the /parts directory of your theme (create the folder if it doesn’t already exist). Note that you don’t need anything else in the file besides the block markup.

For our example, we’ll call our file footer-contact-info.html. Make note of the file’s name, as we’ll need it in the final step.

Step 4: Add the Block Part Template to Your Theme

Now that we have our block part template created, we’ll need to add it to a PHP template in our classic theme.

WordPress has a built-in function called block_template_part() that we can use to call our block template part into the theme. It uses the HTML file’s name (minus the “.html” extension) to locate the template. Here’s what our code looks like:

We can add this function wherever we’d like the block template part to display. In this case, we’ll add it to our footer.php template.

All that’s left is to upload our updated theme files to the server. Once that’s complete, we’ll refresh the page and find our block template part proudly displaying at the bottom of the site.

Edit Your Block Template Part Anytime

Whenever we need to make a change, our custom block template part is only a few clicks away. To find the template, visit Appearance > Template Parts, then click on the template’s name (footer-contact-info).

Edits can be made via the Block Editor – just like any WordPress page or post. Save your changes and they’ll appear on the front end of the website.

*Note: Some early implementations of this feature contained a bug that caused a block template part to be uneditable within WordPress. Adding a theme.json file to the theme temporarily fixes the issue.

Bringing Classic WordPress Themes into the Block Era

The ability to use block template parts in a classic WordPress theme is a step forward. Theme developers can stick with the power and flexibility offered by PHP-based themes while adding block template support where needed.

It’s also a way to open specific elements up to back-end editing without having to switch to a block theme. The process is easy to implement and much less labor-intensive than starting from scratch. The result is savings in both time and money.

In addition, it offers us a way to move beyond the Customizer. That feature will likely be phased out over time, so the ability to switch to block template parts helps us get a head start on migration.

Best of all, there are tons of potential use cases for this functionality. It may be just the thing you need to add a layer of convenience to your next WordPress project.

The post How to Use Block Template Parts in a Classic WordPress Theme appeared first on Speckyboy Design Magazine.

In the grander scheme of things, running WordPress locally offers a virtually limitless playground. It’s a completely free and private way to learn and use the content management system (CMS). You don’t need to worry about web hosting policies or restrictions, nor the potential for breaking a live site. This might just be the most stress-free way to experiment.

With that in mind, here are five great ways to use your local install.

1. Create a Staging Site

One of the most common reasons to run WordPress locally is to test a copy of an existing website. This provides a safe environment for troubleshooting, testing software updates or playing with some custom code you’ve written.

Pulling down a site and running it on your own machine is often preferable to simply making another copy online. For one, your web hosting account’s resources for storage and bandwidth aren’t affected – which is important for larger sites. Plus, you can more easily avoid accidental file or database overwrites that can leave you in a bind.

As a bonus, if you’re familiar with (or looking to learn) Git, this can be a great opportunity to test updates and the push them to your production site.

2. Learn to Code

When it comes to mastering the art of code, everyone needs to start somewhere. And WordPress provides a terrific gateway to learning PHP, CSS and JavaScript. These languages are all crucial components to themes, plugins and WordPress core itself (see the Codex for more).

Utilizing a local install lets you practice and refine your skills in a safe environment. Create a WordPress site and try building some custom post queries or even dig into how custom blocks work for the Gutenberg editor. This is a great way to expand your horizons.

3. Accelerate Theme/Plugin Development

Once you have a good grasp of coding fundamentals, a local copy of WordPress can help you level up your workflow.

The process of tweaking themes or plugins via a remote server can be a huge pain. You make changes, FTP them up to the server, then test. And the process needs to be repeated over and over again. There can be a whole lot of navigating through various folders and clearing cache as well. Tired yet?

A local environment is the perfect place to develop your next theme or plugin. Write your code, save it and refresh your browser. It saves time and also serves as a handy environment for debugging.

4. Build an Internal Productivity App

Sure, there are a ton of third-party productivity apps out there. But where’s the fun in that? With a local installation of WordPress, you can build one of your own and personalize it to fit your needs.

You might, for example, want to build an internal task management site to keep track of your to-do list. Or, if you share an office with team members, even a simple install of BuddyPress can help you stay on the same page. If you really want to go for something big, use an LMS to offer employee training.

The project can be as serious (or not) as you want. In some cases, the build process itself can be the main point. At the very least, it can serve as a great learning experience for future client projects.

5. Teach Someone to Use WordPress

While the other items on our list are about self-improvement and efficiency, our last project is solely focused on others. It’s about taking some time to help someone else learn the ins and outs of WordPress.

A local copy of the CMS can be an easy way for a friend, relative or a youngster to get a close up look at how WordPress works. They won’t have to worry about breaking anything or making a mistake online. Instead, they’ll get to click around, install plugins and practice all manner of mayhem in private. This is especially nice for parents who don’t want their little ones potentially exposed to the online world just yet.

Plus, an aspiring developer can also get a behind-the-scenes tour of how a server is set up. This can give them a solid foundational understanding that will benefit them for years to come.

Going Local

If you’re looking to learn, teach, troubleshoot or just play around, a local WordPress installation could be exactly what you need. And like WordPress itself, the barriers to entry are extremely low.

With minimal hardware and software requirements, just about any old machine you have lying around can be turned into a real, working server that runs the world’s most popular CMS. With a little elbow grease, you can be up and running in under an hour.

From there, an unending amount of possibilities await. So, what will you create?

The post 5 Cool Things You Can Do with a Local Install of WordPress appeared first on Speckyboy Design Magazine.