3249 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 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 1 year
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.

544 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in Slovakia
+3 more
LubosVolovar 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?

390 posts
  • Has referred 100+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
EugeneO says

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

3249 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 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

3249 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 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.

544 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in Slovakia
+3 more
LubosVolovar 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.

3249 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 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

544 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in Slovakia
+3 more
LubosVolovar 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 1 year
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