3439 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Achieved the monthly Community Superstar Award
  • Located in United States
+2 more
organicbee
says
 <?php

add_action( 'init', 'prefix_register_styles' );

/**
 * Register Theme styles.
 * 
 * @since 0.0
 * @access public
 * @return void
 */
function prefix_register_styles(){

    $themeversion =  wp_get_theme()->display('Version'));

    //Register main style.css for theme
    wp_register_style( 'prefix-screen', get_bloginfo('stylesheet_url'), array(), floatval($themeversion) , false  );

}

add_action( 'wp_enqueue_scripts', 'prefix_theme_stlyles' );

/**
 * Load Theme Styles 
 *
 * @since 0.0
 * @access public
 * @return void
 */
function prefix_theme_stlyles() {

    if (is_admin()) {

        return;

    }

    if (!is_admin()) {

        //Load the main style.css
        wp_enqueue_style( 'prefix-screen' );

        if( get_option('prefix-css-color', false) != false){

            $color = get_option('prefix-css-color', false); 

            $prefix_themecss = ".blah{ background-color:$color;}";

        wp_add_inline_style('prefix-screen', $prefix_themecss);

        }

    }

}

?>

148 posts
  • Has been part of the Envato Community for over 2 years
loveetc
says

Thanks dude for the above, highly appreciate.

Just a last question, since this also adds code in the head of the document, then why it is bad to directly add in the style of div, as I mentioned in my previous example? because involves much less code and is a bit cleaner than this output.

916 posts Rock 'N' Roll
  • Elite Author: Sold more than $75,000 on Envato Market
  • Had an item that was trending
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been part of the Envato Community for over 2 years
+4 more
LSVRthemes
says

Hi guys, I have a question regarding this topic.

OK, I understand that inline CSS is not allowed and wp_add_inline_style() should be used instead. But what about a scenario, when I want to add a custom image (post’s featured image) to a post’s title? wp_add_inline_style() must be called inside wp_enqueue_scripts and this hook can’t be used inside template itself. I really dont’s see other solutions as to use inline CSS for title element. Or is this soluton allowed in such dynamic case?

407 posts
  • Became a Top 20 Author of the Month
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $250,000+ on Envato Market
  • Located in United Kingdom
+6 more
EugeneO
says

What do you mean by “adding the post’s feature image to the post’s title”?

3439 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Achieved the monthly Community Superstar Award
  • Located in United States
+2 more
organicbee
says

Hi guys, I have a question regarding this topic.

OK, I understand that inline CSS is not allowed and wp_add_inline_style() should be used instead. But what about a scenario, when I want to add a custom image (post’s featured image) to a post’s title? wp_add_inline_style() must be called inside wp_enqueue_scripts and this hook can’t be used inside template itself. I really dont’s see other solutions as to use inline CSS for title element. Or is this soluton allowed in such dynamic case?

if you’re talking about background images not sure how practical that would be but its possible by using get_post(); but that would only really work on singular pages otherwise I would think you would have to create a loop to get all the post thumbnails on the page which as I said isnt that practical

3439 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Achieved the monthly Community Superstar Award
  • Located in United States
+2 more
organicbee
says

Thanks dude for the above, highly appreciate. Just a last question, since this also adds code in the head of the document, then why it is bad to directly add in the style of div, as I mentioned in my previous example? because involves much less code and is a bit cleaner than this output.

the example you posted earlier is inline, it doesn’t add CSS to the head. That outputs the code right below whatever stylesheet you attach it to. So it can be overridden by a plugin or child theme or even completely removed without touching theme files. The example I posted about is only really 5 lines of code, everything you should already be doing to load the theme stylesheet anyways.

916 posts Rock 'N' Roll
  • Elite Author: Sold more than $75,000 on Envato Market
  • Had an item that was trending
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been part of the Envato Community for over 2 years
+4 more
LSVRthemes
says

Sorry, I meant page’s featured image. Let’s say I have something like this:

<?php $page_id = get_the_ID(); ?>

<?php $custom_title_css = ''; ?>

<?php if ( has_post_thumbnail( ) ) : ?>

    <?php $featured_img_fullsize_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' ); ?>
    <?php $custom_title_css .= 'background-image: url(' . $featured_img_fullsize_url['0'] . '); '; ?>

<?php endif; ?>

<?php if ( get_field( 'title_color_toggle' ) ) : ?>
<?php $custom_title_css .= 'color: ' . get_field( 'title_color' ) . '; '; ?>
<?php endif; ?>

<?php if ( get_field( 'title_bg_color_toggle' ) ) : ?>
<?php $custom_title_css .= 'background-color: ' . get_field( 'title_bg_color' ) . '; '; ?>
<?php endif; ?>
<div id="page-title" if="" echo="" .="">>...</div>

get_field() is function to retrieving custom fields with ACF plugin.

So the user can define not only background image (with featured image) but also font color and background color. But of course, each page can have a different set of styles, so I really don’t know how it can be achieved without inline CSS.

3439 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Achieved the monthly Community Superstar Award
  • Located in United States
+2 more
organicbee
says

EDIT: Removed code moved to gist because I hate this forum formatting https://gist.github.com/chrisakelley/d6291fddfd3cd831e3f4

I copy and pasted a lot so it may break, but should get you in the right direction, Im also presuming from a quick search that get_field(); accepts the page ids, I dont use ACF as I roll my own framework so not real familiar

916 posts Rock 'N' Roll
  • Elite Author: Sold more than $75,000 on Envato Market
  • Had an item that was trending
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been part of the Envato Community for over 2 years
+4 more
LSVRthemes
says

Thanks Chris. You are right, it can be done but I still don’t see a point doing it with wp_add_inline_style(). I think that this is much more complicated solution than just adding some small inline CSS whose presence is controlled by user itself.

148 posts
  • Has been part of the Envato Community for over 2 years
loveetc
says

@chrisakelley:

I really appreciate your help. I have been testing the code. So here is the basic example of your code, which works fine:
add_action( 'wp_enqueue_scripts', 'prefix_css_stuff' );
function prefix_css_stuff(){
    $custom_css = '.class1{ background: "red"}';
    wp_add_inline_style('prefix-screen', $custom_css);    
}
Now the problem is that, I want to send the custom_css to this function so that it can add it. Here’s what I’m trying:
add_action( 'wp_enqueue_scripts', 'prefix_css_stuff' );
function prefix_css_stuff($custom_css){    
    wp_add_inline_style('prefix-screen', $custom_css);    
}

function set_some_element_style(){
    $custom_css = '.class1{ background: "red"}';
    prefix_css_stuff($custom_css)    
}
And in the single post I’m calling the function set_some_element_style(); And it does not work. Can you please tell me how can I send custom css to a function whoch can add using the wp_add_inline_style?

Thank you once again

by
by
by
by
by
by