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.

Using WordPress as your base platform provides a number of plugin-based options. Over the past several years, I’ve had the experience of using several of them to build in membership capabilities for a variety of websites. Each one presented unique challenges, including some that didn’t match up with the functionality offered by the chosen plugin.

All told, there are a lot of things to consider. So, before you decide which path to take, think about the following factors. They’ll help you develop a plan of attack for your project.

Types of Available Memberships

The first thing to look at is what type of memberships the site will offer. For instance, you’ll want to determine if there will be single or multiple levels. The more levels you offer, the more complex your setup will likely be.

Multi-tiered memberships often mean that each level has its own separate set of benefits. Some levels may have access to more content (we’ll discuss that in a moment) or require the ability to allow members to set up “sub-accounts.”

eCommerce may also play a role here. If you plan to charge for membership, it’s important to map out how you plan to collect fees. That not only means picking a compatible payment gateway, but also whether you’ll want memberships to be renewed. Depending on your choice, members could be renewed automatically or manually.

Lastly, plan for how members will access their account. In many setups, you won’t want anyone except administrators to have access to the WordPress Dashboard. The ability to access account information from the front end may be a desirable feature to have.

Access to Memeber Content

Next on your to-do list is to determine what, if any, special access your site’s members will require. This could be anything from a single “Members Only” page to walling off specific categories or custom post types.

If you have more than one membership type, this often means restricting content based on level. This can be done via custom user roles, either manually through custom code or plugin settings. Custom code may provide more flexibility, while a plugin will be much easier to use.

And, if your site will allow anyone to join (as opposed to a private organization), it’s worth thinking about what the public can access. This could mean offering a trial membership that “drips” content or simply making some content fully-available to everyone.

Another, often overlooked, consideration is how you want search engines to treat protected content. Some membership plugins offer control over this, while others require you to develop your own solution. If you don’t want members-only content to be indexed by Google, plan ahead. Many SEO plugins will allow you to turn off indexing for these areas.

Managing Member Data

Chances are, you’ll want to have access to your membership data. This can include the basics, such as names and email addresses. But there’s a lot more you can (ethically) collect and things you can do with it. And, there are also some concerns with how you handle it.

Membership Mailing Lists

A membership plugin that ties in with a mailing list service such as MailChimp can be great for putting together a newsletter. A simple checkbox on your signup form or profile will allow members to opt in.

Membership Reporting

Running membership data through reporting software (or via built-in membership reports) can help you determine trends. For instance, you might notice that more people are joining during a certain month or maybe your members are concentrated in a specific region. You can also better judge the effectiveness marketing campaigns, etc.

Custom Data

There may be data you want to collect that is specific to your organization. Things like educational background or areas of expertise. This can help you better target content and services to specific groups of members.

If your membership plugin doesn’t have this capability, something like Advanced Custom Fields could be used to further tweak member profiles.

Exporting Membership Data

Exporting data in WordPress can be tricky – especially if you use more than one plugin to collect member info.

That information can be spread all over your site’s database. Therefore, you’ll want to determine where the data you need is stored and find an effective solution for exporting it to your preferred format.

Privacy Concerns

Any data your members provide should be protected to the best of your abilities. Make sure you use SSL and only collect the information that is necessary.

And you’ll want to ensure compliance with GDPR or other local regulations. WordPress has some of this capability built into core, but plugins may not necessarily comply. If you’re unsure, ask the plugin’s author about ways to scrub a user’s data.

Keep Members Happy

Above all, every decision you make with regards to building a membership site should be on the side of member happiness. Keep things simple in terms of navigation and the ability for members to manage their accounts. Employ those little UI enhancements that make interacting with the website easy and fun.

And, once your site is up and running, it’s a good idea to solicit member feedback. You might receive some helpful suggestions that you can use to further improve the experience.

WordPress affords you the opportunity to build a membership site to match your needs. But planning is crucial. Take time to consider what’s required and then implement the right tools to make it all come together.

The post How to Build a Successful WordPress Membership Site 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.

Frameworks are used to ease the web development process, as they allow you to focus on the design rather than code. In other words, the most difficult work is already done for you before you even start.

