I create (or better try) to create my first WordPress theme with Less.
What I do is to use a script like that into my functions.php
wp_register_style('screen_css', get_bloginfo('template_url') . '/css/screen.less', array(), false, 'screen');
wp_enqueue_style('screen_css');
and the result is that:
<link rel='stylesheet' id='stigma_screen-css' href='http://www.stigmahost.dch/wp-content/themes/stigmahost/css/screen.less?ver=1.0' type='text/css' media='screen' />
The question is, can I change somehow the rel="stylesheet" when I using the wp_register_style() function ?
While neither function will let you pass that value in, you do have access to the tag before it is rendered with the style_loader_tag filter. If you do something like this...
add_filter('style_loader_tag', 'my_style_loader_tag_function');
function my_style_loader_tag_function($tag){
//do stuff here to find and replace the rel attribute
return $tag;
}
...you should be able to replace the rel attribute with whatever you want. Keep in mind that this filter will pass in the whole tag as html, so you'll have to do a preg_replace() or something similar to replace the value with what you want. Also, this filter will run every time you enqueue a stylesheet, so make sure you test that you've got the right one (with a preg_match() or something) before you alter the rel attribute.
i know this is an old q, but it helped me figure this out. borrowing from brandwaffle's answer here's the full function I used:
function childtheme_scripts() {
wp_enqueue_style('less',get_stylesheet_directory_uri() .'/style.less');
add_filter('style_loader_tag', 'my_style_loader_tag_function');
wp_enqueue_script('less',get_stylesheet_directory_uri() .'/jscripts/less-1.3.0.min.js', false,'1.3.0');
}
add_action('wp_enqueue_scripts','childtheme_scripts', 1);
function my_style_loader_tag_function($tag){
//do stuff here to find and replace the rel attribute
return preg_replace("/='stylesheet' id='less-css'/", "='stylesheet/less' id='less-css'", $tag);
}
Related
I'm trying to insert html into the head of my WordPress site, the plan is to insert a link tag to preload my main css file so that when it is loaded using wp_enqueue_style it is already preloaded. But I'm not entirely sure how to do this, I've seen a few similar issues and have tried a few approaches with no luck, currently I am trying:
function preload_styles() {
$href = 'styles/main.css';
echo `<link rel='preload' as='style' id='main-css' href='$href' type='text/css'/>`;
}
add_action( 'wp_head','preload_styles', 10);
But it seems to be doing nothing... Nothing is being inserted into the head. Any help on this would be greatly appreciated.
You are messing with a single quote and double quote. Try the below code.
function preload_styles() {
$href = 'styles/main.css';
echo '<link rel="preload" as="style" id="main-css" href="'.$href.'" type="text/css/">';
}
add_action( 'wp_head','preload_styles', 10);
Tested and works
My stylesheet is enqueued if i use
<link rel = "stylesheet" type = "text/css" href = "<?php echo get_template_directory_uri();?>/style.css">
but it's not included when i use
function include_css(){
wp_enqueue_style('main_css',get_stylesheet_uri());
}
add_action('wp_enqueue_scripts','include_css');
You may correct the code like this :
function include_css(){
wp_enqueue_style('main_css',get_template_directory_uri().'/style.css');
}
add_action('wp_enqueue_scripts','include_css');
The issue is that you are trying to enqueue the css file without specifying it's complete url the code you use i.e
> wp_enqueue_style('main_css',get_stylesheet_uri());
This means that you are adding the style.css file which is always on the root directory but still you are giving name as main_css first make sure which css you want to add then someone will able to properly answer your question and the css you are trying to add is in which directory.
Please refer to this link get_stylesheet_uri
To enqueue a stylesheet use this in functions.php
1.we need to register our stylesheet.
2.we should enqueue it.
3.Hook to an action
4.call the function where you want to enqueue it.
function include_css()
{
wp_register_style('main_css',get_template_directory_uri().'/style.css');
wp_enqueue_style('main_css');
}
add_action('wp_enqueue_scripts','include_css');
call,
<?php wp_head();?>
in the place you want to enqueue it.(mostly in header.)
Please add this code in theme's functions.php
function enqueue_scripts() {
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/style.css', array());
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
I am developing one module in prestashop 1.5 . i need to give some designs(css) when my module is accessed by the admin in admin panel.I am new to prestashop.. can anyone help me..
Simply add in hookHeader :
$this->context->controller->addCSS($this->_path.'style.css', 'all');
I hope this help,
Mike
I've found a better way. There's a more specific hook for this: displayBackOfficeHeader.
That ensure your context will be only back office and never front office.
Also, to be sure it will work only in specific circumstances (for example only in the configure page), you can check the url vars.
So, first, in install() add the register function (and be sure to reset the module so the hook will work):
$this->registerHook('displayBackOfficeHeader');
Also add the unregister code in uninstall():
$this->unregisterHook('displayBackOfficeHeader');
Then add the relative function. In this example I'm checking if I'm in the configure page (imagebanner is the name of the module):
public function hookDisplayBackOfficeHeader($params){
if(!(Tools::getValue('controller') == 'AdminModules' && Tools::getValue('configure') == 'imagebanner')){
return;
}
$this->context->controller->addCSS($this->_path.'back-office.css', 'all');
}
Also, take a look to the docs.
Hope it helps!
[EDIT]
I've just found that the code above adds the files at the beginning of the stack, not at the end. That means, for example, BEFORE jquery. It seems there's no way to control the injection order. Anyway, for now, I've found a simple solution: return directly the html code:
public function hookDisplayBackOfficeHeader($params){
if(!(Tools::getValue('controller') == 'AdminModules' && Tools::getValue('configure') == 'homebanners')){
return;
}
$html = '';
$html .= '<link href="'.$this->_path.'back-office.css" rel="stylesheet" type="text/css" media="all" />';
$html .= '<script src="'.$this->_path.'back-office.js" type="text/javascript" ></script>';
return $html;
}
It works because if you take a look to the admin header.tpl, you see that that Hook is in fact placed AFTER the js/css incusion code. So it just works. The addCSS/JS methods instead, work independently, and do not take into account the hook position at all.
im facing the same issue too...
i think the only way is to hack into
[path-to-project]/[admin-path]/themes/default/template/helper/form/form.tpl
and add in block {block name="before"}{/block}
and add this block into your form.tpl into your controller template:
[path-to-project]/[admin-path]/themes/default/template/controllers/[yourcontrollername]/helpers/form/form.tpl
{block name="before"}
<style>
/* your style here */
</style>
{/block}
for more information, you may refer my blog post here:
http://mercstudio-tech.blogspot.com/2013/05/prestashop-form-field-type.html
I am developing a Wordpress plugin to run a certain javascript function based on some parameters.
The first step is to include the javascript file from my server. Easy:
add_action('wp_head', 'my_plugin_head');
function my_plugin_head(){
echo '<script type="text/javascript" src="http://www.my-server.net/js/w.js" ></script>';
}
The second step is to change certain text in the WordPress body to the javascript function...something like:
add_filter('the_content', 'plugin_text_replace');
function plugin_text_replace($text){
$text=preg_replace('blah', 'blah');
return $text;
//I Am still researching how to setup the preg_replace.
//It will look for something like plugin_call[1, 40, 60]
//And Change it To jsFunction(1, 40, 60);
//Bonus for anyone who can help me with that :)
}
In any case, I realized that I want the my-server.net javascript included ONLY if needed (or in other words, only if the preg_replace found a match). This is problematic to me because I can't find anyway to add a script to the <head> tag without using an action on wp_head, which does not have any reference to the body of the text.
How can I add a header ONLY if a certain preg_match is found?
To add javascript the best way is using wp_enqueue_script(), like this:
function my_scripts_method() {
wp_enqueue_script('my_java_function');
}
// For use on the Front end (ie. Theme)
add_action('wp_enqueue_scripts', 'my_scripts_method');
Inserting code into the <body> can be achieved like this:
function wp_body() {
do_action( 'wp_body' );
}
add_action( 'wp_body', 'my_body_function' ) ; //
// In "header.php" place something like this after <body>:
if ( function_exists('wp_body')) wp_body(); ?>
Im trying to get the path to the current theme (which is a sub theme) but I am having issues.
I have seen these 2 sites:
http://venutip.com/content/getting-path-your-subtheme
http://www.website-assistant.co.uk/web-developer/path-subtheme-drupal
Which has led me to this: (as an example)
template.php
function phptemplate_preprocess_node(&$vars) {
global $theme_key;
$path_to_theme = drupal_get_path('theme', $theme_key);
}
?>
page.tpl
<link rel="stylesheet" href="/<?php print $path_to_theme; ?>/css/print.css" media="print" type="text/css" />
But it doesnt work. What am I missing? I am using Drupal 6.19.
A.
In your phptemplate_preprocess_node function, you need to add the $path_to_theme variable to the $vars array:
function phptemplate_preprocess_node(&$vars) {
global $theme_key;
$vars['path_to_theme'] = drupal_get_path('theme', $theme_key);
}
You are also able to add print CSS via the theme's .info file by adding a line like this:
stylesheets[print][] = css/print.css
The advantage of this approach is that your CSS files will be aggregated properly when CSS aggregation is enabled.