Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active February 15, 2023 18:41
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save neilgee/bdf621baa3d535c97d9d to your computer and use it in GitHub Desktop.
Save neilgee/bdf621baa3d535c97d9d to your computer and use it in GitHub Desktop.
WordPress how to pass Inline CSS to existing plugin or theme
<?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
<?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