Wordpress customizer: Add settings and controls dynamically - php

In order to simplify things, I have a social icon in my WP theme, that I want to enable users to modify via the WP customizer:
$wp_customize->add_setting(
'tcx_social_twitter',
array(
'default' => 'fa fa-twitter'
)
);
$wp_customize->add_control(
'tcx_social_twitter',
array(
'section' => 'tcx_social',
'label' => 'Social links',
'type' => 'text'
)
);
Then <?php echo get_theme_mod( 'tcx_social_twitter' ); ?> in my theme layout to show the icon to the end user. Everything works great so far.
Now I want to enable future adinistrators of my theme to add as many social icons, as they want. I believe this requires adding settings and controls dynamically, however I faild to find any information on this question in the official WP docs. Any help would be greatly appreciated!

Related

How to override woocommerce customize panel file (in folder includes)

I'm overriding Woocommerce theme. And now I have to override customize panel. There is a few woocommerce default sections in Customize panel to change some Woocommerce data, labels etc. (such as image size, number of post per page, privacy text...). And I want to add my own customize panel fields to make some data in my child theme to be easy to change (they should be placed in the same control panel sections next to Woocommerce default fields).
There is Woocommerce/Includes/Customizer/*customizer files*. So I can simply override that files in Woocommerce folder but when Woocommerce will be updated I'll lose my changes.
So I need to add my customize fields (and I think the best way is write them somewhere in my child theme maybe in functions.php but I didn't manage to do it yet) in the same Woocommerce control panel tabs and sections. (For example in section Product Catalog (that's woocommerce default section) I want to make changeable my own filter label).
Is there any way to do it?
Thanks in advance))
To add your own section with settings under WooCommerce customize panel, just add follows codes snippets in your active theme's functions.php -
add_action( 'customize_register', 'my_custom_customize_register', 99 );
function my_custom_customize_register( $wp_customize ) {
$wp_customize->add_section(
'my_wc_custom_section',
array(
'title' => __( 'My Custom Section', 'text-domain' ),
'priority' => 20,
'panel' => 'woocommerce',
'description' => '',
)
);
$wp_customize->add_setting( 'my_wc_custom_section_settings', array( 'transport' => 'postMessage' ) );
$wp_customize->add_control( 'my_wc_custom_section_settings_control',
array(
'label' => __( 'Custom Text', 'text-domain' ),
'type' => 'text',
'settings' => 'my_wc_custom_section_settings',
'section' => 'my_wc_custom_section',
'priority' => 20,
)
);
}
To display your saved field's value from your custom section settings, just use follows -
echo get_theme_mod( 'my_wc_custom_section_settings' );
Thats it.

WordPress: Adding Theme Support

I am trying to add the "Custom-Background" theme hook for a WordPress site.
In my functions file, the one for the theme folder, I added
add_theme_support( 'Custom Background', array (
'background-color' => '#000000',
'background-size' => 'cover'
) );
It seems to work because going into the WordPress Dashboard -> Appearances -> Background, I can add an image and have it shown in the Customizer space. But when I actually go to the page itself, it shows me a blank white background.
Is there an additional code I need to add to my '.php' files? There was a similar post previously here:https://wordpress.stackexchange.com/questions/259315/custom-background-image-not-showing-up
But I believe this does not work anymore, or maybe I'm doing my process wrong.
Based on the codex sample you need this format
$args = array(
'default-image' => 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg',
'default-size' => 'cover',
);
add_theme_support( 'custom-background', $args );
Thank you for replying. I found out what the issue was with my code. It wasn't that my code was in an incorrect form, but I had forgotten to put a
<body <?php body_class();?>>
wherever I put my tag in.

Add field to wordpress billing fields

I'd like to add 2 custom fields to the user billing information in WooCommerce, one for capturing their VAT number and one for the Chamber of Commerce number. These fields need to be displayed during checkout, on the my account > billing address page and also on the WP Admin on the user page so the admin of the website/webshop can check for these values.
I prefer not to use a plugin but to use the child theme's functions.php.
Can anyone please help me with this problem? I looked around on the Wordpress Stack exchange but couldn't find a specific and up-to-date solution for my problem. Also I read the Woocommerce documentation but there it's not explained how to show the custom billing fields on the user admin page in the backend.
Thank you very much in advance!
You can achieve this by using Woocommerce filter woocommerce_checkout_fields.
Here is the code example.
add_filter( 'woocommerce_checkout_fields','checkout_extra_fields');
function checkout_extra_fields($fields){
$fields['billing']['vat_number'] = array(
'label' => __('VAT number', 'my-slug'),
'placeholder' => __('VAT number', 'my-slug'),
'required' => false,
'clear' => false,
'type' => 'text',
);
$fields['billing']['commerce_number'] = array(
'label' => __('Commerce number', 'my-slug'),
'placeholder' => __('Commerce number', 'my-slug'),
'required' => false,
'clear' => false,
'type' => 'text'
);
return $fields;
}
Also, You can get the saved values from backend by this code
$extra_fileds_vat_number = get_post_meta( wf_get_order_id($order),'_vat_number',1);
$extra_fileds_commerce_number = get_post_meta( wf_get_order_id($order),'_commerce_number',1);
Altough I didn't want to use a plugin and Nishad's answer is absolutely correct I found a free plugin (after a really long search) that does exactly what I want. It's called Flexible Checkout Fields and you can create custom fields that show up on Checkout, Woocommerce my account page and on the WP admin user profile page. I really love it!
So for anyone who encounters the same problem, you might want to try this one!

Wordpress - Adding to Redux Theme Options using Child Theme

I am using a wordpress theme that has it's own framwork which is based upon redux framework I think. I am modifying this theme using a child theme. I want to add to the Theme Options in the backend and I found a function within the files of the parent theme that seems to be exactly what I need:
/*
*
* Custom function for filtering the sections array. Good for child themes to override or add to the sections.
* Simply include this function in the child themes functions.php file.
*
* NOTE: the defined constansts for URLs, and directories will NOT be available at this point in a child theme,
* so you must use get_template_directory_uri() if you want to use any of the built in icons
*
*/
function add_another_section($sections){
//$sections = array();
$sections[] = array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
);
return $sections;
}
//add_filter('redux-opts-sections-twenty_eleven', 'add_another_section');
I have added this function to my child theme's functions.php and uncommented the add_filter. However, this does not seem to work and no new section has been added.
I came across this discussion elsewhere which suggests the name of the function needs to be changed (I was getting the same error mentioned on there). I have done that and it still won't work.
Here is what I have in my child theme functions.php
function add_another_section_bl($sections){
$sections = array();
$sections[] = array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
);
return $sections;
}
add_filter('redux-opts-sections-twenty_eleven', 'add_another_section_bl');
I wasn't sure if the filter name 'redux-opts-sections-twenty_eleven' needs editing as it mentions the twenty eleven theme. I have tried it with different theme names at the end instead of twenty_eleven and that had no effect.
Any help would be greatly appreciated! On a side note I have been able to accomplish adding new options to Theme Options by copying over the whole framwork folder into my child theme and defining the path to the framework in the child theme's functions.php. I just felt that there should be a much slicker, neater way to achieve this and I thought that function sounded perfect.
Many thanks.
Lead dev of Redux Framework here. This solution only works if you're using Redux Framework 3.1+. If you have an older version, install the Redux Framework plugin and it will override the version inside your theme.
First go to the current option panel. Open up a javascript console (use chrome or firefox) and type: redux.args.opt_name. That will echo out a name. Copy that and paste it into this function replacing OPT_NAME with the name that was echo'd out:
function add_another_section_bl($sections){
$sections = array(); // Delete this if you want to keep original sections!
$sections[] = array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
);
return $sections;
}
// In this example OPT_NAME is the returned opt_name.
add_filter("redux/options/OPT_NAME/sections", 'add_another_section_bl');
Good luck!
** UPDATE **
Also with the Redux API you can easily add a new section that way.
Redux::addSection(array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
))
That makes it a wee bit easier using our API I believe we released in Redux 3.2...
If you are using redux options with plugin your filter won't work inside a theme
for that make sure you put code inside a plugin.
Here is code that will work with theme and plugin as well!
function add_social_media_options($sections) {
$sections[] = array(
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => 'el-icon-wrench',
'title' => esc_html__('Social Media Settings', 'textdomain'),
'desc' => esc_html__('These are settings social media link', 'textdomain'),
'fields' => array(
array(
'id' => 'facebook_link',
'type' => 'text',
'url' => true,
'title' => __('Facebook link', 'textdomain'),
'compiler' => 'true',
//'mode' => false, // Can be set to false to allow any media type, or can also be set to any mime type.
'desc' => __('', 'textdomain'),
'default' => ''
),
array(
'id' => 'twitter_link',
'type' => 'text',
'url' => true,
'title' => __('Twitter link', 'textdomain'),
'compiler' => 'true',
//'mode' => false, // Can be set to false to allow any media type, or can also be set to any mime type.
'desc' => __('', 'textdomain'),
'default' => ''
),
)
);
return $sections;
}
add_filter("redux/options/redux_demo/sections", 'add_social_media_options');

