How to create a dynamic Stylesheet.

In this tutorial I am going to show you how to create the dynamic stylesheet to use in SMOF. The dynamic stylesheet will allow your end user to specify a style such as color and the style will show up in the frontend.

1. Step 1

You will need to open up your themes functions.php file and edit it. The file is located in wp-content/themes/YOURTHEMENAME.

Look for a code similar to the one below:

if( !function_exists("wp_bootstrap_theme_styles") ) {  
    function wp_bootstrap_theme_styles() { 
        // This is the compiled css file from LESS - this means you compile the LESS file locally and put it in the appropriate directory if you want to make any changes to the master bootstrap.css.
        wp_register_style( 'wpbs', get_template_directory_uri() . '/library/dist/css/styles.f6413c85.min.css', array(), '1.0', 'all' );
        wp_enqueue_style( 'wpbs' );

        // For child themes
        wp_register_style( 'wpbs-style', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' );
        wp_enqueue_style( 'wpbs-style' );
		
     }
    }
   add_action( 'wp_enqueue_scripts', 'wp_bootstrap_theme_styles' );

It is okay if yours looks just a little different then mine. Every theme is different.

Next you will want to add the following two lines of code just before the closing } }.

wp_register_style( 'dy_custom', get_bloginfo( 'url' ) . '/?my-custom-content=css', '1.0', 'all' );
wp_enqueue_style( 'dy_custom' );

Your complete function should now look like this:

if( !function_exists("wp_bootstrap_theme_styles") ) {  
    function wp_bootstrap_theme_styles() { 
        // This is the compiled css file from LESS - this means you compile the LESS file locally and put it in the appropriate directory if you want to make any changes to the master bootstrap.css.
        wp_register_style( 'wpbs', get_template_directory_uri() . '/library/dist/css/styles.f6413c85.min.css', array(), '1.0', 'all' );
        wp_enqueue_style( 'wpbs' );

        // For child themes
        wp_register_style( 'wpbs-style', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' );
        wp_enqueue_style( 'wpbs-style' );
		
	wp_register_style( 'dy_custom', get_bloginfo( 'url' ) . '/?my-custom-content=css', '1.0', 'all' );
	wp_enqueue_style( 'dy_custom' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_bootstrap_theme_styles' );

Remember that it is okay if yours is just a little different then mine.

Next right below that function we will want to add the following code:

add_action( 'parse_request', 'my_custom_wp_request' );
function my_custom_wp_request( $wp ) {
    if (
        !empty( $_GET['my-custom-content'] )
        && $_GET['my-custom-content'] == 'css'
    ) {
        # get theme options
        header( 'Content-Type: text/css' );
        require dirname( __FILE__ ) . '/custom.php';
        exit;
    }
}

It should now look like this:

if( !function_exists("wp_bootstrap_theme_styles") ) {  
    function wp_bootstrap_theme_styles() { 
        // This is the compiled css file from LESS - this means you compile the LESS file locally and put it in the appropriate directory if you want to make any changes to the master bootstrap.css.
        wp_register_style( 'wpbs', get_template_directory_uri() . '/library/dist/css/styles.f6413c85.min.css', array(), '1.0', 'all' );
        wp_enqueue_style( 'wpbs' );

        // For child themes
        wp_register_style( 'wpbs-style', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' );
        wp_enqueue_style( 'wpbs-style' );
		
	wp_register_style( 'dy_custom', get_bloginfo( 'url' ) . '/?my-custom-content=css', '1.0', 'all' );
	wp_enqueue_style( 'dy_custom' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_bootstrap_theme_styles' );

add_action( 'parse_request', 'my_custom_wp_request' );
function my_custom_wp_request( $wp ) {
    if (
        !empty( $_GET['my-custom-content'] )
        && $_GET['my-custom-content'] == 'css'
    ) {
        # get theme options
        header( 'Content-Type: text/css' );
        require dirname( __FILE__ ) . '/custom.php';
        exit;
    }
}

Step 2**

The last thing is to create a file called custom.php and place it inside your root of your theme. Example wp-content/themes/YOURTHEME

Inside the custom.php file you can add any style like the example below:

.navbar-default{
	background-color:<?php global $smof_data; echo $smof_data['nav_color']; ?>;
}

.navbar-default .navbar-nav>li>a{
	color:<?php global $smof_data; echo $smof_data['nav_font']; ?>;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
		color:<?php global $smof_data; echo $smof_data['active_font']; ?>;
		background-color:<?php global $smof_data; echo $smof_data['active_color']; ?>;
}

Like I said before this will allow the end user to select options in the framework and it will be called by the variable inside the custom.php file. This will overide the existing stylesheets and apply this new style to the theme.