Im trying to create a sub section within the customiser options in WordPress, so i have a new section called Typography and i want to make sub sections inside that which will be Heading 1, Heading 2 etc... those should open out into their own set of controls. However i have been looking through the codex and cant seem to find a way to link those menus up, any ideas?
Below is the normal code for adding a section but adding a new one doesnt seem to have a option for attaching it to the parent? Ive tried a few variations of the code below without any luck, all i get is 2 typography menus on the main menu.
EDIT: Still having no luck, i read in the codex about a option for panels but cant seem to implement it.
i am using the code below, its just a simplified version of the code to make sure i have it right. I assume a section goes into the panel and the settings and control go into the section. Using this codex
// ADD PANEL
$wp_customize->add_panel( 'typography_panel', array(
'priority' => 10,
'capability' => 'edit_theme_options',
'theme_supports' => '',
'title' => 'Typography',
'description' => 'contains options for all font settings on the website.',
) );
// ADD SECTION TO GO INTO PANEL
$wp_customize->add_section( 'heading_1', array(
'priority' => 20,
'capability' => 'edit_theme_options',
'theme_supports' => '',
'title' => 'H1 Options',
'description' => 'all options for heading 1 font.',
'panel' => 'typography_panel',
) );
// ADD SETTINGS
// Selector Background - Highlighting
$wp_customize->add_setting(
'typography_highlight_background_h1',
array(
'default' => '#333948',
'sanitize_callback' => '',
) );
// ADD CONTROLS
// Highlight Background for Browser
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize, 'typography_highlight_background_h1',
array(
'label' => __( 'Highlight Background', 'typography_highlight_background_h1' ),
'section' => 'heading_1',
'settings' => 'typography_highlight_background_h1',
) ) );
You're looking for add_setting and add_control. Sub-sections can be added by passing the name of the section as an argument to add_control.
Related
I have created a textarea in WordPress Customizer in the following way.
$wp_customize->add_setting( "stylesheet_setting", array(
'default' => '',
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'sanitize_textarea_field',
) );
$wp_customize->add_control( "stylesheet_setting", array(
'section' => "stylesheet_section",
'type' => 'textarea',
) );
Problem
The Problem I am having is that, when I write CSS code in this textarea, it does not update the preview pane in realtime, instead, if I use the refresh method for transfer, it updates after refreshing.
I want to update in real-time just like I enter CSS in WordPress Custom CSS Textbox.
I have two themes installed on a wordpress website. I have moved all my non-theme specific functions into a plugin as recommended and all is working well except customizer.php which was included in my functions.php file. I moved it away from functions.php into the plugin. The customizer contents showed when first theme was activated but won't show when I switched to the other theme. Below are code snippets for reference:
I included customizer.php into my plugin using the code below
require( plugin_dir_path( __FILE__ ) . 'inc/customizer.php' );
Below is the panel that controls the logo
if ( class_exists( 'WP_Customize_Panel' ) ):
$wp_customize->add_panel( 'panel_general', array(
'priority' => 29,
'capability' => 'edit_theme_options',
'title' => __( 'General options', 'gswmi' )
));
/* LOGO */
$wp_customize->add_setting( 'site_logo', array(
'sanitize_callback' => 'esc_url_raw',
'transport' => 'postMessage'
));
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo',
array(
'label' => __( 'Logo' ),
'section' => 'title_tagline',
'settings' => 'site_logo',
'priority' => 1,
)
)); endif;
The logo and contents show when the first theme is activated
But won't show when the second theme is activated
I have tried different fixes, even deleting the text domain in the customizer.php code, none seemed to work. I want to be able to switch themes and still be able to show the same contents in the customizer and the frontend irrespective of the theme activated. I will appreciate any help.
I was finally able to sort it, thanks to some articles I found online (credits below).
By default, my setting's type above is 'theme_mod'
Theme mods are stored in a single array in the options table in the database, one field per theme. In my case, i found all the theme customizations in a single array under theme_mods_(mythemename) in wp_options table in my database. As you can guess, this is not good for performance.
To make my logo and other settings readily availabe irrspective of the theme I use, I just had to change the setting type to 'option' from 'theme_mod' which is the default setting type.
But what’s the difference? To try to keep this simple:
Theme Modifications(Theme Mod) represent what’s available for a specific theme. WordPress saves all options managed by The Customizer as a single array in the database.
Options are available to any theme and/or any plugin. In contrast to the The Customizer, WordPress saves each value as a single record in the database.
Update code below
if ( class_exists( 'WP_Customize_Panel' ) ):
$wp_customize->add_panel( 'panel_general', array(
'priority' => 29,
'capability' => 'edit_theme_options',
'title' => __( 'General options', 'gswmi' )
));
/* LOGO */
$wp_customize->add_setting( 'site_logo', array(
'type' => 'option',
'sanitize_callback' => 'esc_url_raw',
'transport' => 'postMessage'
));
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo',
array(
'label' => __( 'Logo' ),
'section' => 'title_tagline',
'settings' => 'site_logo',
'priority' => 1,
)
)); endif;
The above Setting’s value will get its own column inside the WP_OPTIONS table and there will be a performance boost when the value is accessed for outputting in the frontend.
Credits:
https://www.usablewp.com/learn-wordpress/wordpress-customizer/theme-mods-vs-options-in-wordpress/
https://tommcfarlin.com/wordpress-options/
I'm developing a WordPress theme and I'm trying to add an option in WordPress customizer to make the user able to choose between many styles files included in the theme, what I'm trying to do is quite simple, a select option that allow to the user to choose style 1-style 2- etc... the problem is that I didn't find any tutorial on how to do that, all what I have find is how to customize the colors and that's not what I'm looking for. can anyone help or at least gives me ideas on how to do that.
i have find this solution myself and it works preety fine
function stlye_selector( $wp_customize ) {
$wp_customize->add_section(
'stlye_files_selector',
array(
'title' => 'stlye files selector',
'description' => 'you can set here your style file',
'priority' => 35,
)
);
$wp_customize->add_setting(
'colors',
array(
'default' => 'blue',
)
);
$wp_customize->add_control(
'colors',
array(
'type' => 'select',
'label' => 'your style',
'section' => 'stlye_files_selector',
'choices' => array(
'blue' => 'blue',
'red' => 'red',
),
)
);
}
add_action( 'customize_register', 'stlye_selector' );
and to use it just add this to ur template file
<?php $stat= get_theme_mod( 'colors','blue'); ?>
if no color is slected it will be on blue style
I have a problem, I need to change the default options for a “List-item” option in Option tree . Right now the default are “Title/Image/Link/Descriptions” .. I want to remove them and add my own. I have written this code:
array(
'id' => 'academic_success_content',
'label' => 'Academic Success Content',
'desc' => 'Enter the academic success content. It will appear in the home page in list items format',
'std' => '',
'type' => 'list-item',
'section' => 'academic_perfomance',
'settings' => array(
array(
'id' => 'academic_success',
'label' => 'Academic Success',
'type' => 'textarea-simple',
)
)
),
But when I preview the themes options , the default list item "title" is still there and I only want to see the Academic Success textarea. What should I do?
I also suffered from the same situation.
And after that, I use the older version of "list-item" and "gallery".
This has worked well. Ex: v2.4.6
Is the theme options page being included?
You'll need to reference it in your functions.php, something to the effect of:
require_once locate_template('/path-to-your/theme-options.php' );
Is it possible to use a WYSIWYG editor in texarea
for Drupal site configuration form (system_settings_form).
This is how the configuration is coded now...
$form['my_module_text_bottom'] = array(
'#type' => 'textarea',
'#title' => t('Some text'),
'#default_value' => variable_get('my_module_text_bottom', 'This is configurable text found in the module configuration.'),
'#size' => 1024,
'#maxlength' => 1024,
'#description' => t("Some text."),
'#required' => TRUE,
);
return system_settings_form($form);
Here it is for Drupal 7 and Drupal 6.
For D7:
<?php
// Retrieve the default values for 'value' and 'format', if not readily
// available through other means:
$defaults = array(
'value' => '',
'format' => filter_default_format(),
);
$my_richtext_field = variable_get('my_richtext_field', $defaults);
// Just construct a regular #type 'text_format' form element:
$form['my_richtext_field'] = array(
'#type' => 'text_format',
'#title' => t('My richtext field'),
'#default_value' => $my_richtext_field['value'],
'#format' => $my_richtext_field['format'],
);
?>
For D6:
<?php
// Your saved or new data is supposed to have a value and a format. Just like
// $node has a $node->body and $node->format. May also come from a
// variable_get('mymodule_admin_setting', array('value' => '', 'format' => NULL));
$mydata = mymodule_data_load();
$form['myfield']['mytextarea'] = array(
'#type' => 'textarea',
'#title' => t('My textarea'),
'#default_value' => $mydata->value,
);
$form['myfield']['format'] = filter_form($mydata->format);
?>
I kept searching for this issue for about 6 hours and finally i found the reason, for your custom textarea field you must add this line, to use the default input format (Full HTML):
$form['format'] = filter_form();
be careful if you use this form element inside fieldset you must include this fieldset:
$form['donation-instructions']['format'] = filter_form();
I hope this will help you
The WYSIWYG or CKEditor modules should be able to do this.
I found this question similar to:
Drupal 6: Implement Wysiwyg on Custom Module Form
One of the answers there pointed to this drupal.org page:
http://drupal.org/node/358316
which provides fairly detailed examples of the "format" array key and filter_form(), also describing how it's used if your form has multiple textareas.
The approach given there doesn't apply to Drupal 7.
I ran into a similar situation where I'd downloaded and installed and installed CKEditor and it displayed when editing content nodes, but didn't display for the textarea on a configuration form for my module.