Creating A Wordpress Plugin From Scratch – It’s been a while since I’ve built a new WordPress plugin from scratch, but recently I decided to turn some code that only works for me into a fully formed plugin that I can distribute. Part of that process involves replacing hard-coded data with options that future users of the plugin can set.
I needed to build a plugin settings page and I was wondering what the latest and greatest approach was in the ever-changing world of WordPress. Let’s take a look at the different ways to add a settings page to your WordPress plugin.
Creating A Wordpress Plugin From Scratch
The WordPress Settings API was added in WordPress 2.7, which allows developers to register settings fields on existing dashboard settings forms, as well as create new settings forms that WordPress will display and take care of saving the data:
Develop Wordpress Multilingual Plugin
It’s certainly the easiest of the methods discussed in this post, but it’s worth understanding how it works, and in some cases it’s a simple enough approach that may be all that’s needed.
First, we need to register a new menu item and page that will contain our settings form. Let’s add a page under the top-level menu item “Settings” in the WordPress dashboard:
The fifth argument to add_options_page is the name of the function to be used to display the page’s content, in this case it would be the settings form. That function needs to be a form element and calls some functions to communicate with the Settings API:
The setting_fields function displays code to tell the form what to do, as well as using a no hidden input to make it safe. The argument passed to the function is the name of the set of settings that will be registered later.
Wordpress Plugin Development Cost: How Much Does It Really Cost?
The do_settings_sections function is the body of the form, this is where all the sections and fields (text boxes, options, checkboxes, etc.) are output so the user can enter data. Again, that function argument is arbitrary, but must be unique. We will use this when registering the field.
There are three things going on here. First, we use register_setting to create a new record in the vp_options table with ‘dbi_ekample_plugin_options’ as the option_name for our settings.
Our personal settings will be stored as a serialized array of data. This is great for grouping all our plugin settings in one place, but serialization of data can cause problems when migrating WordPress databases unless handled properly. The third argument is the name of the function that handles the validation of the data entered when saving the option.
Second, we register a group setting section related to the option. And finally, we register three fields for the group with add_settings_field . These are all text fields to store our plugin’s settings.
Create Wordpress Plugin
Next, we need to create a function to display useful text for the section and display the fields on the form:
There are a lot of moving parts here, filing it down and duplicating the code and making sure everything is put together correctly. The WordPress API is also not the easiest to use or explain. So it should come as no surprise that there are a number of wrapper libraries that aim to ease the process of adding a settings page to your WordPress plugin.
When I created my Instagram WordPress plugin in 2012, I created a settings page using the WordPress Settings Framework, which was created by our very own Gilbert Pelgrom – it was a great opportunity for us to work together or even get to know each other. was before The framework is now maintained by James Kemp, a friend of Delicious Minds – the WordPress community can be a small world indeed.
Speaking of PHP frameworks, I wanted to show an alternative way to create a settings page without using the WordPress Settings API. When building sites for clients, if I need a settings page, I default to using Advanced Custom Fields to create an options page and then define the fields using ACF.
How To Create A Simple Contact Form In Wordpress (easily)
This is one of the many reasons I love using ACF: it takes the complex WordPress and simplifies it. (Have you looked at ACF Blocks, a PHP wrapper that registers blocks for the new block editor without touching React?)
However, when creating a plugin or theme for distribution, you cannot rely on the user having ACF installed. Enter the Carbon field box. Unlike ACF, Carbon Fields is not a plugin and is usually installed as a library within a plugin and their recommended approach is to use Composer.
Pro Tip: If you install Carbon Fields in your plugin using Composer, remember to avoid WordPress dependency management hell by prefixing your Composer package namespaces.
To reiterate what we did above with the WordPress Settings API, it’s as simple as using the following code:
How To Create A Custom Wordpress Plugin
As you can see, the framework makes it extremely easy to make fields more user-friendly, such as adding a default, min, and max to the result range field, as well as turning the start date field into a date picker—something that the Settings API does. A bit of coding will have to be done to achieve this using .
Frameworks can be overkill for small projects, but they are a great way to do a lot with less code, allowing you to focus on writing code for it.
Another approach that makes use of the WordPress Settings API, along with the ease of use of the framework, is to use one of the many WordPress generators:
Let’s recreate our options page using the WordPress Options Page Generator. It only supports certain field types; Text, textarea, select, radio, checkbox, so no date picker either.
Wordpress Plugin Development Best Practices To Follow In 2022
Here is the generated code that I can use directly in my plugin and access the data in the same way as the WordPress Settings API.
The generator is a very useful tool for launching your plugin with ready-made settings pages that can be set up without the need for extensive coding. They can also be good for learning how things work, taking apart existing code and seeing how it all fits together. However, they may not be the best long-term option for a plugin that requires a lot of setup code changes.
Using the REST API One of the many great uses for the WordPress REST API is to enhance your plugin or theme settings screen.
In this excellent article, Josh Pollock explains in detail how to build a settings page using the REST API and jQuery. I’m not going to recreate my settings page with this technique, as the article is an extremely detailed tutorial.
How To Create Your First Wordpress Plugin
This type of approach feels much more modern than the WordPress Settings API, along with the improved user experience of clicking “Save” and form settings being saved in the background without page refreshes.
Josh notes that as you add settings and your form becomes more complex “you will end up doing more and more work with jQuery which is difficult to manage and will be simple, and if you are using VueJS or React will provide a better user experience”, which nicely leads me to the next approach, the settings page powered by VueJS.
Last year during the process of purchasing my WordPress membership plugin, I searched the codebase to see how it was written and discovered that the settings page is powered by a package that uses the REST API and VueJS – vp-optionskit. does:
Packages can be installed using Composer and the settings page is instantiated and configured using the code found here. Our example settings page would look like this:
Best Form Plugin For Wordpress
What I like about this approach is that it allows you to generate complex settings pages with multiple tabs and subsections, just by configuring strings in PHP. Like some of the other approaches, the settings data is stored in a single record in the options table, so this is a familiar way to retrieve and use the stored data.
Although the WordPress world is adopting React at a rapid pace (WooCommerce is also rebuilding its admin in React) for editing content in the WordPress admin, I haven’t seen any React-based framework for building plugin settings pages, Here are just a few tutorials. And there. But as we saw with vp-optionskit, using the REST API opens the door to extensive use of VueJS or React in the WordPress admin.
Do you know that we are rewriting the entire VP MigrateDB Pro UI in React? By doing so, we improve performance and user experience, and make the code more manageable for future development. (Beta version 2.0 is available if you enable beta updates in the plugin.)
As with all things development, there are many ways to achieve the same thing, and the approach you choose for one project may be different for another. My personal favorite right now is vp-optionskit, as it allows for more settings tabs and subsections, and delivers a nicer user experience.
Best Wordpress Real Estate Plugins
What approach do you use to create WordPress settings pages for your plugins? Have I missed any popular options? Tell us in the comments.
This entry was posted in VP Migrate DB Pro, Plugin Development and tagged Plugin, Development, React, Vue.js, REST API. WordPress is a favorite of many, and rightly so. His
Build wordpress plugin from scratch, creating a wordpress theme from scratch, creating wordpress plugin tutorial, creating a wordpress website from scratch, creating a wordpress blog from scratch, wordpress plugin from scratch, creating a wordpress plugin from scratch, create wordpress plugin from scratch, wordpress creating a plugin, develop wordpress plugin from scratch, creating a website with wordpress from scratch, creating a wordpress site from scratch
