Opções para o Tema
É possível construir uma página de Opções do Tema utilizando a classe Odin_Theme_Options
que pode ser encontrada em core/classes/class-theme-options.php
.
Instalação
Adicione a seguinte linha em seu functions.php
require_once get_template_directory() . '/core/classes/class-theme-options.php';
Criando Página
Devemos instanciar a classe Odin_Theme_Options
$odin_theme_options = new Odin_Theme_Options(
'slug-da-pagina', // Slug/ID da página (Obrigatório)
__( 'Opções do tema', 'odin' ), // Titulo da página (Obrigatório)
'manage_options' // Nível de permissão (Opcional) [padrão é manage_options]
);
2
3
4
5
Criando Abas
É possível criar quantas abas você quiser na página de opcões:
$odin_theme_options->set_tabs(
array(
array(
'id' => 'odin_general', // ID da aba e nome da entrada no banco de dados.
'title' => __( 'Configurações', 'odin' ), // Título da aba.
),
array(
'id' => 'odin_adsense',
'title' => __( 'Adsense', 'odin' )
)
)
);
2
3
4
5
6
7
8
9
10
11
12
Criando campos na página
Utilize do $set->fields
para criar todos os campos da página.
Será necessário criar um array que irá conter as sessões de cada aba.
Cada sessão irá indicar qual é a sua aba utilizando tab
, depois informar seu título com title
e finalmente suas opções com options
.
$odin_theme_options->set_fields(
array(
'general_section' => array(
'tab' => 'odin_general', // Sessão da aba odin_general
'title' => __( 'Section Example', 'odin' ),
'fields' => array(
array(
'id' => 'field1',
'label' => __( 'Field 1', 'odin' ),
'type' => 'text',
'default' => 'Hello world',
'description' => __( 'Descrition Example', 'odin' )
),
array(
'id' => 'field2',
'label' => __( 'Field 2', 'odin' ),
'type' => 'text'
)
)
),
'adsense_top_section' => array(
'tab' => 'odin_adsense', // Sessão da aba odin_adsense
'title' => __( 'Blocos Adsense Homepage', 'odin' ),
'fields' => array(
array(
'id' => 'banner1',
'label' => __( 'Banner 1', 'odin' ),
'type' => 'textarea',
'default' => 'Default text',
'description' => __( 'Descrition Example', 'odin' )
),
array(
'id' => 'banner2',
'label' => __( 'Banner 2', 'odin' ),
'type' => 'textarea'
)
)
),
'adsense_bottom_section' => array( // Segunda sessão para a aba odin_adsense
'tab' => 'odin_adsense',
'title' => __( 'Adsense Blocks Posts', 'odin' ),
'fields' => array(
array(
'id' => 'banner3',
'label' => __( 'Banner 1', 'odin' ),
'type' => 'textarea',
),
array(
'id' => 'banner4',
'label' => __( 'Banner 2', 'odin' ),
'type' => 'textarea'
)
)
),
)
);
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Tipos de Campo
text
Cria um campo comum de texto.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'text', // Obrigatório
'attributes' => array( // Opcional (atributos para input HTML/HTML5)
'placeholder' => __( 'Some text here!' )
),
'default' => 'Default text', // Opcional
'description' => __( 'Descrition Example', 'odin' ), // Opcional
)
2
3
4
5
6
7
8
9
10
textarea
Cria um campo de múltiplas linhas de texto.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'textarea', // Obrigatório
'attributes' => array( // Opcional (atributos para input HTML/HTML5)
'placeholder' => __( 'Some text here!' )
),
'default' => 'Default text', // Opcional
'description' => __( 'Descrition Example', 'odin' ), // Opcional
)
2
3
4
5
6
7
8
9
10
input
Cria um campo input em HTML que aceita os tipos do HTML5.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'field', // Obrigatório
'default' => 'Default text', // Opcional
'description' => __( 'Descrition Example', 'odin' ), // Opcional
'attributes' => array( // Opcional (atributos para input HTML/HTML5)
'type' => 'email',
'required' => 'required',
'class' => 'regular-text',
'styles' => 'background: #444;'
)
)
2
3
4
5
6
7
8
9
10
11
12
13
html
Permite utilizar livremente qualquer HTML dentro da página de Opções do Tema. Este campo não é salvo no banco de dados.
O HTML deve estar dentro do description
.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'HTML Example', 'odin' ), // Obrigatório
'type' => 'HTML', // Obrigatório
'description' => __( '<p>Paragraph Exemple</p>', 'odin' ) // Opcional
)
2
3
4
5
6
checkbox
Cria um campo de checkbox.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'checkbox', // Obrigatório
// 'attributes' => array(), // Opcional (atributos para input HTML/HTML5)
'default' => '', // Opcional (utilize 1 para deixar marcado como padrão)
'description' => __( 'Descrition Example', 'odin' ), // Opcional
)
2
3
4
5
6
7
8
select
Cria um campo de select.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'select', // Obrigatório
// 'attributes' => array(), // Opcional (atributos para input HTML/HTML5)
'default' => 'three', // Opcional
'description' => __( 'Descrition Example', 'odin' ), // Opcional
'options' => array( // Obrigatório (adicione aque os ids e títulos)
'one' => 'One',
'two' => 'Two',
'three' => 'Three',
'four' => 'Four'
),
)
2
3
4
5
6
7
8
9
10
11
12
13
14
radio
Cria um campo de radio.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'radio', // Obrigatório
// 'attributes' => array(), // Opcional (atributos para input HTML/HTML5)
'default' => 'three', // Opcional
'description' => __( 'Descrition Example', 'odin' ), // Opcional
'options' => array( // Obrigatório (adicione aque os ids e títulos)
'one' => 'One',
'two' => 'Two',
'three' => 'Three',
'four' => 'Four'
),
)
2
3
4
5
6
7
8
9
10
11
12
13
14
editor
Cria um campo com editor de texto.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'editor', // Obrigatório
'default' => 'Default text', // Opcional
'description' => __( 'Descrition Example', 'odin' ), // Opcional
'options' => array( // Opcional (aceita argumentos do wp_editor)
'textarea_rows' => 10
),
)
2
3
4
5
6
7
8
9
10
O parâmetro options
aceita todos os argumentos de wp_editor
Para utilizar o campo no tema, utilizar shortcodes no editor e não ter problemas na formatação utilize a seguinte função:
echo wpautop( do_shortcode( $your_id_name ) );
image
Cria um campo para upload de imagem. Este campo salva apenas o ID da imagem e não o seu caminho completo.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'image', // Obrigatório
'default' => '', // Opcional (deve ser o id de uma imagem em mídia)
'description' => __( 'Descrition Example', 'odin' ), // Opcional
)
2
3
4
5
6
7
Para recuperar as informações das imagens utilize as funções nativas do WordPress:
image_plupload
Cria um campo para múltiplo upload de imagens.
Este campo salva os ids das imagens, separando cada um por virgula.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'image_plupload', // Obrigatório
'default' => '', // Opcional (deve ser o id de uma imagem em mídias, separe os ids com virtula)
'description' => __( 'Descrition Example', 'odin' ), // Opcional
)
2
3
4
5
6
7
Para utilizar as imagens será necessário criar um array:
foreach ( explode( ',', $gallery ) as $image_id ) {
// Sua mágica aqui!
}
2
3
upload
Cria um campo de upload de arquivo.
Diferente dos campos de image e image_plupload este campo salva a url do arquivo.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'upload', // Obrigatório
// 'attributes' => array(), // Opcional (atributos para input HTML/HTML5)
'default' => '', // Opcional (url de um arquivo)
'description' => __( 'Descrition Example', 'odin' ), // Opcional
)
2
3
4
5
6
7
8
color
Cria um campo de seleção de cor.
array(
'id' => 'your_id_name', // Obrigatório
'label' => __( 'Text Example', 'odin' ), // Obrigatório
'type' => 'color', // Obrigatório
// 'attributes' => array(), // Opcional (atributos para input HTML/HTML5)
'default' => '#ffffff', // Opcional (cor em hexadecimal)
'description' => __( 'Descrition Example', 'odin' ), // Opcional
)
2
3
4
5
6
7
8
Utilizando os Campos
Para utilizar as opções salvas em seu tema é necessário criar uma variável que irá armazenar todos os campos salvos na “aba”. Basta passar o id da aba da seguinte forma:
$odin_general_opts = get_option( 'odin_general' );
Depois é só chamar a variável criada com o id do campo desejado:
$odin_general_opts['your_id_name'];
Dica:
Para encontrar tanto o id da aba quanto do campo inspecione o input e observe a propriedade name. Em nosso exemplo o name é: name="odin_general[your_id_name]
Utilizando Odin_Options_Helper
Também é possível chamar as opções utilizando a classe Odin_Options_Helper
, para isso basta adicionar no functions.php a seguinte linha:
require_once get_template_directory() . '/core/classes/class-options-helper.php';
E depois chamar a opção usando:
$odin_general_opts = new Odin_Options_Helper( 'odin_general', 'your_id_name' );
Exemplo Completo
Veja exatamente como criar um metabox em seu tema (bônus campos do HTML5).
// Include the Odin_Theme_Options class.
require_once get_template_directory() . '/core/classes/class-theme-options.php';
function odin_theme_settings_example() {
$settings = new Odin_Theme_Options(
'odin-settings', // Slug/ID of the Settings Page (Required)
'Theme Settings', // Settings page name (Required)
'manage_options' // Page capability (Optional) [default is manage_options]
);
$settings->set_tabs(
array(
array(
'id' => 'odin_general', // Slug/ID of the Settings tab (Required)
'title' => __( 'General Settings', 'odin' ), // Settings tab title (Required)
),
array(
'id' => 'odin_html5',
'title' => __( 'HTML5 Fields', 'odin' )
)
)
);
$settings->set_fields(
array(
'odin_general_fields_section' => array( // Slug/ID of the section (Required)
'tab' => 'odin_general', // Tab ID/Slug (Required)
'title' => __( 'Section Example', 'odin' ), // Section title (Required)
'fields' => array( // Section fields (Required)
/**
* Default input examples.
*/
// Text Field.
array(
'id' => 'test_text', // Required
'label' => __( 'Test Text', 'odin' ), // Required
'type' => 'text', // Required
'attributes' => array( // Optional (html input elements)
'placeholder' => __( 'Some text here!' )
),
// 'default' => 'Default text', // Optional
'description' => __( 'Text field description', 'odin' ) // Optional
),
// Textarea Field.
array(
'id' => 'test_textarea', // Required
'label' => __( 'Test Textarea', 'odin' ), // Required
'type' => 'textarea', // Required
'attributes' => array( // Optional (html input elements)
'placeholder' => __( 'Some text here!' )
),
// 'default' => 'Default text', // Optional
'description' => __( 'Textaera field description', 'odin' ) // Optional
),
// HTML.
array(
'id' => 'test_html', // Required
'label' => __( 'Test HTML', 'odin' ), // Required
'type' => 'html', // Required
'description' => __( 'HTML field example' ) // Optional
),
// Checkbox field.
array(
'id' => 'test_checkbox', // Required
'label' => __( 'Test Checkbox', 'odin' ), // Required
'type' => 'checkbox', // Required
// 'attributes' => array(), // Optional (html input elements)
// 'default' => '', // Optional (1 for checked)
'description' => __( 'Checkbox field description', 'odin' ), // Optional
),
// Select field.
array(
'id' => 'test_select', // Required
'label' => __( 'Test Select', 'odin' ), // Required
'type' => 'select', // Required
// 'attributes' => array(), // Optional (html input elements)
// 'default' => 'three', // Optional
'description' => __( 'Select field description', 'odin' ), // Optional
'options' => array( // Required (id => title)
'one' => 'One',
'two' => 'Two',
'three' => 'Three',
'four' => 'Four'
),
),
// Radio field.
array(
'id' => 'test_radio', // Required
'label' => __( 'Test Radio', 'odin' ), // Required
'type' => 'radio', // Required
// 'attributes' => array(), // Optional (html input elements)
// 'default' => 'three', // Optional
'description' => __( 'Radio field description', 'odin' ), // Optional
'options' => array( // Required (id => title)
'one' => 'One',
'two' => 'Two',
'three' => 'Three',
'four' => 'Four'
),
),
// Editor field.
array(
'id' => 'test_editor', // Required
'label' => __( 'Test Editor', 'odin' ), // Required
'type' => 'editor', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'Editor field description', 'odin' ), // Optional
'options' => array( // Optional
// Arguments of wp_editor().
// See more http://codex.wordpress.org/Function_Reference/wp_editor
'textarea_rows' => 10
),
),
// Image field.
array(
'id' => 'test_image', // Required
'label' => __( 'Test Image', 'odin' ), // Required
'type' => 'image', // Required
// 'default' => '', // Optional (image attachment id)
'description' => __( 'Image field description', 'odin' ), // Optional
),
// Image Plupload field.
array(
'id' => 'test_image_plupload', // Required
'label' => __( 'Test Image Plupload', 'odin' ), // Required
'type' => 'image_plupload', // Required
// 'default' => '', // Optional (image attachment ids separated with comma)
'description' => __( 'Image Plupload field description', 'odin' ), // Optional
),
// Upload field.
array(
'id' => 'test_upload', // Required
'label' => __( 'Test Upload', 'odin' ), // Required
'type' => 'upload', // Required
// 'attributes' => array(), // Optional (html input elements)
// 'default' => '', // Optional (file url)
'description' => __( 'Upload field description', 'odin' ), // Optional
),
// Color field.
array(
'id' => 'test_color', // Required
'label' => __( 'Test Color', 'odin' ), // Required
'type' => 'color', // Required
// 'attributes' => array(), // Optional (html input elements)
'default' => '#ffffff', // Optional (color in hex)
'description' => __( 'Color field description', 'odin' ), // Optional
),
// Generic input field.
array(
'id' => 'test_input', // Required
'label' => __( 'Test Input', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'Textaera field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
)
)
)
),
'odin_html5_fields_section' => array( // Slug/ID of the section (Required)
'tab' => 'odin_html5', // Tab ID/Slug (Required)
'title' => __( 'HTML5 Fields', 'odin' ), // Section title (Required)
'fields' => array( // Section fields (Required)
/**
* HTML 5 examples
*/
// HTML5 color field.
array(
'id' => 'test_html5_color', // Required
'label' => __( 'Test HTML5 color', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 color field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'color'
)
),
// HTML5 date field.
array(
'id' => 'test_html5_date', // Required
'label' => __( 'Test HTML5 date', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 date field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'date'
)
),
// HTML5 datetime field.
array(
'id' => 'test_html5_datetime', // Required
'label' => __( 'Test HTML5 datetime', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 datetime field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'datetime'
)
),
// HTML5 datetime-local field.
array(
'id' => 'test_html5_datetime_local', // Required
'label' => __( 'Test HTML5 datetime-local', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 datetime-local field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'datetime-local'
)
),
// HTML5 email field.
array(
'id' => 'test_html5_email', // Required
'label' => __( 'Test HTML5 email', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 email field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'email'
)
),
// HTML5 month field.
array(
'id' => 'test_html5_month', // Required
'label' => __( 'Test HTML5 month', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 month field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'month'
)
),
// HTML5 number field.
array(
'id' => 'test_html5_number', // Required
'label' => __( 'Test HTML5 number', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 number field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'number',
'max' => 6,
'min' => 1
)
),
// HTML5 range field.
array(
'id' => 'test_html5_range', // Required
'label' => __( 'Test HTML5 range', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 range field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'range',
'max' => 6,
'min' => 1
)
),
// HTML5 search field.
array(
'id' => 'test_html5_search', // Required
'label' => __( 'Test HTML5 search', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 search field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'search'
)
),
// HTML5 tel field.
array(
'id' => 'test_html5_tel', // Required
'label' => __( 'Test HTML5 tel', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 tel field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'tel'
)
),
// HTML5 time field.
array(
'id' => 'test_html5_time', // Required
'label' => __( 'Test HTML5 time', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 time field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'time'
)
),
// HTML5 url field.
array(
'id' => 'test_html5_url', // Required
'label' => __( 'Test HTML5 url', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 url field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'url'
)
),
// HTML5 week field.
array(
'id' => 'test_html5_week', // Required
'label' => __( 'Test HTML5 week', 'odin' ), // Required
'type' => 'input', // Required
// 'default' => 'Default text', // Optional
'description' => __( 'HTML5 week field description', 'odin' ), // Optional
'attributes' => array( // Optional (html input elements)
'type' => 'week'
)
)
)
)
)
);
}
add_action( 'init', 'odin_theme_settings_example', 1 );
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
Resultado:
Código Fonte
Odin_Theme_Options
esta localizado em core/classes/class-theme-options.php.