attaching CSS located in own folder

  • Hi!

    I’m pretty new to WordPress and to PHP and I need help.
    I want to attach my css and js to the header which are put in their own folder,but it won’t seem to work when I try different codes. It works only when the css is placed in the root,but I want to put them in their own folder to keep things organized.

    Here are some codes I used:
    <style type=”text/css”>
    @import url(“css/style.css”)
    @import url(“css/lightbox.css”)
    </style>

    Here’s another code I tried:
    `<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>/css/style.com” type=”text/css” media=”screen” />
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>/css/lightbox.com” type=”text/css” media=”screen” />

    I’m really hoping someone could help me with this. Thanks guys!:)

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

  • Where are the files located? In the theme folder or somewhere else?

    If the your custom files are located in a css folder inside your theme you can try:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/my_custom_style.css" type="text/css" media="screen" />

    or you maybe you can add

    @import url("css/my_custom_style.css");

    in the main style.css of your theme.

    Thread Starter daysleeper24

    (@daysleeper24)

    Hi mtws!

    Thanks for the reply. I sort of tried something and somehow it did attach both when I viewed the source. I’m not sure if I did it right and if attaching it this way could cause conflicts later on,but this is how it looks like:

    <link rel="stylesheet" href="<?php get_bloginfo('stylesheet_url'); ?>https://localhost/wordpress/wp-content/themes/personaltheme/css/style.css" type="text/css" media="screen" />

    I’ll try what you suggested since I think it’s how everything’s supposed to be done. I’ll let you know how it works out later on. ?? Thanks again!

    daysleeper, I see a potential problem: https://localhost etc. will only work on your local machine. This won’t work when you upload to the live site.

    I like your goal of keeping things organized, however, I think you can keep things organized without using a separate stylesheet. I’ve seen many well-organized themes that put all the style rules in the regular style.css file. Suppose your theme is called shiftwork. Here’s where the stylesheet that wordpress automatically looks for is located:
    (this is just the last part of the path) wp-content/themes/shiftwork/style.css
    You can divide this file up into well marked sections, using comments and asterisks, and that should give you the organized feeling.

    The beauty of this approach is that you can develop and modify your theme on your local installation, and upload it to the live site without having to change anything.

    Thread Starter daysleeper24

    (@daysleeper24)

    Hi number cruncher!

    Thanks so much for your help. ?? I see what you mean. I tried mwts’ recommended way of attaching stylesheets and it worked!:) Thanks for the help you guys gave me. It means a lot.

    Any ideas how to get jqueries running? Or do I need to download a plugin for it to work. I have a slider that works on a static site but trying it with WordPress,I didn’t have too much success. The images come out but the slider doesn’t. Any ideas? I’ve successfully attached all needed js and css files but they still don’t animate.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘attaching CSS located in own folder’ is closed to new replies.