Wordpress Themes - WP Forum at BFA - CSS all dumped into the <head> of the files. Why?

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)

- - CSS all dumped into the <head> of the files. Why? (http://forum.bytesforall.com/showthread.php?t=1323)

timware

Apr 18, 2009 05:50 PM

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

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

Apr 19, 2009 08: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

May 13, 2009 04: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

May 13, 2009 05: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	May 17, 2009 08: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

May 18, 2009 06: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

Jul 22, 2009 02:24 AM

Quote:

Originally Posted by Flynn (Post 6601)

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

Jul 22, 2009 07: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

Jul 29, 2009 07: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

Jul 29, 2009 08:48 PM

Quote:

Originally Posted by Flynn (Post 10969)

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

Jul 30, 2009 02: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

Jul 30, 2009 03: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

Aug 3, 2009 04:27 PM

Quote:

Originally Posted by Flynn (Post 10969)

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

Aug 8, 2009 05: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

Aug 13, 2009 03:13 PM

Thanks,

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

Regards

bigliettaio

Dec 12, 2010 12: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

Dec 12, 2010 12:28 PM

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

bigliettaio

Dec 12, 2010 05:07 PM

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

All times are GMT -6. The time now is 03:24 PM.