Although frameworks can save a lot of time and effort, opinions about them differ among authorities in the target industry.

It’s completely up to you whether you use a theme framework or go without it. If you decide to give this engine a try, you may find this set of open-source WordPress theme frameworks helpful for your undertaking. Choose the one equipped with the features that meet your individual needs.

Cherry Framework by TemplateMonster

The first open-source tool featured in our post is Cherry Framework powered by Bootstrap.

Cherry can let you switch off all unnecessary options so that nothing will distract your attention while building a website. Such a feature is missing in most frameworks, but it is a must-have for comfortable usage.

Cherry Framework Key Features:

• Independent Module Structure allows you to use Cherry components as standalone tools. This is what every framework should have, according to Tom J. Nowell from Automattic.
• Multiple Shortcode Variations help embed content of different types into your site.
• Shortcode Template Editor is meant to build templates for shortcodes and customize them by changing the order of elements, their attributes, etc.
• Static Area Builder enables you to fix a preferred position for static page elements throughout the header and footer. It’s possible by simply dragging and dropping those elements.
• CSS Minifier is an innovative tool designed to compile multiple CSS files into a single one and compress it afterwards for faster website loading.
• Backup Option will come in handy to restore the previous settings each time you don’t like the changes you’ve just introduced.
• Multiple Plugins are integrated into Cherry to provide quick solutions for different purposes. To name a few, there are plugins intended to add slideshows, sidebars, mega menu and post types for testimonials, services, team and portfolio.
• Compatibility with Third-Party Tools will let you equip your site with extra features.
• Responsive & WPML-Ready are must-have features today, as they allow for the creation of multilingual sites that can work flawlessly on both desktops and portable devices.

Hybrid Core by ThemeHybrid

Hybrid Core is an easy-to-launch framework that allows you to build themes with complex functionality without coding too much.

Instead, you can include pre-coded features in your themes. The framework is compatible with Schema standards, which will make your data SEO-friendlier. What’s more, Hybrid Core is stuffed with developer-friendly features that are as follows.

Hybrid Core Key Features:

• Breadcrumbs Script performs well on pages of any type including custom post types and taxonomies.
• Cleaner Gallery is a shortcode that can fix any invalid HTML and give you total control over an image gallery.
• Media Grabber makes it possible to create the featured media that can be grabbed right from your posts.
• Post Templates will be useful to build custom templates for different post types. They are cool additions to page templates.
• Numbered Pagination means you can build paginated links for search, blog and archive pages. They exceed standard “previous / next” links in functionality.
• Translation-Friendliness enables you to load translation files to parent and child themes automatically.

Gantry by RocketTheme

Gantry was developed by RocketTheme professionals in an attempt to merge multiple functionalities used in their themes into a single framework.

Based on a responsive grid system, this lightweight framework supports SCSS, CSS, and LESS. Take a look at the major features of its latest version, i.e. Gantry 5.

Gantry Key Features:

• Layout Manager makes it a breeze to build and customize layouts by dragging and dropping.
• Particle System allows for effortless creation, configuration and management of content blocks.
• Visual Menu Editor enables users to structure the menu hierarchy, add particles and icons to it, etc.
• Mega Menu is meant to provide advanced navigation besides a standard dropdown menu.
• Administrative Interface is powered by Ajax to handle a website backend at lightning speed.
• Twig Templating System can let you develop powerful themes with ease.

In addition to the above-mentioned features, it’s also worth noting YAML-based configuration, mega menu support, off-canvas panel, powerful inheritance capabilities, as well as built-in pickers of icons, fonts, and images.

Runway by Parallelus

Runway is an open-source solution meant to facilitate the development of WordPress themes. With its aid, you can distribute your themes as standalones, i.e. independently of the framework.

Runway is also a white-label tool, which will let you represent your theme as your own brainchild without any third-party involvement. Check the main framework features and their functions below.

Runway Key Features:

• Child Theme Generator is intended to build, customize and duplicate themes. In terms of customization, you can change names, descriptions, admin menus, folders, etc.
• Theme Options Builder helps create admin pages, group theme options, and generate custom input types for specific functionality. The tool comes with drag-and-drop, click-and-pick controls.
• Modular Structure allows you to supply the framework with new functions by means of extensions. You can add them to it with a single click.

