How to add CSS for a single wordpress page externally?

Discussion in 'WordPress' started by rajanpanicker, Jul 16, 2010.

  1. #1
    I want to design my home page and add some CSS elements into it as it will be having many design parametres.However I donot want to add the CSS like
    <style>
    ............
    </style>
    in that page,instead,I would like to make a different css file within the wordpress contents and then call that CSS file while typing that page without affecting the SEO for that page as I heard using CSS internally can affect your SEO for that page.
    Also I am not sure if its allowed to give the direct path while refering to the CSS.
    Also is there any way that I can call an external CSS from the HTML Single Wordpress Page without having to add this code
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    there
    I heard that adding unnecessary codes can affect your SEO quite a lot.
    Also in place of "StyleSheet.css"
    if I added the CSS in a different place other than the default wordpress installation do I need to call it using the absolute path,ie www.site.com/......./stylesheet.css or
    should I call using something like this
    /path/stylesheet.css
     
    rajanpanicker, Jul 16, 2010 IP
  2. Deacalion

    Deacalion Peon

    Messages:
    438
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Embedded CSS could possibly affect SEO (due to googles new speed 'signal') - but you're talking about such a tiny factor here it's not worth thinking about. It's a drop in the ocean compared to other ranking factors. Externally loaded CSS however (<link hred="..." rel="stylesheet" type="text/css">) will not affect SEO in any way - as the search engine crawlers don't bother downloading them, so it doesn't affect the pages speed in their eyes. :)

    Get a plugin like 'General Headers & Footers' and upload your CSS file to somewhere like 'wp-content/themes/yourTheme/sheet.css'. Then add this to the plugin:
    
    <link href="/wp-content/themes/yourTheme/sheet.css" rel="stylesheet" type="text/css">
    
    HTML:
     
    Deacalion, Jul 16, 2010 IP
  3. rajanpanicker

    rajanpanicker Greenhorn

    Messages:
    69
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #3
    What if I want to add the CSS to only 1 page,is it possible with the above plugin?
    Also is it possible to do the same without the use of a plugin for just 1 page by editing some of the code?
     
    rajanpanicker, Jul 16, 2010 IP
  4. Deacalion

    Deacalion Peon

    Messages:
    438
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The plugin doesn't allow that, but you can do it easily enough yourself. Look for header.php in your theme.
    Modify this to suite your needs and add it between the <head></head> tags.
    
    <?php
        if (is_page('2'))
            echo '<link href="/wp-content/themes/yourTheme/sheet.css" rel="stylesheet" type="text/css">';
    ?>
    
    PHP:
    The is_page() function can take a page id, page name or page slug.
     
    Deacalion, Jul 16, 2010 IP
  5. rajanpanicker

    rajanpanicker Greenhorn

    Messages:
    69
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #5
    Here when I click on edit in the page its showing
    http://www.mysite.com/wp-admin/page.php?action=edit&post=82
    So I believe the Page ID is 82 here right?
    Also the style is shown as below
    So I believe I need to delete
    <style type="text/css">
    <!--
    and
    -->
    </style>

    and then save it as .css right?
    Also do I need to make any changes to the paramtres like
    .CENTER
    .BOLD
    and rename it to something like
    #CENTER
    or should I leave it intact?
     
    rajanpanicker, Jul 16, 2010 IP
  6. Ricechen

    Ricechen Peon

    Messages:
    89
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    If you want to embed css, it is best to find the file header.php
     
    Ricechen, Jul 16, 2010 IP
  7. Deacalion

    Deacalion Peon

    Messages:
    438
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Yep, you've done everything right. Once you saved it as a .css - upload it to your web server.
    Then change the code I gave you to:
    
    <?php
        if (is_page('82'))
            echo '<link href="/wp-content/themes/yourTheme/sheet.css" rel="stylesheet" type="text/css">';
    ?>
    
    PHP:
     
    Deacalion, Jul 17, 2010 IP