CODEWITHSUNDEEP
phpcsswordpress
Peter Wilkinson
Peter Wilkinson

Reputation: 80

Adding css to file via php

I am developing a WordPress plugin which I would like it to add some predefined CSS to a stylesheet when someone enables a feature.

I cannot simply include the stylesheet in addition to the regular stylesheet because some features will conflict with it. I would like it so that when they click one element it loads only the CSS relevant to this.

When they select this element it should "print" the relevant CSS into a stylesheet.

Can I call a function that I created which contains CSS and gets called only once the feature is enabled?

Upvotes: 2

Views: 554

Answers (5)

Christina
Christina

Reputation: 34642

There are a couple ways I would approach this.

You can use use inline css and not require the theme's style sheet. And write what you need between your conditions, like this the first example or use wp_add_inline_style.

IDEA 1: not using wp_add_inline_style

//* Load CSS
function yourplugin_prefix_load_css() {
     add_action( 'wp_head', 'yourpluginprefix_css', 15 );
}
add_action( 'plugins_loaded' , 'yourplugin_prefix_load_css' );


//* CSS
function yourpluginprefix_css() {

    //vars
    $a = get_option( 'where_a', 'what_a' );
    $b = get_option( 'where_b', 'what_b' );

    // begin CSS
    $css = '';

    $css .= '<style class="whatever" >';

    //condition $a
    if ( $a == '0' ) :

        $css .= '

            .property{
                display: inline-block;
            }

        '; 

    endif;  //condition for $a


    //condition $b
    if ( $b != '1' ) :

        $css .= '

            .property-something{
                border: 1px solid #333;
            }

        '; 

    endif;  //condition for $b


    //close the style sheet
    $css .= '</style>';

    //minify it
    $css_min = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css );

    echo $css_min;

}

IDEA 2 with wp_add_inline_style

Alternatively, you can use wp_add_inline_style and get the current theme's handle .

function pluginprefix_css() {

    //get current theme stylesheet handle
    $current_theme = ( wp_get_theme() );

    //get our values for conditions
    $a             = get_option( 'where_a', 'what_a' );
    $b             = get_option( 'where_b', 'what_b' );


    //begin css
    $css = '';


    //condition $a
    if ( $a == '0' ) :

        $css .= '

            .property{
                display: inline-block;
            }

        '; 

    endif;  //condition for $a


    //condition $b
    if ( $b != '1' ) :

        $css .= '

            .property-something{
                border: 1px solid #333;
            }

        '; 

    endif;  //condition for $b      


    //minify css
    $css_min = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css );

    //add inline style                
    wp_add_inline_style( $current_theme->stylesheet, $css_min );


}
add_action( 'wp_enqueue_scripts', 'pluginprefix_css' );

Upvotes: 3

huykon225
huykon225

Reputation: 581

if you using wordpress. you can use wp_add_inline_style

Upvotes: 0

Eamonn
Eamonn

Reputation: 418

Create a php function that takes the arguments of what features are enabled to make a custom stylesheet, and dynamically enqueue that stylesheet. Use .htaccess or similar settings to redirect requests for your custom_thingy.css to custom_thingy.php and just have it echo the custom styles, it'll behave like a regular stylesheet.

foreach($style_options as $option) {
    echo file_get_contents($option_style_file[$option]);
}

Upvotes: 0

keyBeatz
keyBeatz

Reputation: 139

If you need to load library after the site is loaded, your best hope is javascript. E.g. you can add code snippet into head when click on element. In jQuery

var e = 'button.class';
var remove_css = '#my_style_1';
var code = '<link rel="stylesheet" type="text/css" href="/path/to/css_part.css">';
$(e).on( 'click', function() {
   $('head').append( code );
   $(remove_css).remove();
});

Replace e variable with class or element which will add code into header on click.

UPDATED: find in source the identificator (ID) of your css file and put it in remove_css variable. It will remove it after element clicked. I should note that this solution is not persistent and lasts until page switch.

--

If you need load css based on option, create an option in your admin, register your styles and then enable it based on option.

Somewhere in code register your style:

wp_register_style( 'my_style_original', '/path/to/css_part.css' );
wp_register_style( 'my_style_replace', '/path/to/css_part.css' );

And then eneable it based on option

$enable_css = get_option( 'enable_css' );
if( $enable_css )
   wp_enqueue_style( 'my_style_replace' );   // if setting enabled load second css
else
   wp_enqueue_style( 'my_style_original' );   // if setting not enabled load original css

This will load the style only when option 'enable_css' is not false or empty. To create option page see https://codex.wordpress.org/Creating_Options_Pages or for easier setup you can stick to ACF options (https://www.advancedcustomfields.com/add-ons/options-page/);

Upvotes: 1

Condorcho
Condorcho

Reputation: 503

You can create a function that writes indented style into the specific element. Remember that this is not considered bad coding, anyway I don't know how it'd be considered since it'd be dynamic content.

So, for example, you have:

<input type="text" />

And when the user clicks to add the style, the function would add:

<input type="text" style="..." />

In the other hand, when the user refreshes the page, the style would disappear.

Upvotes: 0

Related Questions