| 0 | kirasiris | Categories: Tags: , , ,

WordPress

Well, I implemented this idea long ago but I have never posted it before. This is a cool trick that allows you to choose any CSS file directly from the WordPress customizer. Obviously in order for this to work, you should have those css files already downloaded in your machine.

The code can be found below:

/*
*
* SHOWCASE THEME SELECTOR
*
*/
$wp_customize->add_setting('theme_selector', array(
  'default'   => _x('bootstrap', 'YOURTHEMEsNAME'),
  'type'      => 'theme_mod'
));

$wp_customize->add_control( new WP_Customize_Control($wp_customize, 'theme_selector', array(
'label'       => __( 'Select Theme Name', 'YOURTHEMEsNAME' ), //Admin-visible name of the control
'description' => __( 'Using this option you can change the theme colors' ),
'priority'    => 90, //Determines the order this control appears in for the specified section
'section'     => 'title_tagline', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
'type'        => 'select',
'choices'     => array(
    'bootstrap'   => 'Default',
    'cerulean'  => 'Cerulean',
    'cosmo'     => 'Cosmo',
    'cyborg'    => 'Cyborg',
    'darkly'    =>  'Darkly',
    'flatly'    =>  'Flatly',
    'journal'   =>  'Journal',
    'lumen'     =>  'Lumen',
    'paper'     =>  'Paper',
    'readable'  =>  'Readable',
    'sandstone' =>  'Sandstone',
    'simplex'   =>  'Simplex',
    'slate'     =>  'Slate',
    'solar'     =>  'Solar',
    'spacelab'  =>  'Spacelab',
    'superhero' =>  'Superhero',
    'united'    =>  'United',
    'yeti'      =>  'Yeti',
  )
)));

Now you just created the function in the customizer, now what?; the following step that I would say is to enter to your header.php file. There instead of just having this:

<link href="<?php bloginfo('template_url');?>/src/css/bootstrap/bootstrap.min.css" rel="stylesheet">

Do this:

<link href="<?php bloginfo('template_url');?>/src/css/bootstrap/<?php esc_html_e( get_theme_mod( 'theme_selector' ) ); ?>.min.css" rel="stylesheet">

Obviously you need to play with the path in which you have stored the files in order to make the css to render with not problem at all. Once all of this is done you can go back to your WordPress customizer and try playing with it. This should work with all of the versions of Bootstrap or any other CSS framework.

Thanks for reading and remember if you found this article useful, share it with your friends.

Do you want to create a cool grid without the necessity of using a framework? Click this link!

Leave a Reply

Back to Top