Skip to content

Commit 9a1c7bc

Browse files
committed
Added Customizer options example
1 parent ac2d95d commit 9a1c7bc

5 files changed

Lines changed: 131 additions & 34 deletions

File tree

README.md

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ Here are some ways that you can contribute:
3939
* Automatic translation file (`.pot`) creation. See [Translation](https://github.com/dmhendricks/wordpress-base-plugin/wiki/Translation).
4040
* Shortcodes, widgets (via [Carbon Fields](https://carbonfields.net)) and custom post types (via [PostTypes](https://github.com/jjgrainger/PostTypes/)) examples
4141
* Configuration registry ([docs](https://github.com/dmhendricks/wordpress-toolkit/wiki/ConfigRegistry)) and optional `wp-config.php` [constants](https://github.com/dmhendricks/wordpress-base-plugin/wiki/Configuration-&-Constants)
42+
* Adding options to Customizer example
4243
* [More to come...](#future-plans)
4344

4445
**Note:** Gulp and Bower are optional, but handy. If you do not wish to use them, you can delete the references.
@@ -72,8 +73,7 @@ See the [Getting Started](https://github.com/dmhendricks/wordpress-base-plugin/w
7273

7374
## Future Plans
7475

75-
* Add Customizer example
76-
* Refactor the Plugin base class for better organization and self-documentation
76+
* Refactor the Plugin base class
7777
* Add [phpdotenv](https://github.com/etelford/phpdotenv) support
7878
* Add some Carbon Fields CSS helper classes
7979

@@ -85,37 +85,11 @@ Release changes are noted on the [Releases](https://github.com/dmhendricks/wordp
8585

8686
* Replaced Carbon Fields Loader dependency with [official plugin](https://carbonfields.net/release-archive/)
8787
* Fixed non-static deprecation notice
88-
* Added support for before/after strings to prefix()
89-
* Added version check for wordpress-toolkit
90-
* Added get_wpsac_plugin_option() example to Plugin class
91-
92-
## Credits
93-
94-
Please support [humans.txt](http://humanstxt.org/). It's an initiative for knowing the people behind a web site. It's an unobtrusive text file that contains information about the different people who have contributed to building the web site.
95-
96-
**Carbon Fields**
97-
98-
URL: http://carbonfields.net/
99-
Author: htmlBurger.com
100-
Twitter: @htmlburger
101-
Author URI: https://htmlburger.com/
102-
Location: London, England
103-
104-
**WPGulp**
105-
106-
URL: https://labs.ahmadawais.com/WPGulp/
107-
Author: Ahmad Awais
108-
Twitter: @mrahmadawais
109-
Author URI: https://ahmadawais.com/
110-
Location: Asal, Pakistan
111-
112-
**PostTypes**
113-
114-
URL: https://github.com/jjgrainger/PostTypes/
115-
Author: Joe Grainger
116-
Twitter: @jjgrainger
117-
Author URI: https://jjgrainger.co.uk/
118-
Location: Falmouth, England
88+
* Added support for before/after strings to `prefix()`
89+
* Added version check for `wordpress-toolkit`
90+
* Added `get_wpsac_plugin_option()` example to Plugin class
91+
* Updated JS injection to use wordpress-toolkit [ScriptObject](https://github.com/dmhendricks/wordpress-toolkit/wiki/ScriptObject)
92+
* Added Customizer options example (via [inc2734/wp-customizer-framework](https://github.com/inc2734/wp-customizer-framework))
11993

12094
## Screenshot
12195

app/Plugin.php

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,9 @@ public function load_plugin() {
8585
// Alternatively, add admin settings page using wordpress-settings-api-class
8686
new Settings\WPSAC_Page();
8787

88+
// Add Customizer panels and options
89+
new Settings\Customizer_Options();
90+
8891
// Enqueue scripts and stylesheets
8992
new EnqueueScripts();
9093

app/Settings/Carbon_Page.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ private function create_tabbed_options_page() {
4747
Field::make( 'checkbox', $this->prefix( 'uninstall_remove_settings' ), __( 'Delete Plugin Settings On Uninstall', self::$textdomain ) ),
4848
Field::make( 'checkbox', $this->prefix( 'admin_bar_add_clear_cache' ), __( 'Add "Clear Cache" Link to Admin Bar Dropdown Menu', self::$textdomain ) )->set_default_value( true ),
4949
Field::make( 'checkbox', $this->prefix( 'remove_header_emojicons' ), __( 'Remove Emoji Code From Page Headers', self::$textdomain ) )
50-
->help_text( __( 'Checking this box will remove the default Emoji code from page headers.', self::$textdomain ) ),
50+
->help_text( __( 'Checking this box will remove the default Emoji code from page headers.', self::$textdomain ) ),
5151
Field::make( 'set', $this->prefix( 'enqueue_font_awesome' ), __( 'Load Font Awesome from CDN', self::$textdomain ) )
5252
->help_text( __( 'Load <a href="http://fontawesome.io/" target="_blank">Font Awesome</a> from <a href="https://www.bootstrapcdn.com/fontawesome/" target="_blank">CDN</a>.', self::$textdomain ) )
5353
->set_default_value( 'backend' )
Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<?php
2+
namespace VendorName\PluginName\Settings;
3+
use VendorName\PluginName\Plugin;
4+
use Inc2734\WP_Customizer_Framework\Customizer_Framework;
5+
use WordPress_ToolKit\Helpers\StringHelper;
6+
7+
/**
8+
* Add custom section to Customizer
9+
*
10+
* @link https://github.com/inc2734/wp-customizer-framework
11+
* @since 0.4.0
12+
*/
13+
class Customizer_Options extends Plugin {
14+
15+
protected $customizer;
16+
17+
function __construct() {
18+
19+
// Create a default section name based on the plugin's slug
20+
$slug = StringHelper::underscores( self::$config->get( 'plugin/slug' ) );
21+
22+
// Define Customizer sections and fields
23+
$this->customizer = Customizer_Framework::init();
24+
25+
// Add new panel
26+
$panel = $this->customizer->panel( $this->prefix( $slug ) . '_panel', [
27+
'title' => self::$config->get( 'plugin/meta/Name' )
28+
]);
29+
30+
// Add new section
31+
$section = $this->customizer->section( $this->prefix( 'my-plugin-section' ), [
32+
'title' => __( 'My Plugin Section', self::$textdomain ),
33+
'description' => __( 'Example Customizer Section', self::$textdomain )
34+
]);
35+
36+
// Define fields
37+
$controls = [
38+
$this->customizer->control( 'file', $this->prefix( 'favicon' ), [
39+
'label' => __( 'Favicon', self::$textdomain ),
40+
//'default' => get_home_url( null, 'favicon.ico' )
41+
]),
42+
$this->customizer->control( 'color', $this->prefix( 'hyperlink-color' ), [
43+
'label' => __( 'Hyperlink Color', self::$textdomain ),
44+
'default' => '#007acc'
45+
]),
46+
$this->customizer->control( 'checkbox', $this->prefix( 'hyperlink-underline' ), [
47+
'label' => __( 'Underline Hyperlinks', self::$textdomain ),
48+
'default' => false,
49+
'description' => __( 'Add underline to hyperlinks.', self::$textdomain )
50+
]),
51+
$this->customizer->control( 'color', $this->prefix( 'h2-color' ), [
52+
'label' => __( 'H2 Header Color', self::$textdomain ),
53+
'default' => '#1A1A1A'
54+
])
55+
];
56+
57+
// Add panel with section and fields
58+
foreach( $controls as $control ) {
59+
$control->join( $section )->join( $panel );
60+
}
61+
62+
// Initialize Customizer options
63+
add_action( 'wp_loaded', array( $this, 'init_customizer_options' ) );
64+
65+
// Inject favicon link into page head
66+
add_action( 'wp_head', array( $this, 'inject_customizer_options'), 1 );
67+
68+
}
69+
70+
/**
71+
* Initialize Customizer option sections and fields
72+
* @since 0.4.0
73+
*/
74+
public function init_customizer_options() {
75+
76+
$cfs = $this->customizer->styles();
77+
78+
// Inject hyperlink style
79+
$hyperlink_color = get_theme_mod( $this->prefix( 'hyperlink-color' ) );
80+
$hyperlink_underline = get_theme_mod( $this->prefix( 'hyperlink-underline' ) ) ? 'underline' : 'none';
81+
82+
$cfs->register([
83+
'a' // CSS selector
84+
],
85+
[
86+
"color: {$hyperlink_color}",
87+
"text-decoration: {$hyperlink_underline}",
88+
]
89+
//,'@media (min-width: 768px)' // Optional
90+
);
91+
92+
// Inject H2 color style
93+
$h2_color = get_theme_mod( $this->prefix( 'h2-color' ) );
94+
95+
$cfs->register([
96+
'h2' // CSS selector
97+
],
98+
[
99+
"color: {$h2_color}"
100+
]
101+
);
102+
103+
}
104+
105+
/**
106+
* Add relevant Customizer options to page head
107+
* @since 0.4.0
108+
*/
109+
public function inject_customizer_options() {
110+
111+
$favicon = get_theme_mod( $this->prefix( 'favicon' ) );
112+
if( !$favicon ) return;
113+
$file_type = wp_check_filetype( $favicon );
114+
115+
echo sprintf('<link rel="icon" href="%s" type="%s" />', $favicon, $file_type['type'] );
116+
117+
}
118+
119+
}

composer.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"tgmpa/tgm-plugin-activation": "^2.6.1",
2525
"tareq1988/wordpress-settings-api-class": "dev-master",
2626
"dmhendricks/wordpress-toolkit": "dev-master",
27+
"inc2734/wp-customizer-framework": "^2.3",
2728
"composer/installers": "^1.4.0"
2829
},
2930
"minimum-stability": "dev",

0 commit comments

Comments
 (0)