How to call css in a php function in wordpress

Question

I'm working on a wordpress theme, and i want to be able to apply a css change to all pages instead of just one page, for example, the frontpage only is applying changes on the front page, i want to be able to call this in the functions.php, however im not so sure how to call it.

In a nutshell, how to call css in a php function, in the functions.php file

Any Suggestions ?

template-frontpage.php

<?php
/**
* Template Name: Front Page
*
* @package Eli
*/
get_header();

$hero = cs_get_option('hero_image');
?>

<style type="text/css">

.hero:before{
background-color:<?php echo cs_get_option('hero_color_picker');?>;

}


.hero:after{
 background-color:<?php echo cs_get_option('hero_color_picker');?>;

}

a{
    color: <?php echo cs_get_option('link_color');?>; 
}

footer a{
    color:<?php echo cs_get_option('link_color');?>; ;
}



</style>

<div class="row">
    <div class="hero" style="background-image:url(<?php echo $hero; ?>); width:100%; min-height:350px; background-size: cover;">
        <div class="container">
            <div class="col-md-12">
                <header class="hero-text">

                <?php if (get_field('hero_title') ):?>

                    <h1 style="color:#fff;"><?php the_field('hero_title'); ?></h1>

                <?php endif;?>

                <?php if (get_field('hero_span') ):?>

                    <span><?php the_field('hero_span'); ?></span>

                <?php endif;?>


                <?php if (get_field('hero_span_2') ):?>

                    <span id="move"><?php the_field('hero_span_2'); ?></span>

                <?php endif;?>




                </header>

            </div>
        </div>
    </div>
</div>
<section class="section-home">
    <div class="row">
        <div class="container">
            <div class="line"></div>
            <?php if (get_field('content_block_left') ):?>
            <div id="cbl" class="col-md-4 col-xs-12">
                <?php the_field('content_block_left_icon'); ?>
                <?php the_field('content_block_left'); ?>

            </div>
            <?php endif;?>
            <?php if (get_field('content_block_left2') ):?>
            <div id="cbl" class="col-md-4 col-xs-12 ">
                <?php the_field('content_block_left_2_icon'); ?>
                <?php the_field('content_block_left2'); ?>

            </div>
            <?php endif;?>
            <?php if (get_field('content_block_left3') ):?>
            <div id="cbl" class="col-md-4 col-xs-12">
                <?php the_field('content_block_left_3_icon'); ?>
                <?php the_field('content_block_left3'); ?>

            </div>
            <?php endif;?>

        </div>

    </div>
</section>
<div class="section-about">
    <div class="row">
        <h1>Beat Your Rivals</h1>
        <div class="line"></div>
        <div class="container">
            <?php if (get_field('image_left') ):?>
            <div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">

                <img src="<?php echo the_field('image_left'); ?>" width:"400px" height:"300px">

            </div>
            <?php endif;?>
            <?php if (get_field('caption_text') ):?>
            <div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">

                <?php the_field('caption_text'); ?>

            </div>
            <?php endif;?>
        </div>
    </div>
</div>
<?php
$image2 = get_field('test_image');
?>
<div class="section-test" style="background-image:url(<?php echo $image2['url'];?>); width:100%; min-height:300px; background-size: cover;">
    <div class="row">
        <div class="container">
            <?php if (get_field('test_text') ):?>
            <div id="cbl3" class="col-md-12 col-xs-12">

                <?php the_field('test_text'); ?>

            </div>
            <?php endif;?>

        </div>
    </div>
</div>


<div class="about-us">
    <div class="row">

        <div class="container">

        <?php if (get_field('about_us') ):?>
            <div class="col-md-12 col-xs-12">

                <?php the_field('about_us'); ?>

            </div>
        <?php endif;?>


        </div>
    </div>
</div>



<?php
$image3 = get_field('cons_image');
?>

<div class="consult">
    <div class="row">
        <div class="my-block-left" style="background-image:url(<?php echo $image3['url'];?>); background-size: cover;" >

            <div class="container">

            <?php if (get_field('consult_us') ):?>
                <div class="col-md-12 col-xs-12">

                    <?php the_field('consult_us'); ?>

                </div>
            <?php endif;?>


            </div>


        </div>
    </div>
</div>


<?php if (get_field('contact_us') ):?>
<div class="contact-us">
    <div class="row">

        <div class="container">

        <h1 class="contact-h1">Contact Us</h1>

        <div class="line"></div>


            <div class="col-md-12 col-xs-12">

                <?php the_field('contact_us'); ?>

            </div>



        </div>
    </div>
</div>
<?php endif;?>

<?php get_footer(); ?>

Kaziko · Accepted Answer · 2017-03-25 19:31:58Z

2

Not sure if you want to know how to enqueue css or how to limit css to specific pages so

To include styles use in your function.php

function site_styles() {
    wp_register_style( 'global-css', get_template_directory_uri() . '/assets/css/global.css');
    wp_register_style( 'frontpage-only-css', get_template_directory_uri() . '/assets/css/frontpage.css');
}
add_action('init', 'site_styles');

than you can decide where to use or not those styles

// is_front_page()
// is_page(XX) - is page id XX
// is_single() && get_post_type()="custom_post_type" - single for custom posts
// more about conditional tags: https://codex.wordpress.org/Conditional_Tags

function enqueue_styles() {
    if ( is_front_page() ) {
        wp_enqueue_style( 'frontpage-only-css' );
    } else {
        wp_enqueue_style( 'global-css' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

answered Mar 25, 2017 at 19:31

Kaziko

14210 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BARNOWL Over a year ago

how would you call css styling in a php function ?

Collectives™ on Stack Overflow

How to call css in a php function in wordpress

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related