Wonderflux by Jonny Allbut

The next open-source framework listed in our collection is Wonderflux. This well-coded solution can help you save a lot of time without compromising the efficiency of outcomes.

Wonderflux Key Features:

• Responsive CSS Layout System ensures smooth adaptation of custom themes to any screen.
• Flexible Layout Options can be filtered, changed or completely removed on the fly.
• A Set of 100+ Hooks will let you embed almost any type of content and code into your theme.
• Simple Admin Options make it easy to reconfigure your site the way you like.
• Compatibility with WordPress Plugins provides access to a lot of extra functional capabilities.
• Valid Markup provides compliance with generally accepted web standards, which is a favorable factor for SEO.

Unyson by ThemeFuse

Unyson is a functionally rich framework intended for both web developers and end users. It’s supplied with many customization options to ease the process of editing your website frontend. By means of a live preview option, you can check all the changes in real time in the admin panel. Here are some more of its cool features.

Unyson Key Features:

• Drag-and-Drop Page Builder enables you to create limitless pages via content and media shortcodes.
• Content Demo Install is an extension allowing for installation of the theme content exactly as it’s shown in a demo.
• 20+ Option Types will come in handy for generating boxes, tabs and form inputs for admin pages.
• Sidebar Module can let you modify pages with dynamic sidebars. Different pages can have different sidebars.
• Automatic Backup is an option to back up your content right in the WP admin panel. You can also set dates for automatic backups, e.g. every day, week, month, etc.
• Breadcrumbs Extension contributes to faster navigation by showing places previously visited on your website.
• Easy-to-Implement Sliders provide support for both image and video content.

This is not a full list of the Unyson features. In fact, the open-source WordPress theme framework is also packed with multiple modules for SEO, contact form, events, portfolio, and submission of reviews and ratings. Furthermore, there are custom widgets for social media integration, Flickr, and blog tabs.

PressWork

PressWork is a free WordPress framework built with HTML5 and CSS3. It is tailored for different categories of users, e.g. developers, designers, publishers, literally anyone. Look through some of the PressWork features below.

PressWork Key Features:

• Front-End Editor can help you change the visual side of your site by means of drag-and-drop functionality.
• BriefCase is a set of advanced plugins, which will let you extend the theme functionality. Thus, you can use the framework to its best advantage.
• Media Queries make your theme scalable to screens of handheld devices, providing an optimal visual experience.
• PSD File is designed to customize your theme in Photoshop, particularly to modify its logo, graphic elements, etc.

Reverie by ThemeFortress

Reverie is a versatile WordPress framework designed to build blogs, CMSs, online brochures or any other kind of site. Depending on your needs and skills, you can use it either as a starter or a parent theme. Keep on reading to get a clear idea of what Reverie is all about.

Reverie Key Features:

• The framework is powered by ZURB Foundation and inherits all of its features.
• HTML5 and hNews microformat provide clearer structure and better readability. To output HTML5 tags, you can use custom WordPress functions.
• By means of media queries, it’s easy to optimize your theme for portable devices such as smartphones and tablets.
• Reverie is quite minimalistic in its nature, offering only 2 widget areas and 2 custom menus.
• When it comes to styling web pages, you can harness the power of both SCSS and customary CSS.

Reverie is only partially optimized for SEO, that’s why you are recommended to use a separate plugin for that purpose.

Vafpress

Vafpress incorporates a toolbox to build the backend of your WordPress theme with ease. To characterize the framework in short, it’s worthwhile listing the following tools.

Vafpress Key Features:

• Script Load Management makes pages load only necessary scripts. Thus, the front-end is not overloaded with any framework processes.
• Multiple Fields are available for users of Vafpress, e.g. TextArea, MultiSelect, CheckBox, RadioButton, Toggle, Sorter, and much more.
• Theme Options Builder helps organize fields into menus, submenus and sections. The builder can be written in XML format and converted into PHP Array afterwards.
• Metabox Builder enables you to write meta boxes in PHP Array.
• Group of Repeating Fields can be used to define some fields with an arbitrary number of occurrences.

