Using an Alternate CSS based on page.ext

  • Resolved billibones

    (@billibones)


    11 years, 9 months ago

    Hey all,

    I have a site running a custom store outside of the wordpress installation, within a custom template using Twenty Twelve.

    I have a certain CSS style running on the main pages (darker background, etc ..) and when a user navigates into the product pages, I would like to use an alternate stylesheet. I have researched the codex and registered the new stylesheet in my functions.php file, and then made calls in to the header to listen for the page, and based on criteria, load the new css if there is a match. (in this case, if page = products.php, load different css sheet.) Here is my code below, which isnt erroring out, but it is never loading in the new stylesheet. It loads the default sheet everytime.

    Functions.php
    —————–

    function theme_styles()
{
  wp_register_style( 'styleP',
    get_template_directory_uri() . '/styleP.css', array(), '20130227', 'all' );

  // enqueing:
  wp_enqueue_style( 'styleP' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

    Header.php
    —————–

    function curPageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
$ppage = curPageName();

// echo $ppage . "<br />";

if ( $ppage == 'products.php' ) {
?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styleP.css" type="text/css" media="screen" />
<?php } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php }

Viewing 4 replies - 1 through 4 (of 4 total)

  • billibones all you need to do is make use of conditional statements in your functions.php file.

    This is how it works, find an updated version of the code that you posted that loads the styleP.css file if the products page is being called.

    function theme_styles()
{
  wp_register_style( 'styleP',
    get_template_directory_uri() . '/styleP.css', array(), '20130227', 'all' );

  // enqueing:
if( is_page( 'parameter' ) ):
  wp_enqueue_style( 'styleP' );
endif;
}
add_action('wp_enqueue_scripts', 'theme_styles');

    parameter can either be the id of the product page, the slug of the product page or the title of the product page.

    This way the styleP.css file will only be loaded when the products page is being called.

    Thread Starter billibones

    (@billibones)

    Awesome, I just stumbled across this logic, when i saw your reply, thank you so much,working like a champ now =) Much appreciation.

    Thread Starter billibones

    (@billibones)

    Marking resolved. Thanks.

    You welcome.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Using an Alternate CSS based on page.ext’ is closed to new replies.