Creating Your Own Theme Plugin
How to create your own theme for QuotesDLX.
You'll want to create a custom plugin if you're creating a theme. You can then share the plugin if you'd like others to have your custom Quotes theme. If you want to sell your theme, please get in touch and we can work out an agreement.
Before the themes are loaded in via code, the action
quotes_dlx_pre_themes_loaded is triggered, which allows you to "hook" in and initialize your own themes.From there, you can use the filter
quotes_dlx_themes to add in your theme callback.Here's a sample of how to do this using a composer autoloader with a PHP namespace:
quotes-dlx-forest-theme.php
1
<?php
2
/**
3
* Plugin Name: QuotesDLX Forest Theme
4
* Plugin URI: https://dlxplugins.com/plugins/quotesdlx/
5
* Description: Green forest theme for QuotesDLX.
6
* Version: 1.0.0
7
* Requires at least: 5.9
8
* Requires PHP: 7.2
9
* Author: MediaRon LLC
10
* Author URI: https://mediaron.com
11
* License: GPL v2 or later
12
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
13
* Text Domain: quotes-dlx
14
* Domain Path: /languages
15
*
16
* @package QuotesDLX
17
*/
18
19
namespace MediaRonLLC\QuotesDLXThemes;
20
21
// Support for site-level autoloading.
22
if ( file_exists( __DIR__ . '/lib/autoload.php' ) ) {
23
require_once __DIR__ . '/lib/autoload.php';
24
}
25
26
/**
27
* Add your own theme to QuotesDLX.
28
*
29
* @param array $themes Existing themes that are to be registered.
30
*/
31
function add_themes( $themes ) {
32
$themes[] = __NAMESPACE__ . '\ForestTheme\Themes_Forest';
33
return $themes;
34
}
35
36
/**
37
* Theme initialization has begun.
38
*/
39
function theme_registration_init() {
40
41
// Init filter to add a theme to the defaults.
42
add_filter( 'quotes_dlx_themes', __NAMESPACE__ . '\add_themes' );
43
}
44
add_action( 'quotes_dlx_pre_themes_loaded', __NAMESPACE__ . '\theme_registration_init' );
45
One important note is when you use the
quotes_dlx_themes filter callback, you must provide the class file of your theme initialization file (more on that in a bit).You can expect the following if you inspect the
$themes array, and you would add or subtract from this array depending on your needs.Array
(
[0] => MediaRonLLC\QuotesDLX\Themes\Themes_Bubble_Gum
[1] => MediaRonLLC\QuotesDLX\Themes\Themes_Dark
[2] => MediaRonLLC\QuotesDLX\Themes\Themes_Light_Branded
[3] => MediaRonLLC\QuotesDLX\Themes\Themes_Blue
[4] => MediaRonLLC\QuotesDLX\Themes\Themes_Purple
)
After you've added in your own theme, it may look something like this:
Array
(
[0] => MediaRonLLC\QuotesDLX\Themes\Themes_Bubble_Gum
[1] => MediaRonLLC\QuotesDLX\Themes\Themes_Dark
[2] => MediaRonLLC\QuotesDLX\Themes\Themes_Light_Branded
[3] => MediaRonLLC\QuotesDLX\Themes\Themes_Blue
[4] => MediaRonLLC\QuotesDLX\Themes\Themes_Purple
[5] => MediaRonLLC\QuotesDLXThemes\ForestTheme\Themes_Forest
)
The above expects the
Themes_Forest class to be in a ForestTheme directory. Here's a snippet of the code for reference:/**
* Add your own theme to QuotesDLX.
*
* @param array $themes Existing themes that are to be registered.
*/
function add_themes( $themes ) {
$themes[] = __NAMESPACE__ . '\ForestTheme\Themes_Forest';
return $themes;
}
All of the themes extend a base class that assists in add-on registration. All you need is to extend the class and add in your own settings.
The Theme add-on class can be found here within the QuotesDLX plugin:
├─ php
│ ├─ Themes
│ │ ├─ Themes_Addon.php
Your first task when creating the theme initialization file is to extend the
Themes_Addon class.<?php
/**
* Initialization for the light theme.
*
* @package quotes-dlx
*/
namespace MediaRonLLC\QuotesDLXThemes\ForestTheme;
use MediaRonLLC\QuotesDLX\Themes\Themes_Addon as Themes_Addon;
/**
* Holds variables for the Forest theme.
*/
class Themes_Forest extends Themes_Addon {
In this case, you'd:
- 1.Set up a custom namespace for your file
- 2.Use the QuotesDLX Themes_Addon class as a reference
- 3.Extend the Themes_Addon class.
Themes_Forest.php
1
<?php
2
/**
3
* Initialization for the forest theme.
4
*
5
* @package quotes-dlx
6
*/
7
8
namespace MediaRonLLC\QuotesDLXThemes\ForestTheme;
9
10
use MediaRonLLC\QuotesDLX\Themes\Themes_Addon as Themes_Addon;
11
12
/**
13
* Holds variables for the Forest theme.
14
*/
15
class Themes_Forest extends Themes_Addon {
16
17
/**
18
* Contains an instance of this class, if available.
19
*
20
* @since 1.0.0
21
* @var Themes_Forest $instance If available, contains an instance of this class
22
*/
23
private static $instance = null;
24
25
/**
26
* Theme name.
27
*
28
* @var string $name The theme name.
29
*/
30
protected static $name = 'Forest';
31
32
/**
33
* Slug for the theme.
34
*
35
* @var string $slug The theme slug.
36
*/
37
protected static $slug = 'forest';
38
39
/**
40
* Category for the theme.
41
*
42
* @var string $category The theme category.
43
*/
44
protected static $category = 'core';
45
46
/**
47
* Theme version.
48
*
49
* @var string $version The theme version.
50
*/
51
protected static $version = '1.0.0';
52
53
/**
54
* Description for the theme.
55
*
56
* @var string $theme_description The theme description.
57
*/
58
protected static $theme_description;
59
60
/**
61
* Author name.
62
*
63
* @var string $author_name The author of the theme.
64
*/
65
protected static $author_name = 'Ronald Huereca';
66
67
/**
68
* Author URL.
69
*
70
* @var string $author_url URL for the author.
71
*/
72
protected static $author_url = 'https://mediaron.com';
73
74
/**
75
* Large Image Width. Used for previews.
76
*
77
* @var int $full_width Image width of full-size image.
78
*/
79
protected static $full_width = 900;
80
81
/**
82
* Large Image height. Used for previews.
83
*
84
* @var int $full_height Image height of full-size image.
85
*/
86
protected static $full_height = 500;
87
88
/**
89
* Theme color or gradient.
90
*
91
* @var string $preview_color The theme preview color hexcode or gradient color.
92
*/
93
protected static $preview_gradient = 'linear-gradient(90deg, rgba(58,73,40,1) 14%, rgba(109,74,59,1) 85%);';
94
95
/**
96
* Preview URL image for theme.
97
*
98
* @var string $preview_image_url The theme preview image URL.
99
*/
100
protected static $preview_image_url = '';
101
102
/**
103
* Accent Color (hex code) for the theme.
104
*
105
* @var string $accent_color Accent color of theme.
106
*/
107
protected static $accent_color = '#657786';
108
109
/**
110
* Returns an instance of this class, and stores it in the $instance property.
111
*
112
* @since 1.0.0
113
*
114
* @return ThemesForest $instance An instance of the Themes_Light_Branded class
115
*/
116
public static function get_instance() {
117
118
if ( null === self::$instance ) {
119
self::$instance = new Themes_Forest();
120
}
121
122
return self::$instance;
123
}
124
125
/**
126
* Get the name of the theme.
127
*/
128
protected static function get_name() {
129
return _x( 'Forest', 'A lucious green forest theme to make your quotes stand out.', 'quotes-dlx' );
130
}
131
132
/**
133
* Get the slug of the theme.
134
*/
135
protected static function get_slug() {
136
return self::$slug;
137
}
138
139
/**
140
* Get the preview gradient of the theme.
141
*/
142
protected static function get_preview_gradient() {
143
return self::$preview_gradient;
144
}
145
146
/**
147
* Get the stylesheet URL.
148
*/
149
protected static function get_stylesheet_url() {
150
return plugins_url( 'dist/theme-forest-css.css', dirname( __FILE__ ) );
151
}
152
153
/**
154
* Get the image preview URL.
155
*/
156
protected static function get_preview_image_url() {
157
return plugins_url( 'images/forest-theme-preview.jpg', dirname( __FILE__ ) );
158
}
159
160
/**
161
* Get the category.
162
*/
163
protected static function get_category() {
164
return self::$category;
165
}
166
167
/**
168
* Get the author.
169
*
170
* @return string author.
171
*/
172
protected static function get_author() {
173
return self::$author_name;
174
}
175
176
/**
177
* Get the author url.
178
*
179
* @return string Author URL.
180
*/
181
protected static function get_author_url() {
182
return self::$author_url;
183
}
184
185
/**
186
* Get the theme description.
187
*
188
* @return string Theme description.
189
*/
190
protected static function get_description() {
191
self::$theme_description = __( 'A lucious green forest theme to make your quotes stand out. Works great on a dark or light background.', 'quotes-dlx' );
192
return self::$theme_description;
193
}
194
195
/**
196
* Get the theme version.
197
*
198
* @return string Theme version.
199
*/
200
protected static function get_version() {
201
return self::$version;
202
}
203
204
/**
205
* Get the theme image preview width.
206
*
207
* @return int Theme image width.
208
*/
209
protected static function get_image_width() {
210
return self::$full_width;
211
}
212
213
/**
214
* Get the theme image preview height.
215
*
216
* @return int Theme image height.
217
*/
218
protected static function get_image_height() {
219
return self::$full_height;
220
}
221
222
/**
223
* Get the colors of the theme.
224
*
225
* @return array $args {
226
* @type string $name Name of the color.
227
* @type string $slug Slug of the color.
228
* @type string $color Hex code (including #) of the color.
229
* }
230
*/
231
protected static function get_colors() {
232
return array(
233
array(
234
'name' => __( 'Primary', 'quotes-dlx' ),
235
'slug' => 'primary',
236
'color' => '#3A4928',
237
),
238
array(
239
'name' => __( 'Secondary', 'quotes-dlx' ),
240
'slug' => 'secondary',
241
'color' => '#6d4a3b',
242
),
243
array(
244
'name' => __( 'Accent', 'quotes-dlx' ),
245
'slug' => 'accent',
246
'color' => '#cc7000',
247
),
248
array(
249
'name' => __( 'Text Color', 'quotes-dlx' ),
250
'slug' => 'text-color',
251
'color' => '#FFFFFF',
252
),
253
array(
254
'name' => __( 'Quotes Color', 'quotes-dlx' ),
255
'slug' => 'quotes-color',
256
'color' => '#cebfb9',
257
),
258
array(
259
'name' => __( 'Border Color', 'quotes-dlx' ),
260
'slug' => 'border-color',
261
'color' => '#685046',
262
),
263
array(
264
'name' => __( 'Inner Background Color', 'quotes-dlx' ),
265
'slug' => 'inner-background-color',
266
'color' => '#FFFFFF',
267
),
268
array(
269
'name' => __( 'Buttons Primary Color', 'quotes-dlx' ),
270
'slug' => 'button-primary-color',
271
'color' => '#6d4a3b',
272
),
273
array(
274
'name' => __( 'Buttons Secondary Color', 'quotes-dlx' ),
275
'slug' => 'button-secondary-color',
276
'color' => '#FFFFFF',
277
),
278
array(
279
'name' => __( 'Button Primary Text Color', 'quotes-dlx' ),
280
'slug' => 'button-primary-text-color',
281
'color' => '#FFFFFF',
282
),
283
array(
284
'name' => __( 'Button Secondary Text Color', 'quotes-dlx' ),
285
'slug' => 'button-secondary-text-color',
286
'color' => '#6d4a3b',
287
),
288
array(
289
'name' => __( 'Button Border', 'quotes-dlx' ),
290
'slug' => 'button-primary-border-color',
291
'color' => '#DDDDDD',
292
),
293
array(
294
'name' => __( 'Light', 'quotes-dlx' ),
295
'slug' => 'light',
296
'color' => '#FFFFFF',
297
),
298
array(
299
'name' => __( 'Dark', 'quotes-dlx' ),
300
'slug' => 'dark',
301
'color' => '#2B2B2B',
302
),
303
);
304
}
305
}
306
Let's go over the important bits.
/**
* Theme name.
*
* @var string $name The theme name.
*/
protected static $name = 'Forest';
This is the name or label of your theme. You can name your theme anything you like, but be mindful that you'll need a unique slug.
/**
* Slug for the theme.
*
* @var string $slug The theme slug.
*/
protected static $slug = 'forest';
This will be the slug you use in your stylesheet and also for saving theme options, so be sure it's unique.
/**
* Category for the theme.
*
* @var string $category The theme category.
*/
protected static $category = 'core';
Each theme can have a custom category. At the moment, there aren't enough themes to justify sorting, but this may be added in the future.
You can add your own custom categories by using the
Themes_Addon_Categories class. For example, here is how the Core category is created.Themes_Init.php
// Register any categories.
Themes_Addon_Categories::register(
'Core',
array(
'description' => __( 'Default themes that come with the plugin', 'quotes-dlx' ),
)
);
And the location of the categories class.
├─ php
│ ├─ Themes
│ │ ├─ Themes_Addon_Categories.php
Set your theme version here. This isn't being used at the moment, but it's a good practice to update your version with every theme update.
/**
* Theme version.
*
* @var string $version The theme version.
*/
protected static $version = '1.0.0';
/**
* Description for the theme.
*
* @var string $theme_description The theme description.
*/
protected static $theme_description;
You would leave this empty and use a getter to return the theme's description.
/**
* Get the theme description.
*
* @return string Theme description.
*/
protected static function get_description() {
self::$theme_description = __( 'A lucious green forest theme to make your quotes stand out. Works great on a dark or light background.', 'quotes-dlx' );
return self::$theme_description;
}
Fill out your name here.
/**
* Author name.
*
* @var string $author_name The author of the theme.
*/
protected static $author_name = 'Ronald Huereca';
You can fill in your website domain here.
/**
* Author URL.
*
* @var string $author_url URL for the author.
*/
protected static $author_url = 'https://mediaron.com';
For the preview that shows in the theme options, it is recommended to specify the exact size.
Preview Sizes: The recommended size is 900x500.
/**
* Large Image Width. Used for previews.
*
* @var int $full_width Image width of full-size image.
*/
protected static $full_width = 900;
/**
* Large Image height. Used for previews.
*
* @var int $full_height Image height of full-size image.
*/
protected static $full_height = 500;
A preview gradient will show up in the block editor to showcase your primary and secondary colors.
Theme Preview Gradients
/**
* Theme color or gradient.
*
* @var string $preview_color The theme preview color hexcode or gradient color.
*/
protected static $preview_gradient = 'linear-gradient(90deg, rgba(58,73,40,1) 14%, rgba(109,74,59,1) 85%);';
You can leave this blank.
/**
* Preview URL image for theme.
*
* @var string $preview_image_url The theme preview image URL.
*/
protected static $preview_image_url = '';
Use this to return a localized version of the name of the theme.
/**
* Get the name of the theme.
*/
protected static function get_name() {
return _x( 'Forest', 'A lucious green forest theme to make your quotes stand out.', 'quotes-dlx' );
}
This will return the slug for the theme.
/**
* Get the slug of the theme.
*/
protected static function get_slug() {
return self::$slug;
}
This will return the preview gradient set.
// Some code/**
* Get the preview gradient of the theme.
*/
protected static function get_preview_gradient() {
return self::$preview_gradient;
}
This will return the location to your CSS file for the theme.
/**
* Get the stylesheet URL.
*/
protected static function get_stylesheet_url() {
return plugins_url( 'dist/theme-forest-css.css', dirname( __FILE__ ) );
}
This will return the path to the image used in the theme preview.
/**
* Get the image preview URL.
*/
protected static function get_preview_image_url() {
return plugins_url( 'images/forest-theme-preview.jpg', dirname( __FILE__ ) );
}
This will return the theme's category.
/**
* Get the category.
*/
protected static function get_category() {
return self::$category;
}
This will return the theme's author.
/**
* Get the author.
*
* @return string author.
*/
protected static function get_author() {
return self::$author_name;
}
This will return the website for the theme's author.
/**
* Get the author url.
*
* @return string Author URL.
*/
protected static function get_author_url() {
return self::$author_url;
}
Return a translatable theme description.
/**
* Get the theme description.
*
* @return string Theme description.
*/
protected static function get_description() {
self::$theme_description = __( 'A lucious green forest theme to make your quotes stand out. Works great on a dark or light background.', 'quotes-dlx' );
return self::$theme_description;
}
Return the theme's version.
/**
* Get the theme version.
*
* @return string Theme version.
*/
protected static function get_version() {
return self::$version;
}
Return the width of the image
/**
* Get the theme image preview width.
*
* @return int Theme image width.
*/
protected static function get_image_width() {
return self::$full_width;
}
Return the height of the image.
/**
* Get the theme image preview height.
*
* @return int Theme image height.
*/
protected static function get_image_height() {
return self::$full_height;
}
Define your own colors, slugs, and labels for the theme.
The slug: the slug is important as a CSS variable will be created based on your theme slug and your color slug.
For example, with a color slug of "purple" and a theme slug of "forest", the following CSS variable will be created:
--qdlx-forest-purple: {your color}You can then reference this variable in your CSS file:
blockquote { color: var( --qdlx-forest-purple, #67009C ); }/**
* Get the colors of the theme.
*
* @return array $args {
* @type string $name Name of the color.
* @type string $slug Slug of the color.
* @type string $color Hex code (including #) of the color.
* }
*/
protected static function get_colors() {
return array(
array(
'name' => __( 'Primary', 'quotes-dlx' ),
'slug' => 'primary',
'color' => '#3A4928',
),
array(
'name' => __( 'Secondary', 'quotes-dlx' ),
'slug' => 'secondary',
'color' => '#6d4a3b',
),
array(
'name' => __( 'Accent', 'quotes-dlx' ),
'slug' => 'accent',
'color' => '#cc7000',
),
array(
'name' => __( 'Text Color', 'quotes-dlx' ),
'slug' => 'text-color',
'color' => '#FFFFFF',
),
array(
'name' => __( 'Quotes Color', 'quotes-dlx' ),
'slug' => 'quotes-color',
'color' => '#cebfb9',
),
array(
'name' => __( 'Border Color', 'quotes-dlx' ),
'slug' => 'border-color',
'color' => '#685046',
),
array(
'name' => __( 'Inner Background Color', 'quotes-dlx' ),
'slug' => 'inner-background-color',
'color' => '#FFFFFF',
),
array(
'name' => __( 'Buttons Primary Color', 'quotes-dlx' ),
'slug' => 'button-primary-color',
'color' => '#6d4a3b',
),
array(
'name' => __( 'Buttons Secondary Color', 'quotes-dlx' ),
'slug' => 'button-secondary-color',
'color' => '#FFFFFF',
),
array(
'name' => __( 'Button Primary Text Color', 'quotes-dlx' ),
'slug' => 'button-primary-text-color',
'color' => '#FFFFFF',
),
array(
'name' => __( 'Button Secondary Text Color', 'quotes-dlx' ),
'slug' => 'button-secondary-text-color',
'color' => '#6d4a3b',
),
array(
'name' => __( 'Button Border', 'quotes-dlx' ),
'slug' => 'button-primary-border-color',
'color' => '#DDDDDD',
),
array(
'name' => __( 'Light', 'quotes-dlx' ),
'slug' => 'light',
'color' => '#FFFFFF',
),
array(
'name' => __( 'Dark', 'quotes-dlx' ),
'slug' => 'dark',
'color' => '#2B2B2B',
),
);
}
You can add as little or as many colors as you would like. These colors will show up as swatches when customizing a theme's colors.
Colors Show Up When Customizing a Theme
Last modified 1yr ago