Underscores

The last but not least tool featured in our set is Underscores. Some professionals, refer to it as a framework, while others called it a starter theme. Regardless of the name you choose to define Underscores, it will largely facilitate your web development efforts. Here is a compact checklist of its features:

Underscores Key Features:

• Option to implement a sample custom header.
• Custom template tags to prevent code duplication and keep templates cleaner.
• Script to turn a menu into a toggled dropdown on displays of mobile phones.
• Two sample CSS layouts with different sidebar positions, i.e. on the right and on the left.
• Well-organized CSS to streamline the process of theme building.
• Pre-defined 404 template.

Themosis WordPress Framework

Using an elegant and simple code syntax, the Themosis WordPress Framework uses “modern” PHP features like anonymous functions, namespaces, is Composer ready and is a mix between WordPress best practices and a typical MVC framework.

Conclusion

As you see, you can find a good number of WordPress theme frameworks available at no charge. (As well as free WordPress Themes.) They provide an opportunity for you to pay closer attention to the visual side of your project and skip a tedious procedure of coding.

The post Top 10 Open-Source Frameworks for Building WordPress Themes appeared first on Speckyboy Design Magazine.

Like many other specialty tools, the LMS was at one time standalone, clunky and expensive. However, there have been several options released in recent years that fit all manner of needs and budgets. One of the brightest and busiest areas of LMS development have come in the form of WordPress plugins.

Today, we’ll introduce you to various plugins that will take your standard WordPress install and transform it into an educational powerhouse. They offer features such as course building, eCommerce, and testing – along with a number of other helpful tools. Some are free, some are commercial, but all can bring online learning to your website.

LearnDash LMS WordPress Plugin

One of the best-known LMS plugins, LearnDash, offers a high level of control over just about every aspect of your online courses. It includes a course builder that lets you easily create hierarchical lessons (each with its own set of topics) as well as flexible online testing. There’s also some eCommerce functionality built-in, although the plugin is additionally compatible with WooCommerce. In addition, this commercial plugin offers a number of integrations with plugins ranging from membership (Paid Memberships Pro, MemberPress) to bbPress forums.

LearnPress WordPress Plugin

LearnPress is a free plugin (with multiple Pro upgrade options) that can be used to build and sell online courses. Out of the box, it works with WooCommerce and BuddyPress to help you sell online and communicate with students. There are also several free add-ons that offer functions such as prerequisites, offline payments, and import/export. Pro add-ons enable assignments, the awarding of certificates, and support for many additional payment gateways.

LifterLMS for WordPress

A free option with a number of commercially-available add-ons, LifterLMS offers the ability to build multimedia-rich courses. Courses can be single or multi-instructor, have prerequisites and quizzes. Students get their own dashboard to track progress and access account information. They can also be awarded badges based on their achievements. Site owners, meanwhile, have the option to sell courses or make them available for free.

Edwiser Bridge WordPress Moodle LMS Integration

First thing’s first, Moodle is a free, open-source LMS platform. While it features its own set of powerful plugins, there may be times when you want to integrate your courses into WordPress as well. That’s where Edwiser Bridge – WordPress Moodle LMS Integration comes in. The free plugin adds the ability to sell your Moodle courses via PayPal (WooCommerce support is available through one of a number of commercial add-ons). Other features include syncing between WordPress and Moodle, cross-site registration, plus lots of hooks and filters for custom development.

MasterStudy LMS for WordPress

MasterStudy LMS is a free plugin that lets you build and sell flexible online courses. For instance, your courses can contain a wealth of multimedia, including images, videos, graphs, and slides. Sell online through PayPal or Stripe and build community with the included messaging system. Students can earn certificates for completing a course and even rate courses they’ve taken. The plugin works with any theme, but use it with the commercially-available MasterStudy theme and get even more custom functionality.

Namaste! LMS WordPress Plugin

A free WordPress plugin with a Pro option, Namaste! LMS offers a solid variety of features. Create various rules for your courses, assign user roles to students and use the included grading system to track student progress. Students can also earn course certificates. Note that the plugin itself doesn’t offer testing or eCommerce functionality, but is compatible with Watu for testing and WooCommerce for sales. Pro features include limiting course access, award badges, and lots of extra usability tweaks.

