1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to add CSS for a single wordpress page externally?

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

0
  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