I can't enqueue css using a function in WordPress - css

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

Related

Wordpress enqueue style

I've added the following code in functions.php but it doesn't seem to work. What is wrong?
function include_styles(){
wp_enqueue_style ( 'main-style', get_theme_file_uri('/style.css'));
}
add_action('wp_enqueue_scripts', 'include_styles');
I would suggest to use get_template_directory_uri() instead of get_theme_file_uri

functions.php file doesn't work in wordpress

I am creating a theme by myself in wordpress. But suddenly my functions.php file stop to work. I am enqueuing a stylesheet file. First time it worked. But now its not working. whats wrong with it? (I am new in wordpress) My code is
<?php
function get_external_files(){
wp_enqueue_style('style', 'get_stylesheet_uri()');
}
add_action('wp_enqueue_scripts', 'get_external_files');
You've put get_stylesheet_uri() inside quotes '' turning it into a string instead of a function call... This should work:
<?php
function get_external_files(){
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'get_external_files');

Custom title attribute for WordPress stylesheet

How can I add title attribute for my own custom stylesheet in wordpress within functions.php file? I find something like that
`
global $wp_styles;
$wp_styles->add('example-alt', '/themes/example/example-alt.css');
$wp_styles->add_data('example-alt', 'title', 'Example Alternate Stylesheet');
$wp_styles->add_data('example-alt', 'alt', TRUE);
$wp_styles->enqueue(array('example-alt'));
`
but I don't know how can i use it within functions.php file or anywhere else?
I'm not sure if I have understood your question. You want to add a CSS Stylesheet to your blog or an attribute to the title?
If you want to add a CSS Stylesheet within functions.php, you have to enqueue it like this:
If your CSS stylesheet is named "my-style.css", place it on a folderl called "css" withing the folder of your theme, and then write that on functions.php:
function your_theme_name_scripts() {
// For Styles:
wp_enqueue_style( 'my-style', get_template_directory_uri(), '/css/my-style.css' );
// For Scripts:
wp_enqueue_script( 'my-script', get_template_directory_uri(), '/js/my-script.js' );
}
add_action( 'wp_enqueue_scripts', 'your_theme_name_scripts' );
Your find more info about enqueueing styles here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script
If you want to add any attribute to the title, you have two options: creating a filter on functions.php, or directly modifying the wp_title() function on header.php. The second options is the best one.
You find more info about the title here: http://codex.wordpress.org/Function_Reference/wp_title

what to do after registering and enqueing a css file inside a plugin folder to use it

I have been looking for an answer for this in SOF but didn't find a clear answer
I have a plugin that forces pages to be shown when certain conditions are met. but when i try to include css files for styling i get no response .
I tried to include the file using normal html and this was a failure
then tried the wp_register_style and wp_enqueue_style as such:
function rw_add_style(){
$rw_path = plugins_url('kawaleb/style.css');
wp_register_style('testili',plugins_url('kawaleb/style.css'));
wp_enqueue_style( 'testili' );
}
add_action ('wp_enqueue_scripts','rw_add_style');
wp_enqueue_style( 'testili' );
}
I placed this code on the page that should be shown when the conditions are met
What I don't know here is how to procede after enqueing !
do I need to use html to include the stylesheet file ( and then what is the use of enqueing ?) or does it do that by itself (and then what I am missing here ? )
In the doc of codex they dont go further than telling you to register the style then enqueue it !!!
Thank you all :)
You don't need to register the style, you can just enqueue it. Also, you mentioned that you've put the code in the file where you'd like it to display, you should put it in the index file of your plugin, so in /your-plugin/index.php or whatever the main file is called, add this code:
function rw_add_style() {
wp_enqueue_style( 'testili', plugins_url( 'kawaleb/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'rw_add_style' );
If you need it only on a certain page then you should add your conditional within the function, so you could do this for example:
function rw_add_style() {
global $post;
if ( $post->post_name == 'post_name' ) {
wp_enqueue_style( 'testili', plugins_url( 'kawaleb/style.css' ) );
}
}
add_action( 'wp_enqueue_scripts', 'rw_add_style' );
And you can work out what the post name is for the page you need to enqueue it for by temporarily adding the following code to the page template:
global $post;
echo $post->post_name;
To be clear, you don't need to add any html <link> to include the CSS as you're right, there would be no point in enqueuing it then. Just add the enqueue as I described above in the main index file of your plugin and it will be automatically included in the wp_head() in your header and output just before the </head>.
I hope this helps. Good luck. =)

Having issue with WordPress wp_enqueue_style

I am building a full design into WordPress for the first time and I am trying to load in stylesheets and script files but all I seem to be getting is the text output of the location.
What I have is below..
wp_enqueue_style('reset', bloginfo('template_url') . '/reset.css');
wp_enqueue_style('style', bloginfo('stylesheet_url'), array('reset'));
wp_enqueue_style('rhino', bloginfo('template_url') . '/rhinoslider-1.05.css', array('reset','style'));
Do I need to put this inside the link tags or something? I thought it would do it all itself; as what's the point loading it that way if it doesn't do it itself? I know it makes sure the same file isn't included twice or something, but if you have to include the link tags yourself and then WP decides not to include the file then you are left with blank link tags!?
Lastly, should I set these up beforehand so I can just call them via their handles? If so, where? functions.php?
Edit: I also tried putting the below in my themes functions.php file but got the same results.
add_action( 'after_setup_theme', 'mmw_new_theme_setup' );
function mmw_new_theme_setup() {
/* Add theme support for post formats. */
add_theme_support( 'post-formats' );
/* Add theme support for post thumbnails. */
add_theme_support( 'post-thumbnails' );
/* Add theme support for automatic feed links. */
add_theme_support( 'automatic-feed-links' );
/* Add theme support for menus. */
add_theme_support( 'menus' );
/* Load style files on the 'wp_enqueue_scripts' action hook. */
add_action( 'wp_enqueue_scripts', 'mmw_new_load_styles' );
}
function mmw_new_load_styles() {
$foo = bloginfo('template_url') . '/reset.css';
$bar = bloginfo('template_url') . '/rhinoslider-1.05.css';
wp_enqueue_style('reset', $foo);
wp_enqueue_style('style', bloginfo('stylesheet_url'), array('reset'));
wp_enqueue_style('rhino', $bar, array('reset','style'));
}
When storing values in a variable via PHP use:
get_bloginfo()
So your new function would now look like:
function mmw_new_load_styles() {
$foo = get_bloginfo('template_url') . '/reset.css';
$bar = get_bloginfo('template_url') . '/rhinoslider-1.05.css';
wp_enqueue_style('reset', $foo);
wp_enqueue_style('style', bloginfo('stylesheet_url'), array('reset'));
wp_enqueue_style('rhino', $bar, array('reset','style'));
}
And be more semantic! It makes code for beginners easier to look at. ($foo could be $resetCssUrl)
I was having similar issues.
The register / enqueue scripts are so that you can globally assign your functions to load in the correct order. You can call them from the page that your working in but it is considered better practice do it this way.
My template has a functions.php but its nealry empty! It sepreates the scripts into 7 subchapters, theme-options, theme-functions, themes-js, etc. Here is my themes.js.php file but this could quite easily placed in your file inside your wp-content/themes/functions.php My themes-js.php file

Resources