WP Courseware Plugin

WP Courseware offers a full suite of functionality in a commercial plugin. Build courses with a drag-and-drop UI, restrict access, drip content and manage your students. Flexible quiz and instructor management systems are also built right in. There’s also integration with a number of membership and eCommerce plugins, along with support for recurring subscriptions.

WPLMS for WordPress

WPLMS is a bit unique among this group as it is part of a commercial theme (the functionality is not available on its own). That said, it may be a great choice for those looking for an all-in-one solution. Features include a front-end course builder, user activity recording, a notification system, quizzes and even a mobile app. It also integrates with WooCommerce, BuddyPress, and popular membership plugins.

Share Knowledge with LMS Ease

While all of the plugins above have their own unique qualities, they all share a common thread: The ability to quickly and easily create an online learning environment. So, no matter where your area of expertise lies, you will be able to share it with the world without a huge investment in development time or even budget.

The post 8 Best LMS Plugins for WordPress appeared first on Speckyboy Design Magazine.

Here are some free plugins you can use to bring memberships to your WordPress website. Some cater to niche uses, while others aim to provide a full suite of functionality.

User Access Manager WordPress Plugin

User Access Manager provides an easy way to set permissions on your website’s content. Create a user group based on WordPress Roles & Capabilities and use the handy checkboxes to assign pages, categories, or individual posts to that group. Users and content may also be assigned to more than one group.

Simple Membership WordPress Plugin

With Simple Membership, you’ll be able to configure unlimited free and paid membership levels. Paid memberships can be set to automatically renew via PayPal and Stripe.

Also, website owners can take fine-grain control by manually approving new members and selecting which content to protect on a per-post basis. Google reCAPTCHA compatibility is there to help cut down on spam registrations.

Members Plugin for WordPress

Members is a complete solution for user and content control. You can edit and create new user roles, assign multiple roles to users and adjust content permissions – all in a slick GUI.

Paid Memberships Pro for WordPress

Get your WordPress membership site off to a quick start with Paid Memberships Pro. The core plugin offers many ways to wall off your content and create multiple membership levels.

You can also extend features by using the available free and premium add-on plugins. They cover everything from WooCommerce integration and email marketing, to membership approval. This is a solid solution for creating a highly-customized membership experience.

WP Members – WordPress Membership Framework

WP Members allows users to register, login, and edit their accounts on the front end of your site – keeping them away from your WordPress dashboard.

Registrations can be held for admin approval, adding an extra layer of security. The ability to set content permissions is also included.

Peter’s Login Redirect for WordPress

Peter’s Login Redirect lets you create login/logout/registration redirects for users by roles, capabilities, or specific individuals. It’s very handy for those times when you want users to see specific content after performing a member-related action.

Remove Dashboard Access WordPress Plugin

Often, site owners don’t want lower-level users to access the WordPress dashboard. Remove Dashboard Access can be used to redirect users with specific roles or capabilities to another URL and keep them away from the dashboard.

User Submitted Posts for WordPress

User Submitted Posts allows users to create content on the front end of your site. They can even upload images. Admins can set the status of submitted posts to draft, published, or set to auto-publish after that user has a specific number of previously approved posts. There are lots of options to set things up to fit your needs.

Membership & Content Restriction WordPress Plugin

Sell memberships on your site with Membership & Content Restriction. You can create multiple levels of memberships, each with its own pricing.

The plugin also includes member management and content restrictions. Lots of commercial add-ons are available to enable more functionality.

Ultimate Member WordPress Plugin

Designed for creating advanced user community sites, Ultimate Member features front-end registration/login/profiles, the ability to create a custom registration form, and content restriction.

You can also conditionally display menus, customize email templates and display a member directory. There are several add-ons available to enable WooCommerce integration, private messaging, and more.

Membership has its Benefits

The needs of membership sites can be unique. Each has its own goals, challenges, and desired functionality. Fortunately, there are WordPress plugins available for just about every type of membership site imaginable.

The post 10 Best Free WordPress Membership Plugins 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 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.