to find a way to create a custom WordPress plug -in? In this tutorial, we will show you how to build a WP plug -in from scratch, which will allow you to delete some elements from the Woocommerce product page.
Before we complete this process, let’s first see why you may need to create a custom WordPress plug -in first.
Why create a custom plug -in in WordPress?
We all know that there are a lot of free and paid plug -ins in WordPress. All these have various functions to increase the functions of your website. However, some functions of this plugin may be unnecessary for your website and may become an extra weight of your framework.
Sometimes you need only tools with very specific functions. But there are too many additional functions of some plug -ins, so that you can’t give full play to their potential. In these cases, you can create your own custom WordPress plug -in.
For example, assuming you want to use a special plug -in to delete the product page or any other Wookommerce page. In addition to deleting elements, most plugins will provide you with more additional functions. This will increase the size of the plug -in and website storage, which will also affect your website performance.
Of course, you can also use a CSS script or WoOOCOMMERCE hook to delete the element. However, if you update the WordPress theme without the correct execution, they may bring some problems to your website. However, if you create a custom plug -in, it is unlikely to hinder your website in any case.
How to create a custom WordPress plug -in?
The entire process of creating a custom WordPress plugin is much easier than you think. However, let’s start with a few things that we should remember before creating a custom plug -in.
1. Preparation to start
Creation of custom WordPress plug -in needs to meet many requirements. They are:
Installing wordpress on the LocalHost server
- Although you can develop plug -in on the real -time server, doing this on the website is a very bad approach. If you make any unnecessary changes to the website, it may encounter some serious problems. Therefore, in order to prevent them, if you have not defined the WordPress plug -in, you will need to set up a LocalHost test environment to create a custom WordPress plug -in.
Use code editor
- WordPress with a built -in plug -in editor, which can add and modify the code to your plug -in. You can also use it to create custom WordPress. But we recommend using code editors, such as Sublime Text, Visual Studio Code, or any similar editor.
They have a variety of tools and functions required to build a custom plug -in. Therefore, using IDE is more comfortable because they are much better than using WP code editors.
Some basic WP development knowledge.
- To create a custom WordPress plug -in, we will use WP hooks, PHP functions, and we will define our functions. Therefore, we recommend that you continue to learn this tutorial only with the basic knowledge of WordPress development. Otherwise, it may be difficult for you to develop custom plug -in yourself.
These are some basic requirements and resources required to create custom plugins. Before continuing this tutorial, make sure to meet all these requirements.
2. Create the main file for custom WordPress plug -in
The first step to create a custom WordPress plug -in is the main file of creating plug -ins. In fact, creating a plug -in only requires one main file. It must have a comment block with a plug -in name.
This is the only value of WP requirements, so it can recognize that this is a plug -in. However, in order to follow good practice and avoid problems, we need to enter some other information here.
So let us start processing it and create this fileEssence 
Open your LocalHost public folder and go to the WP installation you will do. Then, navigate to \”
wp-content/plugins
\” folder, where you will see all the installed plug-ins
We just add a new custom plug-in file here. Create a new folder under WP-CONTENT/PLUGINS folder installed in WP. To facilitate understanding, we named the plug -in in this tutorial to
quadlayers_custom_products
.
In this folder, all plug -in files will be found. Therefore, let’s create our main file in the folder we just created. It should be
.php 
file format
[ 123] This main file, we named quadlayers_cp.php , everything starts here. It is the entrance to the plug -in. You can use code editors to create this file, but only to ensure that it has PHP extension and it has correctly formatted it into PHP files.
Copy this code and paste it into the file: 
\u0026 lt; pHP/** * @Link https://quadlayers.com/ * @SINCE 0.0.1 * @package Quadlayers customization Product * Plug -in name: Quadlayers Customized Product * Plug -in URI: https://quadlayers.com/ * Description: By removing element custom products single page * (! DEFINED (\u0026#39; Abspath \u0026#39;)) {die (\u0026#39; -1 \u0026#39;)} Function starts () {if () () (is_admin ()) {require plugin_dir_path (__file__). \u0026#39; Includes/Backend/Quadlayers-Backend-Init.php \u0026#39;} requires plugin_dir_path(__File__). \u0026#39; Includes/FrontEnd/Quadlayers-Frontend-It.php \u0026#39;} The function runs () {add_action (\u0026#39; init \u0026#39; start \u0026#39;) } Run ();
As you can see, we just called the other two files from here: Quadlayers-Frontend-IT.PHP
and
Quadlayers-Backend-IT. pHP
. Obviously, one will work at the front end and the other will work separately. You can clearly infer with their documents.
Among them, we can ensure Conditions with is_admin () . This means that it will only trigger it when the administrator is on the WP administrator’s dashboard. Now, there will be some errors on your website, because the front and back -end files do not exist. So let’s continue creating them. Create a new folder in a plug -in directory called Includes
. Then, two other folders are added:
Backend and frontend
.
In order to get rid of the wrong path error, please create two empty files in each folder:
Quadlayers-backend-IT.PHP In the back-end folder, Quadlayers -frontend-init.php In the front-end folder. So this will be our final plug -in file structure:
] QuadLayers_CUSTOM_PRODUCTS __quadlayers_cp.php __ Including __quadlayers-backend-init.php __.123]
3. The back -end option
After adding the main file, we can start adding the back -end option of the plug -in. Here, we will create a plug -in menu tab on the WP management dashboard. This will allow users to choose some options to hide or display the front -end elements.
We will use the setting API provided by WP for this demonstration. If you don’t understand this yet, please don’t worry, because it is not difficult to learn, and there are a lot of documents about it.
If you want to learn more information, this is the complete guide of WP Settings API [ 123] Now, just copy and paste the following code to
Quadlayers-backend-IT.PHP
\u0026 lt; php add_action (\u0026#39; admin_init \u0026#39 ;, \u0026# 39;QuadLayers_display_options\u0026#39;); add_action(\u0026#39;admin_menu\u0026#39;, \u0026#39;QuadLAyers_cp_AdminMenu\u0026#39;); 函数QuadLAyers_cp_AdminMenu(){ add_menu_page( __(\u0026#39;QuadLayers Custom Products\u0026#39;, \u0026 #39; qlcp \u0026#39;), __ (\u0026#39; QuadLayers CUSTOM PRODUCTS \u0026#39;, \u0026#39; qlcp \u0026#39;), \u0026#39; Manage_optings \u0026#39; qlcp \u0026#39; \u0026#39;QuadLayersOptionsPage\u0026#39; ); } 函数QuadLayersOptionsPage() { \u0026gt; \u0026lt;form action\u003d\u0026quot;options.php\u0026quot; method\u003d\u0026quot;post\u0026quot;\u0026gt; \u0026lt;php settings_fields(\u0026#39;plugin_QL_Page\u0026#39; );; Submitted button (); \u0026 lt;/form \u0026 gt;\u0026lt;php}函数QuadLayers_display_options(){ register_setting(\u0026#39;plugin_QL_Page\u0026#39;, \u0026#39;qlcp_options\u0026#39;, \u0026#39;callbackValidation\u0026#39;); add_settings_section( \u0026#39;QuadLayers_pluginPage_section\u0026#39; , __(\u0026#39;QuadLayers 后端选项\u0026#39;, \u0026#39;qlcp\u0026#39;), \u0026#39;QuadLayersSettingsSectionCallback\u0026#39;, \u0026#39;plugin_QL_Page\u0026#39; ); 添加设置字段（ \u0026 #39;QuadLayers_checkbox_field_1\u0026#39;, esc_attr__(\u0026#39;标题\u0026#39;, \u0026#39;qlcp\u0026#39;), \u0026#39;QuadLayersCheckboxRender_1\u0026#39;, \u0026#39;plugin_QL_Page\u0026#39;, \u0026# 39;QuadLayers_pluginPage_section\u0026#39; ); 添加设置字段（ \u0026#39;QuadLayers_checkbox_field_2\u0026#39;, esc_attr__(\u0026#39;数量\u0026#39;, \u0026#39;qlcp\u0026#39;), \u0026#39;QuadLayersCheckboxRender_2\u0026#39 ;, \u0026#39;plugin_QL_Page\u0026#39;, \u0026#39;QuadLayers_pluginPage_section\u0026#39; ); 添加设置字段（ \u0026#39;QuadLayers_checkbox_field_3\u0026#39;, esc_attr__(\u0026#39;SKU\u0026#39;, \u0026#39;qlcp\u0026 #39;), \u0026#39; QuadlayerscheckboxRender_3\u0026#39;, \u0026#39;plugin_QL_Page\u0026#39;, \u0026#39;QuadLayers_pluginPage_section\u0026#39; ); 添加设置字段（ \u0026#39;QuadLayers_checkbox_field_4\u0026#39;, esc_attr__(\u0026#39;Meta\u0026#39;, \u0026# 39;qlcp\u0026#39;), \u0026#39;QuadLayersCheckboxRender_4\u0026#39;, \u0026#39;plugin_QL_Page\u0026#39;, \u0026#39;QuadLayers_pluginPage_section\u0026#39; ); 添加设置字段（ \u0026#39;QuadLayers_checkbox_field_5\u0026#39;, esc_attr__ (\u0026#39;描述标签\u0026#39;, \u0026#39;qlcp\u0026#39;), \u0026#39;QuadLayersCheckboxRender_5\u0026#39;, \u0026#39;plugin_QL_Page\u0026#39;, \u0026#39;QuadLayers_pluginPage_section\u0026#39; );添加设置字段（ \u0026#39;QuadLayers_checkbox_field_6\u0026#39;, esc_attr__(\u0026#39;价格\u0026#39;, \u0026#39;qlcp\u0026#39;), \u0026#39;QuadLayersCheckboxRender_6\u0026#39;, \u0026#39;plugin_QL_Page\u0026# 39;, \u0026#39;QuadLayers_pluginPage_section\u0026#39; );}函数QuadLayersSettingsSectionCallback(){ echo wp_kses_post(\u0026#39;QuadLAyers 自定义插件的设置页面\u0026#39;);}函数QuadLayersCheckboxRender_1(){ $options \u003d get_option(\u0026#39;qlcp_options\u0026#39;); \u0026gt; \u0026lt;input name\u003d\u0026quot;qlcp_options[QuadLayers_checkbox_field_1]\u0026quot; type\u003d\u0026quot;checkbox\u0026quot; /\u0026gt; 检查\u0026lt;php } \u0026gt;value \u003d \u0026quot;1\u0026quot;\u0026gt ; }函数QuadLayersCheckboxRender_2(){ $options \u003d get_option(\u0026#39;qlcp_options\u0026#39;); \u0026gt; \u0026lt;input name\u003d\u0026quot;qlcp_options[QuadLayers_checkbox_field_2]\u0026quot; type\u003d\u0026quot;checkbox\u0026quot; /\u0026gt; 检查\u0026lt;php } \u0026gt;value \u003d \u0026quot;1\u0026quot;\u0026gt; }函数QuadLayersCheckboxRender_3(){ $options \u003d get_option(\u0026#39;qlcp_options\u0026#39;); \u0026gt; \u0026lt;input name\u003d\u0026quot;qlcp_options[QuadLayers_checkbox_field_3]\u0026quot; type\u003d\u0026quot ;checkbox\u0026quot; /\u0026gt; 检查\u0026lt;php } \u0026gt;value \u003d \u0026quot;1\u0026quot;\u0026gt; }函数QuadLayersCheckboxRender_4(){ $options \u003d get_option(\u0026#39;qlcp_options\u0026#39;); \u0026gt; \u0026lt;input name\u003d\u0026quot ;qlcp_options[QuadLayers_checkbox_field_4]\u0026quot; type\u003d\u0026quot;checkbox\u0026quot; /\u0026gt; 检查\u0026lt;php } \u0026gt;value \u003d \u0026quot;1\u0026quot;\u0026gt; }函数QuadLayersCheckboxRender_5(){ $options \u003d get_option(\u0026#39;qlcp_options\u0026#39;); \u0026gt; \u0026lt;input name\u003d\u0026quot;qlcp_options[QuadLayers_checkbox_field_5]\u0026quot; type\u003d\u0026quot;checkbox\u0026quot; /\u0026gt; 检查\u0026lt;php } \u0026gt;value \u003d \u0026quot;1\u0026quot ;\u0026gt; }函数QuadLayersCheckboxRender_6(){ $options \u003d get_option(\u0026#39;qlcp_options\u0026#39;); \u0026gt; \u0026lt;input name\u003d\u0026quot;qlcp_options[QuadLayers_checkbox_field_6]\u0026quot; type\u003d\u0026quot;checkbox\u0026quot; /\u0026gt; 检查\u0026lt ; php} \u0026 gt; value \u003d \u0026 quot; 1 \u0026 quot; \u0026 gt;}
Now, reload the back -end screen or activate your plug -in, you will see a new tab on the sidebar of the instrument panel menu.
WP Set API will be wp_optingS Database table stores an array containing all these options. You can check it by opening PHPMYADMIN on the local host and searching it in the table.
Because this is the newly created data, it should be found at the end of the table
Of course, qlcp_options in the screenshot above ] The array is empty. This is because all the check boxes were not selected at this time. You can try to check some of them and return PHPMYADMIN to see how the WP settings API stores data.
Now we can store the option array in the database, we need to obtain these options and use them at the front end. These options will allow users to hide or display various elements on your website.
4. The front -end option
To add the front end option, just copy and paste the following code to
quadlAyers-Frontend-IT.PHP file.
This will be obtained from the database, which is stored in a array from the back -end file.
After that, it will hide the specific elements of the product page, which is true based on the options.
\u0026lt;php$options \u003d get_option(\u0026#39;qlcp_options\u0026#39;);if(!is_string($options)): // 标题if(isset($options[\u0026#39;QuadLayers_checkbox_field_1\u0026# 39;])){ remove_action(\u0026#39;woocommerce_single_product_summary\u0026#39;, \u0026#39;woocommerce_template_single_title\u0026#39;, 5); } // 数量if(isset($options[\u0026#39;QuadLayers_checkbox_field_2\u0026#39;]) ){ add_filter(\u0026#39;woocommerce_is_sold_individually\u0026#39;, 函数($return, $product) { 返回真； }, 10, 2 ); } // SKU if(isset($options[\u0026#39;QuadLayers_checkbox_field_3\u0026#39 ))) {add_filter (\u0026#39; wc_product_sku_enabled \u0026#39;, function ($ enable) {return $ enable;} // yuan if (isset ($ options [\u0026#39; quadlayers_checkbox_44_44_4 c4_44444_4 qield_444_4\u00264_444444_4 ches_checkbox_4444_4 ches.)){ remove_action(\u0026#39;woocommerce_single_product_summary\u0026#39;, \u0026#39;woocommerce_template_single_meta\u0026#39;, 40); } // 描述选项卡if(isset($options[\u0026#39;QuadLayers_checkbox_field_5\u0026#39;])) {add_filter (\u0026#39; woocommerce_product_tabs \u0026#39;, function ($ tags) {uncompromising ($ tabs [\u0026#39; description \u0026#39;]); return $ tags;}, 11); Isset ($ Options [\u0026#39; Quadlayers_checkbox_field_6 \u0026#39;]) {add_filter (\u0026#39; woocommere_get_html \u0026#39; function ($ price) {}]}}} Contain all code in
if (IS_STRING ($ Options))
condition. Therefore, we can check whether there is no selected check box. In this case, the database value will be a string. Then we don't need to run this code at all.
In addition, please note that we use anonymous functions. Its working principle is exactly the same as the naming function. But we just make a shorter code for this guide for beginners. Therefore, if some values \u200b\u200bare stored in the database, each function of this code will delete specific elements according to the specific index of the existence database.
As a beginner, understanding how we interact with the database are important to you. Our two files interact with it, but there is no connection between these files anyway. You can even delete one file, and another file can still work because the database still has the required value.
That’s it. At this moment, you should be able to create a customWordPress plug -in to select which elements are hidden or displayed on the product page.
后端
前端
[123 ] Conclusion
This is our guide to how to create a custom WordPress plug -in. If you want to provide a very specific feature for your website and don’t want your website to be confused due to the overwhelming function of the dedicated WP plug -in, custom plug -in is very useful. 
In short, these are the main steps for creating custom plugins:
Create the main plug -in file
Add the back -end option
- Add the front end options to add front end options
- The main plug -in file itself should contain the back -end and front -end files of the custom plug -in. Then you can further add the back -end option of the plug -in, and then the front end option. We created a custom plug -in to hide the elements of the product page. However, you can further modify these files to create plugins with specific functions you need.
- Nevertheless, if you still want to use a special plug -in, you can do this. But for paid plugins, you must manually install the plug -in. You can even use plugins such as WooCommerce Direct Checkout and Woocommerce Checkout Manager to hide elements in other pages such as checkout pages.
At the same time, there are some posts that you may be interested in here:
Best Woocommerce checkout plug -in
How to create a direct account link of WOOCOMMERCE
- The best plug -in to complete the order of WOOCOMMERCE orders
- We hope you can develop custom plug -in in Woocommerce without any problems. Please share your experience with us in the comments.