Last active
February 15, 2023 18:41
-
-
Save neilgee/bdf621baa3d535c97d9d to your computer and use it in GitHub Desktop.
WordPress how to pass Inline CSS to existing plugin or theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//Adding CSS inline style to an existing CSS stylesheet | |
function wpb_add_inline_css() { | |
//All the user input CSS settings as set in the plugin settings | |
$slicknav_custom_css = " | |
@media screen and (max-width: {$ng_slicknav_width}px) { | |
{$ng_slicknav_menu} { | |
display: none; | |
} | |
.slicknav_menu { | |
display: block; | |
background: {$ng_slicknav_background}; | |
} | |
.slicknav_btn { | |
background-color:{$ng_slicknav_button}; | |
float:{$ng_slicknav_button_position}; | |
} | |
}"; | |
//Add the above custom CSS via wp_add_inline_style | |
wp_add_inline_style( 'slicknavcss', $slicknav_custom_css ); //Pass the variable into the main style sheet ID | |
} | |
add_action( 'wp_enqueue_scripts', 'wpb_add_inline_css' ); //Enqueue the CSS style |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//Adding CSS inline style to an existing CSS stylesheet | |
function wpb_add_inline_css() { | |
wp_enqueue_style( 'slicknavcss', plugins_url() . '/slicknav/assets/css/slicknav.css' ); | |
//All the user input CSS settings as set in the plugin settings | |
$slicknav_custom_css = " | |
@media screen and (max-width: {$ng_slicknav_width}px) { | |
{$ng_slicknav_menu} { | |
display: none; | |
} | |
.slicknav_menu { | |
display: block; | |
background: {$ng_slicknav_background}; | |
} | |
.slicknav_btn { | |
background-color:{$ng_slicknav_button}; | |
float:{$ng_slicknav_button_position}; | |
} | |
}"; | |
//Add the above custom CSS via wp_add_inline_style | |
wp_add_inline_style( 'slicknavcss', $slicknav_custom_css ); //Pass the variable into the main style sheet ID | |
} | |
add_action( 'wp_enqueue_scripts', 'wpb_add_inline_css' ); //Enqueue the CSS style |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment