Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

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


  #1  
Old Apr 18, 2009, 06:50 PM
timware
 
1 posts · Apr 2009
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.
  #2  
Old Apr 19, 2009, 09:28 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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.
  #3  
Old May 13, 2009, 05:19 PM
cyberdelic
 
1 posts · May 2009
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
  #4  
Old May 13, 2009, 06:41 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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.
  #5  
Old May 17, 2009, 09:26 PM
ymf
 
61 posts · May 2009
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.
  #6  
Old May 18, 2009, 07:18 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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.
  #7  
Old Jul 22, 2009, 03:24 AM
extremecarver
 
127 posts · Jul 2009
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?

Last edited by extremecarver; Jul 22, 2009 at 03:33 AM.
  #8  
Old Jul 22, 2009, 08:51 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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 == OR $bfa_ata['css_external'] == "Inline" OR 
    ( 
$bfa_ata_debug == AND $bfa_ata['allow_debug'] == "Yes" ) ) {
        include_once (
TEMPLATEPATH '/css.php');
    }
    if ( 
$bfa_ata_preview == OR $bfa_ata['javascript_external'] == "Inline" OR 
    ( 
$bfa_ata_debug == AND $bfa_ata['allow_debug'] == "Yes" ) ) {
        include_once (
TEMPLATEPATH '/js.php');
    }

  #9  
Old Jul 29, 2009, 08:46 PM
3ukman
 
22 posts · Jul 2009
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 ...
  #10  
Old Jul 29, 2009, 09:48 PM
3ukman
 
22 posts · Jul 2009
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 ...
  #11  
Old Jul 30, 2009, 03:03 PM
extremecarver
 
127 posts · Jul 2009
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...

Last edited by extremecarver; Jul 30, 2009 at 03:37 PM.
  #12  
Old Jul 30, 2009, 04:37 PM
extremecarver
 
127 posts · Jul 2009
@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'] != "") { ?>

Last edited by extremecarver; Jul 30, 2009 at 05:25 PM.
  #13  
Old Aug 3, 2009, 05:27 PM
joaodagraca's Avatar
joaodagraca
 
20 posts · Jul 2009
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 == OR $bfa_ata['css_external'] == "Inline" OR 
    ( 
$bfa_ata_debug == AND $bfa_ata['allow_debug'] == "Yes" ) ) {
        include_once (
TEMPLATEPATH '/css.php');
    }
    if ( 
$bfa_ata_preview == OR $bfa_ata['javascript_external'] == "Inline" OR 
    ( 
$bfa_ata_debug == 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
  #14  
Old Aug 8, 2009, 06:14 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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>
  #15  
Old Aug 13, 2009, 04:13 PM
joaodagraca's Avatar
joaodagraca
 
20 posts · Jul 2009
Thanks,

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

Regards
  #16  
Old Dec 12, 2010, 01:25 PM
bigliettaio's Avatar
bigliettaio
 
128 posts · Nov 2009
Italy
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
  #17  
Old Dec 12, 2010, 01:28 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
If you want to make the CSS external, just go to ato->CSS & js settings and set the CSS for external
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #18  
Old Dec 12, 2010, 06:07 PM
bigliettaio's Avatar
bigliettaio
 
128 posts · Nov 2009
Italy
Thank JD.
There is so many options in Atahualpa that is not easy remeber all.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
3.33 > 3.4 It can't find CSS OzBOz New Versions, & Updating 27 Jul 15, 2009 11:45 AM
Uploading Files To Host Question Rainer Installing & running WordPress 1 Jul 3, 2009 10:23 PM
Trouble with uploading audio files WPuser1001 Web Hosting for WordPress 2 Jun 13, 2009 11:11 PM
Japanese Atahualpa 3.3.3 language files needed TGsoft Languages & Translations 0 May 11, 2009 07:29 AM
too many /head incidences tekdiver500ft Header configuration & styling 1 Apr 8, 2009 09:48 AM


All times are GMT -6. The time now is 04:09 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.