Create new admin section in wordpress - for creating office-pages

Ok, I have been looking for hours and I have to say I am really lost. I am trying to create a new section in the admin section of wordpress that should enable the user to create a new custom "office" page.
There is really many office pages on the site I have been working on (over 30), each with its opening hours, map, and images. I assume the client will want to add more later (or remove them) and they would like to manage it through Wordpress. That would mean adding a section that would enable them to put in the name of the office, opening hours, images and the location and it would create a new office page. I am rather a front-end developer and I have never worked with Wordpress before. I understand the loop, etc, I have read several things about Themes and how to create them but I am seriously stuck with how to create a section in admin area that would enable page creation/deletion with certain options.
Any help is greatly appreciated, just please point me to the correct direction. Web pages, WP codex, tutorials, youtube... whatever that helps. Thanks a bunch!
You can make custom post type..
By writing Code in function.php
function function-name(){
register_post_type( 'post name',
array(
'labels' => array(
'name' => __( 'post name' ),
'singular_name' => __( 'post name' )
),
'public' => true,
'has_archive' => true,
'rewrite' => array('slug' => 'post name'),
'supports' => array('title','editor','author','thumbnail','comments','custom-fields'),
)
);
}
add_action('init', 'function-name');
3 steps : -
1. create office post type by using Register Post Type
2. Create office categories by using Register taxonomy
3. create a meta box by using Add Meta Box for extra fields which wordpress doesnt offer by default like (office hours )
hope it helps !

Categories