Download the PHP package devhunters/devhunters-fw without Composer

DevHunters Framework: A Framework to Make Creating WordPress Plugins Easier

Introduction

A framework that makes it easier to create WordPress plugins. It offers many features, such as:

1. custom fields
2. simple visual builder with modals
3. creating dashboard menus via settings
4. creating custom post types via settings
5. dynamic sidebars feature
6. registering custom sidebars via settings

Requirements

1. PHP 7.4 and above
2. WordPress 6.7 and above

Table of Contents

1. Installation
2. How To Use In a Plugin
3. Features
   • Custom Fields
     • Containers
       • Simple
       • SideMenu
       • TabsMenu
     • Groups
       • Group
       • Tabs
       • Panel
       • Accordion
       • Addable Box
     • Toggles
       • Toggle
     • Fields
       • Input
       • Textarea
       • Checkbox
       • Radio
       • WPEditor
       • Switch
       • Dropdown
       • Dropdown Multiple
       • MultiInput
       • AceEditor
       • ColorPicker
       • DatePicker
       • TimePicker
       • DateTimePicker
       • Range Slider
       • Radio Image
       • Multi Options
       • Dimensions
       • Upload
       • Upload Image
       • Upload Gallery
       • Icon
       • Typography
     • Fields Settings Elaborations
     • Live Fields Editing
     • How To Use
   • Dashboard Menus
     • How To Use
   • Custom Posts
     • How To Use
   • Custom Sidebars
     • How To Use
   • Dynamic Sidebars
     • How To Use
   • Visual Builder
4. Framework Utilities
   • Manifest
   • MakeFile
   • Functions
   • Custom Hooks
   • Custom Filters
   • Constants
5. Translation
6. Licence
7. Authors

Installation

You can install the framework in two ways:

1. As a plugin:
   • Clone the repository: git clone https://github.com/puyaalexxx/devhunters-fw.git
   • Install it as a WordPress Plugin

2. As a composer package:

   • Composer Package Link: devhunters-fw

   • Add it as a dependency in your plugin's composer.json file. You can adjust the version as needed.

   • Run composer install to install the package
   • Or run composer require devhunters/devhunters-fw to install it.

Top ⬆️

How To Use In a Plugin

To use the framework functionality in your plugin and make it available, you need to activate your plugin code on the after_setup_theme hook.

All the plugin settings that you want to pass are used by convention. You can remove some of them and leave the defaults, that are these:

NOTE!!!plugin-settings-folder - this path will be concatenated to all the options and features folders and files, so if terms-options-folder will be options/terms/, the end result will be plugin-settings-folder + options/terms/

NOTE!!! All these settings can be overridden via filters. See Filters.

Top ⬆️

Features

All the framework features that you can use.

Custom Fields

===================================

You have 4 types of custom fields:

• Containers
• Groups
• Toggles
• Fields

You can use them from top to bottom. You can add fields inside toggles, toggles inside groups and groups inside containers, however you can't use them otherwise. You can't add containers inside fields, groups inside fields or containers inside toggles.

So it should be like this - Containers > Groups > Toggles > Fields

Containers

===================================

Containers are the top level custom fields that you can add to place other fields inside. There are 3 container types at the moment:

• Simple

Simple container is just a convenience to group the options

• SideMenu

SideMenu via refresh links - each menu link will open the provided page_link via refresh.

SideMenu as tabs - 'subtype' => 'tabs' - each menu item will be opened as a tab on the same page.

• TabsMenu

Top ⬆️

Groups

===================================

• Group

A simple group field to group other fields.

• Tabs

Fullwidth:

• Panel

Fullwidth:

• Accordion

• Addable Box

Addable boxes, that you can add dynamically. The fields inside are loaded via ajax.

Top ⬆️

Toggles

===================================

• Toggle

A toggle field to show hide specific fields.

Top ⬆️

Fields

===================================

• Input

• Textarea

• Checkbox

• Radio

• Text

• WPEditor

• Switch

• Dropdown

• Dropdown Multiple

• MultiInput

• AceEditor

CSS:

JS:

• ColorPicker

RGBA:

• DatePicker

• TimePicker

• DateTimePicker

• Range Slider

Range True:

• Radio Image

• Multi Options

