CSS all dumped into the <head> of the files. Why?

timware · #1 Apr 18, 2009, 06:50 PM

Does Bytes For All have any plans to have all CSS be external and not inlined? From an SEO point of view, having all those lines of CSS in the <head> can create problems. Also, it's just poor form. Otherwise, a great theme, no doubt.

Thanks.

Flynn · #2 Apr 19, 2009, 09:28 AM

You cannot just access the WP options from inside a non-standard WP file such as style.php. I had it fully working though, except that IE6 won't parse the style.php every now and then. But for that I had to directly access the database, after finding out the database credentials from inside style.php, instead of going through WP functions. Which Wordpress (as a company) didn't like.

I would have to release two different versions in the future, one for the WP theme viewer with all inline CSS and one for my own site with external CSS plus internal for IE6 but I am not sure if I want to put up with the added work for this, especially having to work on 2 versions in the future, and all the "if you have this version than do that..." explanations in the forum and the blog.

I also don't see it as much as a SEO issue as you seem to do, because it is in the head section, not in the body. It is adding to the file size though.

cyberdelic · #3 May 13, 2009, 05:19 PM

Hi Flynn,

Thanks for taking the time to put together such an awesome Word Press Theme.

One concern I have is the individual page size and build-time with the header.php file. I was wondering what the difficulty level would be to add an option that would allow the user to generate a static external css file from the options page that would be referenced rather than included in the head. So, once I've completed my modifications, I simply click a "publish" button that would generate the css file. Users could still have the option to have this code included in the header.php file or to be referenced to the static file.

I realize that I can do this by viewing the page, copying the css into the main style sheet and then removing the code from the header.php file. But this limits the extreme flexibility you have created in the options page. I'm thinking this might be a welcome feature and this would be a great way to handle this.

Thanks for your help!

cyberdelic

Flynn · #4 May 13, 2009, 06:41 PM

I figured out another way to do this and in 3.3.4 all the CSS and Javascript in header.php will be in their own files style.css.php and javascript.php, and compressed (comments, blank spaces and new lines stripped), too.

ymf · #5 May 17, 2009, 09:26 PM

I second cyberdelic's idea. Static .css should be much more efficient than a dynamic .css.php -- think all those database queries and CPU cycles needed each time when dynamically re-creating the .css out of .css.php.

Instead of introducing the new "publish" button, though, I'd suggest to re-use the existing "Save changes" / "Reset settings" / "Reset ALL theme options" buttons. WHen the user presses any of those buttons, then, in addition to saving the options to the main database, create the static .css file.

Flynn · #6 May 18, 2009, 07:18 AM

A style.css.php won't be re-requested by the browser for each page view, they will keep it in their cache. I'll experiment with a theme option to set the expiry in the header of style.css.php. I'll add a static CSS option but users will either have to upload that or make the style.css writable, or owned by the web server.

extremecarver · #7 Jul 22, 2009, 03:24 AM

Quote:

Originally Posted by Flynn

I figured out another way to do this and in 3.3.4 all the CSS and Javascript in header.php will be in their own files style.css.php and javascript.php, and compressed (comments, blank spaces and new lines stripped), too.

Does this mean the above example by cyberdelic of copying the css from sourcecode of a page to style.css will not work anymore?

I would really prefer static css and no php regernation each time. Setting expriry time of style.css very short (i.e. 60 seconds) should be enough, or? (I thing that IE6 users simply could be redirected via .htaccess to be serverd php or am I wrong).

If I go to a rendered page and copy out the following section.
<style type="text/css">

........

<style type="text/css">
And now put it into style.css replacing the tiny bit of code in there. Do I now only have to delete all code from header.php only, or also from css.php, footer.php, functions.php, searchform.php, comments.php and comments-paged.php?

Flynn · #8 Jul 22, 2009, 08:51 PM

Set the CSS and JS to external, call the files yourdomain.com/?bfa_ata_file=css and yourdomain.com/?bfa_ata_file=js in your browser and save them as static files, reference these files in header.php and disable line 220-245 of functions.php by deleting or commenting it:

PHP Code:


			
add_action('template_redirect', 'bfa_css_js_redirect');
add_action('wp_head', 'bfa_inline_css_js');


function bfa_css_js_redirect() {
    $bfa_ata_query_var_file = get_query_var('bfa_ata_file');
    if ( $bfa_ata_query_var_file == "css" OR $bfa_ata_query_var_file == "js" ) {
            global $bfa_ata;
            include_once (TEMPLATEPATH . '/' . $bfa_ata_query_var_file . '.php');
            exit; // this stops WordPress entirely
    }
}
    
function bfa_inline_css_js() {
    global $bfa_ata;
    $bfa_ata_preview = get_query_var('preview');
    $bfa_ata_debug = get_query_var('bfa_debug');
    if ( $bfa_ata_preview == 1 OR $bfa_ata['css_external'] == "Inline" OR 
    ( $bfa_ata_debug == 1 AND $bfa_ata['allow_debug'] == "Yes" ) ) {
        include_once (TEMPLATEPATH . '/css.php');
    }
    if ( $bfa_ata_preview == 1 OR $bfa_ata['javascript_external'] == "Inline" OR 
    ( $bfa_ata_debug == 1 AND $bfa_ata['allow_debug'] == "Yes" ) ) {
        include_once (TEMPLATEPATH . '/js.php');
    }
}

bigliettaio · #9 Dec 12, 2010, 01:25 PM

Hi Flynn, i would like trying a called to an external style sheet making it in a very simple way

First i copy all internal style sheet from original source of my site and copy in a new mystyle.css file

To do that i simply put beetween "/*" and "*/" the relative php code in header.php

/*

PHP Code:


			
<?php if ( $bfa_ata['css_external'] == "External" ) { ?>
<link rel="stylesheet" href="<?php bloginfo('url'); ?>/?bfa_ata_file=css" type="text/css" media="all" />
<?php } ?>

*/

At this point should enoght to insert the code

HTML Code:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

BUT

What about calling the orignal style.css?
I have to insert another <link rel="stylesheet"> concerning style.css
and than
Do you suggested me to add the attribute media="all" to link tag?

ATA version: 3.5.3.
Thanks

juggledad · #10 Dec 12, 2010, 01:28 PM

If you want to make the CSS external, just go to ato->CSS & js settings and set the CSS for external

bigliettaio · #11 Dec 12, 2010, 06:07 PM

Thank JD.
There is so many options in Atahualpa that is not easy remeber all.