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');
    }
}

3ukman · #9 Jul 29, 2009, 08:46 PM

With static css and js files , how often does the JS have to be downloaded ? In other words does it change often "by itself" ? The css seems more clear - you can choose whatever you seem appropriate ...

3ukman · #10 Jul 29, 2009, 09:48 PM

Quote:

Originally Posted by Flynn

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:

Right , I just moved CSS and JS to static files load time is totally different picture now.

You probably have some reasons , but from my ( uneducated ) perspective seems like writing these to static files - is a no brainer ...

extremecarver · #11 Jul 30, 2009, 03:03 PM

How was your pageloadtime influenced?

I don't manage to do this step, setting css to be external (not even static but simply external in the options file) makes my page load a complete crap design.

Same happens on static too. I will investigate a bit into that soon if I find time why it breaks layout.

Edit: found plugin that causes external css to fail: Seo friendly images version 2.4.2
It's not that important to me so I will try setting css to static external file now to see the pageload time difference...

extremecarver · #12 Jul 30, 2009, 04:37 PM

@3ukman
Could you post your header.php and your changes to it?

Setting this seems not to work for me (I deleted lines 220-245 and put the files into the functions subdirectory):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<?php /* if index.php or another page template (copied from index.php) was not used
(i.e. by a plugin such as WPG2), the global $bfa_ata would be empty */
global $bfa_ata; if ($bfa_ata == "") include_once (TEMPLATEPATH . '/functions/bfa_get_options.php'); ?>
<?php include (TEMPLATEPATH . '/functions/css.php'); ?>
<?php include (TEMPLATEPATH . '/functions/js.php'); ?>
<?php include (TEMPLATEPATH . '/functions/bfa_meta_tags.php'); ?>
<?php if ($bfa_ata['favicon_file'] != "") { ?>
<link rel="shortcut icon" href="<?php echo $bfa_ata['template_directory']; ?>/images/favicon/<?php echo $bfa_ata['favicon_file']; ?>" />
<?php } ?>

neither does this work for me:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<?php /* if index.php or another page template (copied from index.php) was not used
(i.e. by a plugin such as WPG2), the global $bfa_ata would be empty */
global $bfa_ata; if ($bfa_ata == "") include_once (TEMPLATEPATH . '/functions/bfa_get_options.php'); ?>
<?php include (TEMPLATEPATH . '/functions/css.php'); ?>
<?php include (TEMPLATEPATH . '/functions/js.php'); ?>
<?php if ( $bfa_ata['css_external'] == "External" ) { ?>
<link rel="stylesheet" href="<?php echo $bfa_ata['get_option_home']; ?>/?bfa_ata_file=css" type="text/css" />
<?php } ?>
<?php include (TEMPLATEPATH . '/functions/bfa_meta_tags.php'); ?>
<?php if ($bfa_ata['favicon_file'] != "") { ?>

joaodagraca · #13 Aug 3, 2009, 05:27 PM

Quote:

Originally Posted by Flynn

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');
    }
}

I loaded my main page and copied the css section to style.css.
How will I reference the style.css file as opposed to using the inline method? which files and what code do i need to edit to get this working?
I am using atahualpa 3.4.1

Thanks

Flynn · #14 Aug 8, 2009, 06:14 AM

In header.php replace

<link rel="stylesheet" href="<?php echo $bfa_ata['get_option_home']; ?>/?bfa_ata_file=css" type="text/css" />

with

<link rel="stylesheet" href="<?php echo $bfa_ata['template_directory']; ?>/your-static-css-file.css" type="text/css" />

and replace

<script type="text/javascript" src="<?php echo $bfa_ata['get_option_home']; ?>/?bfa_ata_file=js"></script>

with

<script type="text/javascript" src="<?php echo $bfa_ata['template_directory']; ?>/your-static-js-file.js"></script>

joaodagraca · #15 Aug 13, 2009, 04:13 PM

Thanks,

This has worked and the pages appear to be loading faster by 1 or 2 seconds.

Regards

bigliettaio · #16 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 · #17 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 · #18 Dec 12, 2010, 06:07 PM

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