• Dimensions

• Upload

• Upload Image

• Upload Gallery

• Icon

• Typography

Fields Settings Elaborations:

'id' => 'general-side-menu-settings'- the fields is saved under this id, make sure that it is unique.

'save' => 'separately'- this setting will save each container individual field under its separate id, that you can retrieve via the standard WordPess function get_option("field id"). If the value is group, then all the options inside the container will be saved under the container id.

'attr' => array( 'class' => 'custom-class', 'data-foo' => 'bar' )- this will add any attributes that you want or class to the container div tag.

'value' => 'off'- the field default value.

'sortable' => true- make the fields sortable (this is supported by some fields only)

'fullwidth' => false- make the field fullwidth instead of 3 columns view (this is supported by some fields only)

'limit' => -1- max number of items that can be added dynamically. -1 means that there is no limit.

'tooltip' => _x( 'More description in tooltip', 'options', PREFIX )- additional description in a tooltip (this can be removed)

'divider' => true- this will add a border after the field

Top ⬆️

Live Fields Editing

===================================

Some of the custom fields can be used to add live changes. When you change the field value, you can target another elements on your page like HTML attributes, styles or text.

Fields that support live editing:

Live Editing Elaboration:

• A field can contain only one live setting.
• revert- is used for the VB modal, because if you change something there and then close the popup without saving it, then the revert => true, will restore the previous saved values.
• target- what exactly do you want to target on live editing. There are several available targets and each field support one or several of them, but not all of them. See above what target each field supports.
  • target : content - change content / html content
  • target : class - change class attribute
  • target : style - change item styles
  • target : display - show / hide elements
  • target : attr - change element attribute, selectors has the attribute name and the selectors of this attribute
• "selectors" => [ ".custom-class" ] - an array of selectors that you want to target
  • For VB modals, if you have several elements on the page and want to target that specific element when opening its modal, then you can add {{module-id}} to your selectors area. "selectors" => [ "#{{module-id}}.ppht-box .pht-box-title" ] - {{module-id}} will insert the module id. Each module has a generated unique id, that match the modal id. This way it will know what element exactly to target.

Top ⬆️

How To Use Fields:

============

You can use the custom fields by adding them in your settings/options folder in dashboard-pages, posts, terms and vb folders, see How to use in a Plugin section.

1. "dashboard-pages-options-folder" => "options/dashboard-pages/"- this is the default folder where it will look for the settings. You can override it.

   Inside this folder, you will create php files with the custom fields. The files should match the menu slug, used when creating the dashboard menus:

   • "menu_slug" => "general-settings" - will be general-settings.php file
   • "menu_slug" => "testing-settings" - will be testing-settings.php file

2. "post-types-options-folder" => "options/posts/"- this is the default folder where it will look for the settings. You can override it.

   Inside this folder, you will create php files with the custom fields. The files should match the post types names ( slugs):

   • "post" - will be post.php file
   • "page" - will be page.php file
   • "cpt-name" - will be cpt-name.php file

   Metaboxes:

   In post types, you will need to create metaboxes to add custom fields, which can be easily done using custom field containers:

   These are the same container fields, with some additions for metaboxes. For more info, check the WordPress Docs.

3. "terms-options-folder" => "options/terms/"- this is the default folder where it will look for the settings. You can override it.

   Inside this folder, you will create php files with the custom fields. The files should match the terms and category names (slugs):

   • "category" - will be category.php file
   • "custom-term-name" - will be custom-term-name.php file

4. "vb-modal-options-folder" => "options/vb/"- this is the default folder where it will look for the settings. You can override it.

   Inside this folder, you will create php files or folders with the custom fields. The folders should match the post types where you enabled the VB from "vb-register-on-post-types" => ["cpt1", "cpt2"] setting. Inside these folders you can add the modules files that will be available only inside that post type. You can also add modules PHP files inside the vb folder and these modules will be available across all post types where you enabled the VB. The modules files can have any names.

   • "vb/cpt-name/my-module.php" - my-module module will be available only inside the cpt-name post type
   • "vb/cpt-name/my-second-module.php" - my-second-module module will also be available only inside the cpt-name post type
   • "vb/my-other-module.php" - my-other-module module will be available across all post types where VB is present

