Setting up form fields is pretty straight forward. Within the template file admin/partials/wordpress-custom-plugin-admin-display.php , we can echo out the forms and fields we want.

Within the form tags there are a couple functions we need to call. First is settings_fields() . This will output all of the fields that we add. Second is do_settings_sections() , this will output the section titles and any additional information we may have set. Thirdly, we setup the submit button for the form by calling submit_button() .

Form Fields

For setting up the individual form fields for each section, there are some helper functions in the custom plugin source code that can easily help you setup the fields you need. There are 3 functions you need to use.

1. setup_sections()

This function is used for configuring the different sections for your settings page. This function is calling add_settings_section() function for each section you want.

2. section_callback()

This function is used as the callback for the add_settings_section() . It tells WordPress what info to display for each section. You could used this to output a description of a particular settings section with some text to help guide the user in configuring the plugin.

3. setup_fields()

This function has an array of all form fields we want on the page. There is an example of most types of user input including one that allows a user to upload an image with the built in Media Library within WordPress.

At the very end of this function there is a loop where it runs through each setting you specify in the settings array. It uses two WordPress functions. add_settings_field() and register_setting() .

First it is adding the field to the chosen settings section, then it’s registering this setting with WordPress.

4. field_callback()

This function is called as a callback from the setup_fields function. It has logic in it on how to markup each input with the necessary markup.

This is a pretty general overview of setting up forms and form fields for the settings page, but its pretty straight forward. All of this code is contained in the admin/class-wordpress-custom-plugin-admin.php file.

URL Rewrites for Custom Plugin URLs

Each custom plugin comes with a custom URL. The custom plugin sample is displaying custom data to a unique URL, which also allows for pagination. The next section will cover the pagination part.

Adding a rewrite rule is pretty easy for the most part. You need to call the WordPress function add_rewrite_rule() . In this example you need to pass the URL you want. In this case it’s /custom-plugin/ . If WordPress finds that URL being used, it maps it to index.php?custom_plugin=index . Doing pagination can get a little tricky as well. With the above example you can see how it handles the pagination, showing different results for different page numbers as well as a detail page for a single vehicle.

At the end of the rewrites we need to flush the rewrite rules so that WordPress will see the new rules. This is done using the flush_rewrite_rules() function. Once we have the new URL rewrites in place, we can add an action for setting the rewrites up.

This action is setup in the includes/class-wordpress-custom-plugin.php file. You find this line in the define_admin_hooks() function. The callback is the setup_rewrites() function in the admin/class-wordpress-custom-plugin-admin.php file. This action is also setup for the init hook within WordPress. This way it gets setup before any URL processing is done.

Once we have the URL rewrites in place, we need a way to process those requests. You will also see that in the rewrites there are custom query variables as well. In the file public/class-wordpress-custom-plugin-public.php you will find two functions we use to display the appropriate template for each custom rewrite.

First we need to define the custom query parameters. If a query param is not registered, it will not be process by WordPress.

Once the parameters are defined like the above code, we can then register them with Wordpress. The plugin uses the WordPress add_filter() function for this. We can now map the custom URL rewrites to URLs using custom query parameters.

Now that WordPress knows our custom URLS and what custom query parameters those actually point to we can add logic for the plugin to know what page template to display for those URLS.

In the above code we are just doing a simple if check to see if the URL coming through contains our custom query parameters. If it matches then we can display the relevant template. In typical fashion, we need to notify WordPress that we have some logic that can choose a custom template based off of the query parameters. For this we will add another action adding this check into the Wordpress template_redirect hook.

Once that is setup WordPress can now listen for if there is a URL match to our rewrites, and if there is a match direct it to the proper page template.

Displaying Custom Data on Plugin Pages

Now that we have WordPress displaying the proper template for the rewrite, let’s show some custom data on these pages. For our main URL rewrite, which is if the URL is /custom-plugin , let’s show some custom content. For this sample plugin there is an array of 50 vehicles with associated data. On our index template file public/partials/wordpress-custom-plugin-public-index.php we will call our plugins public class. This allows us to access our data within the class.

The above line allows us to instantiate our public class. Then we can access a function of that class to return the data we need to display. In this example we will will access the `get_vehicle_listings()` function which will return back a listing of vehicles from our example data that is stored within the plugin’s public class. This could be any function and could return any type of data that you want.

Then with the vehicle listings data that is returned, we can just loop through that and display it on the page.

Pagination for Custom Plugin Data

Pagination is not too had to implement. We need to follow some of the same steps as listed above in the Displaying Custom Data on Plugin Pages. Along with instantiating our public class, we need to figure out some other variables for breaking all of the listings up in to manageable page sizes.

In the above code, first we are going to check a query parameter and see if it contains some data. In this case we are checking a custom parameter thats holding what page number we are on. Next we are setting up the public class for our plugin. Once that is done we can now access the function within the plugin, get_vehicle_listings() . With this call we can pass how many vehicles we want to list and the current page we are on.

In the get_vehicle_listings() we can do some logic to return back 10 listings based on the page we are. The following logic will get all vehicles, then pull out the ones we need to display.

After we loop through the returned vehicles, we will need to output some markup for showing which page we are on and also allow some basic navigation to other pages. In the template file we will call our special pagination function which will return back the desired markup.

The function generatePagination() that we call is pretty simple. It takes in how many pages total, and which page number it is on currently. The with that input it will return back the correct markup to be rendered with the correct links for navigating to the next page or previous page.

Conclusion

I hope that you gained a lot of insight into building your own custom WordPress plugin from this post. I gave a brief overview on a lot of topics related to writing a plugin but hope with the sample code and sample plugin you can write your own with relative ease.

Resources

I’ve compiled a couple resources that were extremely helpful for me when building my plugin.

Lots of help, borrowed code, and inspiration from: https://github.com/rayman813/smashing-custom-fields/

WordPress Developer Resources: https://developer.wordpress.org/

WordPress Plugin Boilerplate Generator https://wppb.me/

Example Custom Plugin Code

I have put all the example code from this article in a public GitHub repo. This is a full functioning custom WordPress Plugin. I welcome any comments or changes. https://github.com/reside-eng/wordpress-custom-plugin