I am currently working on a wordpress theme and I have a little problem in my page.
The wpadminbar element is not setting up its style. I have no idea why it is, but it is.
Screen shot:
I had the same problem and added this to the header template:
<?php
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?></head>
Have you done any debugging with Firebug (a Firefox plugin)? Which styles does your page load?
From a screenshot this one is a bit hard to solve.
First guess: you forgot to add the link to the main WP CSS (called admin-bar.css) in your theme's header.
Have you tried using firebug on it to find where the CSS file is? If it's on the server it's time to narrow it down in the CSS.
Check if you have wp_deregister_style('open-sans'); in your theme it can be the reason of this!
Related
In one of my php functions I add some quite simple css. It worked very well until today. Actually the css is still doing his job, but in addition it prints in the middle of my layout whatever is written between the <style></style> tags - in my case it shows .element {display: none !important;} .
My code:
echo'<style>.element {display: none !important;}</style>';
Has there been any update to php or WP that doesn't allow this anymore? Is there any other way to do this?
Thanks a lot for your help!
I am not sure if it might change anything, but can you try print?
Also I think if <style> is not within <head></head> it will not work.
I found a working solution. Previously, I had a function in functions.php, which did some user type specific PHP and also CSS. Now I removed the CSS from functions.php and added it to header.php just before </head>.
The function is in two places now, which I wouldn't prefer, but it works very well.
Still a riddle to me is, how the echo "<style>...</style>"; used to work in functions.php for approx. the last 6 months or so and then suddenly yesterday created mentioned issue.
Btw, I also tried ?><style>...</style><?php and print "<style>...</style>";. All created the same issue. Again, the "<style>" was not shown on the browser, only whatever was inside. Also, the CSS worked. Whatever, statements I entered was interpreted as correct CSS, but in addition also shown as text right between the layout. Here is an example source code at the browser at my example page :
source code at browser
if you wanna to add a custom style to your WordPress theme (that probably you do not design it) its better to add it to custom styles from your admin area.
I'm using Wordpress, but this question could probably apply to other PHP-driven templating system.
I'd like to have a css file (i.e. critical.css) that contains all the styles for important global elements & above-the-fold content (e.g. typography, header includes, navigation, site-wide banners/heros), kept separate from my modular content, page-specific styles & footer styles. I then want to take the contents of this file and print it between style tags right below the document title tag.
The goal is to improve above-the-fold rendering speed. I've noticed a definite improvement in the rendering of above-the-fold content when those styles are prioritized (along with any resets), even if those improvements are more experiential than technical.
But...I'm having trouble figuring out how to "print" the inline styles from this document into the wp_head.
I've explored wp_add_inline_style and this does not seem to offer the functionality I'll need. It appears you have to define those styles within a function, and that's definitely not what I'm going after.
Does there exist a method for hooking inline styles taken from my critical.css file into the wp_head? wp_print_styles is either deprecated or not recommended according to the Codex.
If not, what is the preferred method of emphasizing these critical styles in Wordpress? Preferably, a method that's not render-blocking or doesn't rely on a metabox.
I'm trying to avoid using a PHP include (i.e. dumping everything between PHP tags in a critical-styles.php file and then calling that in the wp_head) in favor of something cleaner or that can be achieved with functions.php or Wordpress's native hooks. With all the emphasis on Pagespeed optimization these days, I was surprised that this hadn't been asked here in a Wordpress context. Any help on this or methods that have worked better for you are greatly appreciated.
You can simply include the actual CSS file in header.php:
<style>
<?php include 'path/to/critical.css'; ?>
</style>
PHP's include() function doesn't require that the included file also has to be PHP.
Alternatively, if you want to keep things in functions.php, you could do a file_get_contents() and hook into the wp_head action hook:
function hook_critical_css() {
$critical_css = file_get_contents( 'path/to/critical.css' );
echo '<style>' . $critical_css . '</style>';
}
add_action('wp_head','hook_critical_css');
My Wordpress configuration is displaying my content completely stripped off HTML tags on the main page. How do I display HTML tags in my content in this case?
On the post page it's:
<code><!doctype html></code>some text....
But on the main page it's:
<!doctype html>some text.... //For some reasons the tags are removed, why?
This is important because I'm applying styles to the <code> tag and I don't want code look like normal text on the main page.
Thanks in advance
try to wrap it in <code><pre>code here</pre></code>
Are you looking for code highlighters??
Then try out anyone of following plugins:
SyntaxHighlighter
Evolved
WP-Syntax
FV Code
Highlighter
CodeColorer
I need one advice from you. I am working on a website, which uses PHP and HTML. As the biggest part of the header and footer code will be same for many pages, I am thinking of using PHP's include to avoid code duplication. But, each of those pages requires different stylesheets and JS files included. What do you think how could I let the other file know what scripts and stylesheet to import?
Our company does this:
The header reads the filename of the page calling it when it's included.
Then, it changes the extension to '.js' and outputs that if it exists. Same for CSS.
So if I have a page "register.php", it will auto-include "register.js" and "register.css" if they exist.
Here's what I do:
<?php include("includes/headContent.php"); ?>
<title>Page title goes here!</title>
<script src="script_only_used_on_this_page"></script>
<?php
require_once("includes/siteHeader.php");
?>
Site Content Goes Here!!
<?php
require_once("includes/siteFooter.php");
?>
Head Content includes any PHP I want included in every page, as well as the opening html and head tag, and any Javascript libraries and css stylesheets I want on every page. Site header closes the /head tag, and opens the body as well as printing out my site header and some other markup that goes on every page. Finally Site Footer closes out my template. Everything in between is my content area!
There are lots of different ways you can do templating, if you wanted to create a simple include and an echoHeader() and an echoFooter() function... just have the echoHeader function accept a parameter which you would pass your javascript and CSS lines to.
you can use MVC coding pattern
I need to use drupal_add_css to call stylesheets onto single Drupal 6 pages. I don't want to edit the main theme stylesheet as there will be a set of individual pages which all need completely new styles - the main sheet would be massive if i put it all in there.
My solution was to edit the page in PHP editor mode and do this:
<?php
drupal_add_css("/styles/file1.css", "theme");
?>
<div id="newPageContent">stuff here in html</div>
But when I view source, there is nothing there! Not even a broken CSS link or anything, it's just refusing to add the CSS sheet to the CSS package put into the page head.
Variations don't seem to work either:
drupal_add_css($path = '/styles/file1.css', $type = 'module', $media = 'all', $preprocess = TRUE)
My template header looks like this, I've not changed anything from the default other than adding a custom JavaScript.
<head>
<?php print $head ?>
<title><?php print $head_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/javascript" src="<?php print base_path() ?>misc/askme.js"></script>
<!--[if lt IE 7]>
<?php print phptemplate_get_ie_styles(); ?>
<![endif]-->
</head>
Why is this function not working?
It is not quite clear where you are selecting the template that you have in your example. If you are selecting it from a module then you can just use drupal_add_css in the module rather than the template.
If you have your own theme you can use template_preprocess_page and put logic in there to add the relevant CSS (you can also use it to select the template to use).
I have noticed something weird and it might fix your problem:
drupal_add_css( drupal_get_path('theme','themname') . '/working.css','module' ,'all' , false );
drupal_add_css( drupal_get_path('theme','themname') . '/path/to/folder/notworking.css','module' ,'all' , false );
The first one will work ebcause the style it in the main them folder
The second line will not work because the style is in a sub folder !
Edit:
i think it did not work because i did not write the path the the style file properly :S so please disregard my answer
drupal_add_css( drupal_get_path('theme','test') . '/pages/subpage/style.css','theme');
is working
This function wont work in templates. The reason is that the variable $styles which will hold all the stylesheet html will already have been generated at this point, so drupal_add_css wont work as it adds to that. if you want to do this in your theme, you would probably have to add the css file manually
<link rel="stylesheet" ... />
The other way would be to use drupal_add_css in a module, but you might have a hard time adding the correct css files on the pages you want.
It's possible to use drupal_add_css() inside your template.php file; this page has a good example of how to do just that.
Thanks for the link, wyrmmage. That's very useful. I think the rest of the code in the page is unneccessary. You probably just need these since drupal 6 already automatically check for file existence:
drupal_add_css(path_to_theme() . '/css/yourcss.css', 'theme');
// Add the following to regenerate $styles.
// This is needed for template_preprocess_page() since css is already generated at this point.
$variables['styles'] = drupal_get_css();
Answer was very much to use the CSS Injector module - great little addon!
Here is an excerpt from its project page:
Allows administrators to inject CSS into the page output based on configurable rules. It's useful for adding simple CSS tweaks without modifying a site's official theme. The CSS is added using Drupal's standard drupal_add_css() function and respects page caching, etc. The 2.x brach leverages CTools so CSS can be included with Feature changes (ie. CSS that improves the look of a View can be packaged with the View).
This code inside template.php works for me:
function alagna_preprocess_page(&$vars) {
drupal_add_css(path_to_theme() . '/header_1.css', 'theme');
$vars['css'] = drupal_add_css();
$vars['styles'] = drupal_get_css();
}
explained:
alagna is the theme name
header_1.css is the css file required.
drupal_add_css is expecting a path relative to base path whereas drupal_get_path does not return the path relative to base path.
global $base_path;
drupal_add_css($base_path . drupal_get_path('module / theme','name') . "/styles/file1.css", "module / theme");
You can choose between module and theme accordingly.
Try this
common.inc drupal_get_css($css = NULL)
Parameters
$css: (optional) An array of CSS files. If no array is provided, the default stylesheets array is used instead.
$css = $vars['css'];
// unset the system css files
$unset_css = array
'modules/system/system.css',
'modules/system/system-menus.css',
);
foreach($unset_css as $css_f) {
if(isset($css['all']['module'][$css_f])) {
unset($css['all']['module'][$css_f]);
}
}
// add css
$css['all']['theme'][drupal_get_path('theme', 'openpublish_theme') . '/css/style.css'] = true;
$vars['styles'] = drupal_get_css($css);