Want to use specific CSS file for all single posts WordPress
We have a site in which we have specific css files for custom page templates.
Now we want ALL our posts, from any category, to use one of those css files, rather than the default style used on the homepage. But I'm not sure where and how to add some sort of call to use particular css within the single post php.
Most of the instruction I'm finding has to do with creating custom single post templates and assigning them through functions.php or elsewhere, which all seems like WAY too much for what we need, since our need is not category or post specific. We want ALL posts to use our steelblue.css, not just some of them.
Answers (9)
AdamGold answers:
Add the following code to your functions.php:
function add_style_to_single()
{
if (is_single()) {
wp_enqueue_style('steelblue', 'path/to/steelblue.css');
}
}
add_action('wp_print_styles', 'add_style_to_single');
Kayle comments:
Thanks but this caused my category blog page to look like this:
http://realfreshcreative.com/fractalscreen.jpg
Not sure why.
AdamGold comments:
I'm guessing you didn't put <?php before that syntax, here's the new one:
<?php
function add_style_to_single()
{
if (is_single()) {
wp_enqueue_style('steelblue', 'path/to/steelblue.css');
}
}
add_action('wp_print_styles', 'add_style_to_single');
Kayle comments:
Don't I then need a ?> at the end, as well, if I do that? My function.php is copied below; see the end of it. Is that correct now?
<?php
/**
* Sets up the theme by loading the Mysitemyway class & initializing the framework
* which activates all classes and functions needed for theme's operation.
*
* @package Mysitemyway
* @subpackage Functions
*/
if ( !function_exists( 'mysite_menus' ) ) :
/**
*
*/
function mysite_menus() {
register_nav_menu( 'primary-menu', __( 'Primary Menu', MYSITE_ADMIN_TEXTDOMAIN ) );
register_nav_menu( 'primary-menu-logged-in', __( 'Primary Menu Logged In', MYSITE_ADMIN_TEXTDOMAIN ) );
register_nav_menu( 'header-links', __( 'Header Links', MYSITE_ADMIN_TEXTDOMAIN ) );
register_nav_menu( 'footer-links', __( 'Footer Links', MYSITE_ADMIN_TEXTDOMAIN ) );
}
endif;
if ( !function_exists( 'mysite_primary_menu' ) ) :
/**
*
*/
function mysite_primary_menu() {
$out = '<div id="primary_menu">';
ob_start(); mysite_primary_menu_begin();
$out .= ob_get_clean();
if ( !is_user_logged_in() ) {
$out .= wp_nav_menu(
array(
'theme_location' => 'primary-menu',
'container_class' => 'jqueryslidemenu',
'menu_class' => ( !has_nav_menu( 'primary-menu' ) ? 'jqueryslidemenu' : ''),
'echo' => false,
'walker' => ( has_nav_menu( 'primary-menu' ) ? new mysiteDescriptionWalker() : '')
));
}
else
{
$out .= wp_nav_menu(
array(
'theme_location' => 'primary-menu-logged-in',
'container_class' => 'jqueryslidemenu',
'menu_class' => ( !has_nav_menu( 'primary-menu-logged-in' ) ? 'jqueryslidemenu' : ''),
'echo' => false,
'walker' => ( has_nav_menu( 'primary-menu-logged-in' ) ? new mysiteDescriptionWalker() : '')
));
}
$out .= '<div class="clearboth"></div>';
ob_start(); mysite_primary_menu_end();
$out .= ob_get_clean();
$out .= '</div><!-- #primary_menu -->';
echo apply_atomic_shortcode( 'primary_menu', $out );
}
endif;
# Load the Mysitemyway class.
require_once( TEMPLATEPATH . '/framework.php' );
# Get theme data.
$theme_data = get_theme_data( TEMPLATEPATH . '/style.css' );
# Initialize the Mysitemyway framework.
Mysitemyway::init(array(
'theme_name' => $theme_data['Name'],
'theme_version' => $theme_data['Version']
));
function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
</style>';
}
add_action('login_head', 'my_custom_login_logo');
function change_wp_login_url() {
echo bloginfo('url');
}
function change_wp_login_title() {
echo get_option('blogname');
}
?>
<?php
// replace WordPress Howdy in WordPress 3.3
function replace_howdy( $wp_admin_bar ) {
$my_account=$wp_admin_bar->get_node('my-account');
$newtitle = str_replace( 'Howdy,', 'Welcome', $my_account->title );
$wp_admin_bar->add_node( array(
'id' => 'my-account',
'title' => $newtitle,
) );
}
add_filter( 'admin_bar_menu', 'replace_howdy',25 );
?>
<?php remove_filter ('the_content', 'wpautop'); ?>
<?php
function add_style_to_single()
{
if (is_single()) {
wp_enqueue_style('steelblue', 'http://fatfractal.com/beta/wp-content/themes/infocus/styles/steelblue.css');
}
}
add_action('wp_print_styles', 'add_style_to_single');
?>
AdamGold comments:
Yes it should work now. FYI, ?> is not needed :)
Kayle comments:
Addition of the tag didn't help; still showing the code at top of blog page and not changing the css. I know the location of the css file I'm pointing to is correct; was there anything else I needed to alter in your code to work?
AdamGold comments:
I am sorry, replace:
add_action('wp_print_styles', 'add_style_to_single');
With:
add_action('wp_enqueue_scripts', 'add_style_to_single');
Daniel Yoen answers:
put this lines to your header.php
<?php if(is_singular()) { ?>
<!-- your style here -->
<?php } ?>
complete guide :
http://codex.wordpress.org/Conditional_Tags
Navjot Singh answers:
Add this line in your function.php
if(is_single())
{
function wp7088_style()
{
// Register the style like this for a theme:
wp_register_style( 'custom-style', get_template_directory_uri() . '/steelblue.css', array(), '20120815', 'all' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'wp7088_style' );
}
Abdelhadi Touil answers:
Hi.
You can use AdamGold answer, or just paste this code in you header.php file:
<?php if (is_single()) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/single.css" />
<?php } ?>
single.css is the css file you want to use for single posts.
and you can find helpful informations here:
[[LINK href="http://www.wpbeginner.com/wp-themes/how-to-style-each-wordpress-post-differently/"]]http://www.wpbeginner.com/wp-themes/how-to-style-each-wordpress-post-differently/[[/LINK]]
Good luck.
Pali Madra answers:
I typically follow the rules laid down at [[LINK href="http://www.wpbeginner.com/wp-themes/how-to-style-each-wordpress-post-differently/"]]http://www.wpbeginner.com/wp-themes/how-to-style-each-wordpress-post-differently/[[/LINK]].
This does the job. However, if you need help give me a shout and I can do it for you.
Arnav Joy answers:
in header.php find following line
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
and replace with
<?php if (is_single()) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/steelblue.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php } ?>
Kayle comments:
My header file doesn't have that line. I've notice with infocus theme, the header file seldom has anything anyone tells me to look for... they just don't do things the normal way, I guess. In any case I'm hoping to solve this using functions.php, as Adam said I could do...it's just that I pasted his code in and it caused problems, see response to him above. Thanks, though, for answering! I really do appreciate it.
Asad Iqbal answers:
Custom page template is not so complex as you've a css already. If you are interested then I can make a page template for you. Custom page template is easy to use from admin panel and then you can use both, current template and new custom page template upon your wish.
Kayle comments:
I am not trying to do a custom PAGE template. I already have those. I am trying to assign some custom css to all single POSTS.
Asad Iqbal comments:
Can you please give me your site link?
Martin Pham answers:
Please inset into functions.php
function load_custom_style() {
if(is_singular()) {
// Using for single post and all custom post type
wp_register_style( 'split-style', get_stylesheet_directory_uri().'/stylesheets_folder/steelblue.css' );
} else {
// Using for home - category ....
wp_register_style( 'split-style', get_stylesheet_directory_uri().'/stylesheets_folder/you_default_style.css' );
}
wp_enqueue_style( 'split-style' );
}
add_action('wp_enqueue_scripts', 'load_custom_style');
Kayle comments:
Can you please indicate to me what i need to alter in this code ? For example, instead of stylesheets_folder, do I put a full uri of where the steelblue.css is located int that spot? I'm sorry but I need people to be very specific with me on things...
Kayle comments:
also I don't want to use this style for the home page or the category page...just the single post pages.
Martin Pham comments:
insert this into functions.php
function load_custom_style() {
if(is_singular()) {
// Only load it on single post and all custom post type
wp_register_style( 'split-style', get_stylesheet_directory_uri().'/styles/steelblue.css' );
wp_enqueue_style( 'split-style' );
}
}
add_action('wp_enqueue_scripts', 'load_custom_style');
What about:
<strong>get_stylesheet_directory_uri()</strong> : [[LINK href="http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri"]]http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri[[/LINK]]
<strong>is_singular()</strong>: [[LINK href="http://codex.wordpress.org/Function_Reference/is_singular"]]http://codex.wordpress.org/Function_Reference/is_singular[[/LINK]]
Kayle comments:
Thanks for the reference links. It looks like singular affects pages as well as posts; that would be problematic. I think perhaps single is more correct here.
Martin Pham comments:
yes, if you dont want load it on page, you can use <strong>is_single()</strong>
function load_custom_style() {
if(is_single()) {
// Only load it on single post and all custom post type
wp_register_style( 'split-style', get_stylesheet_directory_uri().'/styles/steelblue.css' );
wp_enqueue_style( 'split-style' );
}
}
add_action('wp_enqueue_scripts', 'load_custom_style');
[[LINK href="http://codex.wordpress.org/Conditional_Tags#A_Single_Post_Page"]]http://codex.wordpress.org/Conditional_Tags#A_Single_Post_Page[[/LINK]]