Default Folders Structure Preview:

Top ⬆️

Dashboard Menus

===================================

You can easily create dashboard menus items by adding these settings to your plugin:

For more info, check the WordPress Docs.

How To Use Dashboard Menus:

============

You can create custom dashboard menus by adding the above code in your settings folder in dashboard-pages.php file, see How to use in a Plugin section.

"dash-menus-settings-file" => "dashboard-pages.php"- by default the file is dashboard-pages.php, but you can override it or add it to another folder like my-menus/my-menus.php

Top ⬆️

Custom Posts

===================================

You can create custom posts and terms via these settings in your plugin:

For more info, check the WordPress Docs.

How To Use Custom Posts:

============

You can create custom posts by adding the above code in your settings folder in cpts.php file, see How to use in a Plugin section.

"cpts-settings-file" => "cpts.php"- by default the file is cpts.php, but you can override it or add it to another folder like my-cpts/my-cpts.php

Top ⬆️

Custom Sidebars

===================================

You can create custom sidebars via these settings in your plugin:

For more info, check the WordPress Docs.

How To Use Sidebars:

============

You can create custom sidebars by adding the above code in your settings folder in sidebars.php file, see How to use in a Plugin section.

"sidebars-settings-file" => "sidebars.php"- by default the file is sidebars.php, but you can override it or add it to another folder like sidebars/my-sidebars.php

Top ⬆️

Dynamic Sidebars

===================================

You can enable the dynamic sidebar creation form in the Widgets area to dynamically create and remove sidebars.

How To Use Dynamic Sidebars:

============

You can enable this form by adding this code on your plugin. See How to use in a Plugin section.

"enable-dynamic-sidebars" => true - default is false

Top ⬆️

Visual Builder

This is a small visual builder feature that allows users to edit page elements through a modal. Each modal can contain custom fields. See How To Use Custom Fields section.

In order to enable the VB on an element, you need to add this function on the div element:

This function will add several attributes to your element in order to enable the Settings icon and the surrounding borders. It will also add an id attribute with your provided module id in the function.

$module_name- module name

$module_id- module id. Each module should have an id. The ids should not be the same. If on the same page there will be two modules with the same id, they will not work.

$settings- this feature is still in development. Currently, only the Settings icon is functional. In the future, additional icons for actions like remove, duplicate, and drag-and-drop may be added for the modules.

Top ⬆️

Framework Utilities

All framework helpers that you can use in your plugin

Manifest

===================================

There is a manifest.php file used to hold framework info like name, version, requirements and many more.

You can get this info via this function:

Print all its info to see what specific keys you can use:

Top ⬆️

MakeFile

===================================

The makefile will help you to install the dependencies like composer and npm ones. See Installation section.

make init- is the command needed to install the packages and generate the assets when you first download the plugin.

How it is displayed in terminal:

There is an .env file that has this constant defined DHT_IS_DEV_ENVIRONMENT. The bellow commands will behave differently if it is true or false.

If DHT_IS_DEV_ENVIRONMENT=true:

make init- this will install all Composer and npm packages and generate separate JS and CSS files that will not be minified.

make install- this will install all Composer and npm packages.

make vite- this will compile all the TS and PCSS files into separate JS and CSS files that will not be minified.

make vite main- this will compile all the TS and PCSS files into main.js and main.css files that will not be minified.

If DHT_IS_DEV_ENVIRONMENT=false:

make init- this will install all Composer and npm packages for production and generate minified main.js and main.css files.

make install- this will install all Composer and npm packages for production.

make vite- this will compile all the TS and PCSS files into separate, minified JS and CSS files.

make vite main- this will compile all the TS and PCSS files into minified main.js and main.css files.

Top ⬆️

Functions

===================================

Global functions that you can use on your end:

Top ⬆️

Custom Hooks

===================================

Top ⬆️

Custom Filters

===================================

Top ⬆️

Constants

===================================

You can find all the constants in the constants.php file.

Top ⬆️

Translation

The framework is fully translatable. You can use the Loco Translate plugin to translate the strings.

When installing it as a Composer package, you can integrate it into your plugin by following these steps:

Top ⬆️

License

The framework is released under the MIT License. See the LICENSE link for details.

Authors

The framework was created by Alex.