Add custom style sheet for search results page
-
Hello, I have read a few posts about how to specify in header.php a custom style sheet for the Search Results page. I understand that I need to add something like this;
<?php if( is_search() ) { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/search.css" type="text/css" media="screen" /> <?php } else { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <?php } ?>However, I am not sure which line referring to the stylesheet in my header.php to alter. Can anyone please give me some guidance on this?
Here is my existing header.php for reference.
Thanks!
<?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ ?><!DOCTYPE html> <!--[if IE 6]> <html id="ie6" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 7]> <html id="ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html id="ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <link rel="shortcut icon" href="https://dev.bearleaderchronicle.com/site/wp-content/themes/blc/images/favicon.ico" type="image/x-icon" /> <meta charset="<?php bloginfo('charset'); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php wp_title(); ?></title> <link rel="profile" href="https://gmpg.org/xfn/11" /> <meta name="viewport" content="user-scalable = yes"> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]--> <?php /* We add some JavaScript to pages with the comment form * to support sites with threaded comments (when in use). */ if (is_singular() && get_option('thread_comments')) wp_enqueue_script('comment-reply'); /* Always have wp_head() just before the closing </head> * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to <head> such * as styles, scripts, and meta tags. */ wp_head(); ?> <style type="text/css"> #outerImageContainer, #imageDataContainer, #overlay{ background-color: <?php if (get_field("background_color")) the_field("background_color") ; ?> !important; } </style> <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/css/custom.css" /> <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/css/media.css" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> </head> <body <?php body_class(); ?> style="background-color: <?php if (get_field("background_color")) the_field("background_color"); ?>"> <div id="page" class="hfeed"> <header id="branding" role="banner"> <div id="header-content-area"> <?php // Check to see if the header image has been removed $header_image = get_header_image(); if ($header_image) { // Compatibility with versions of WordPress prior to 3.4. if (function_exists('get_custom_header')) { // We need to figure out what the minimum width should be for our featured image. // This result would be the suggested width if the theme were to implement flexible widths. $header_image_width = get_theme_support('custom-header', 'width'); } else { $header_image_width = HEADER_IMAGE_WIDTH; } ?> <a href="<?php echo esc_url(home_url('/')); ?>"> <?php // if (is_singular() && has_post_thumbnail($post->ID) && // ( /* $src, $width, $height */ $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array($header_image_width, $header_image_width)) ) && // $image[1] >= $header_image_width) : // // Houston, we have a new header image! // echo get_the_post_thumbnail($post->ID, 'post-thumbnail'); // else : // Compatibility with versions of WordPress prior to 3.4. if (function_exists('get_custom_header')) { $header_image_width = get_custom_header()->width; $header_image_height = get_custom_header()->height; } else { $header_image_width = HEADER_IMAGE_WIDTH; $header_image_height = HEADER_IMAGE_HEIGHT; } ?> <img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" /> <?php // endif; ?> </a> <?php } ?> </div> <div id="header-side-area"> <div id="logo"> <a href="<?php echo home_url('/'); ?>"> <img src="<?php echo get_stylesheet_directory_uri() . '/uploads/logo.png'; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?> Website"/> </a> </div> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></span></h1> <h2 id="site-description"><?php bloginfo('description'); ?></h2> </hgroup> </div> <div class="clear"></div> <div id="header-navigation-area"> <?php if (has_nav_menu('primary')) { ?> <nav id="access" role="navigation"> <?php wp_nav_menu( array( 'container_class' => 'primary-menu', 'theme_location' => 'primary', 'link_before' => '<span>', 'link_after' => '</span>', 'after' => '/', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s<li class="clear"></li></ul>', ) ); ?> </nav><!-- #access --> <?php } ?> <?php if (has_nav_menu('sidebar')) { ?> <nav id="side-access" role="navigation"> <?php wp_nav_menu( array( 'container_class' => 'sidebar-menu', 'theme_location' => 'sidebar', 'link_before' => '<span>', 'link_after' => '</span>', 'after' => '/', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s<li class="clear"></li></ul>', ) ); ?> </nav><!-- #access --> <?php } ?> <div class="clear"></div> </div> </header><!-- #branding --> <div id="main">
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
- The topic ‘Add custom style sheet for search results page’ is closed to new replies.