i'm using a plugin called "w3 total cache" on wordpress that minifies my style.css (which is located in my theme folder). the problem is that in function.php i enqueued the boostrap cdn and style.css correctly like this:
function bootstrap() {
wp_enqueue_style( 'bootstrap-css','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery') );
}
add_action('wp_enqueue_scripts', 'bootstrap');
function maincss() {
wp_enqueue_style( 'maincss', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'maincss');
BUT, whenever my page loads the style.css gets minified right after the head tags and bootstrap stays below overwriting all my rules...
this is the website i'm working on: http://bootstraptest.co.nf
if you move the first stylesheet right after bootstrap you can see the button working and the header getting placed correctly.
In header.php add <!-- W3TC-include-css --> code after wp_head()
Like this:
<?php wp_head(); ?>
<!-- W3TC-include-css -->
</head>
This will cause the mined w3tc file to appear after your bootstrap call
Related
I want to style the WordPress admin area.
For this purpose, I have copied the following code in the function file and started styling it:
function custom_css()
{ echo '<style>
.widefat {
width: 1700px !important;
max-width: 1700px !important;
}
</style>'; }
add_action('admin_head','custom_css');
this way, the function file becomes very crowded, and that's why I want to style it in a separate CSS file; How can I enter the link of my style.css file in the code above?
I have used this code but it did not work:
{ echo include ("/style.css"); }
I found the answer to my question.
The answer is as follows:
function custom_css() {
echo wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), '4.0.0' );
}
add_action('admin_head','custom_css');
Wordpress theme's css files are responsible for the styling and look of the website. They are located in the /wp-content/themes/ directory. The css files are usually named style.css, there are some additional options you can try:
Inside style.css use the #import at-rule to link to another file (if it is hosted externally).
#import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
Edit the header.php theme to link to an external stylesheet.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
In order to link a CSS file in WordPress header, you need to first enqueue the file using wp_enqueue_scripts from functions.php After that, you can then link to it using get_stylesheet_uri
function roofers_wp_resources(){
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_style('name css file', get_template_directory_uri() . 'css file');
}
add_action('wp_enqueue_scripts', 'roofers_wp_resources');
or enqueue file pointing to your external css url
add_action( 'wp_enqueue_scripts', 'register_custom_plugin_styles' );
function register_custom_plugin_styles() {
wp_register_style( 'style', 'CSS URL' );
wp_enqueue_style( 'style' );
}
/* admin_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to be used in the administration panel. Despite the name, it is used for enqueuing both scripts and styles. */
Enqueue a custom stylesheet in the admin
Sometimes you want to load a set of CSS and/or Javascript documents to all admin pages. You can do this from within your plugin or from your themes function file:
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
// get_template_directory_uri() -> Retrieves template directory URI for the active theme.
function wpdocs_enqueue_custom_admin_style() {
// loading css
wp_register_style( 'custom_wp_admin_css', get_template_directory_uri(). '/admin-style.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' ); // Enqueue a style.
// loading js
wp_register_script( 'custom_wp_admin_js', get_template_directory_uri().'/admin-script.js', array('jquery-core'),false, true );
wp_enqueue_script( 'custom_wp_admin_js' ); // Enqueue a script.
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
I am building my first wordpress theme and am trying to enqueue an external style.css file.
The file is located in the theme's main directory.
I have created a functions.php file and have added the following code into:
<?php
function addExternalStuff(){
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts','addExternalStuff');
This is exactly what tutorials and documentation says to add.
I've also used wp_enqueue_style in add_action().
<?php
function addExternalStuff(){
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_style','addExternalStuff');
Nothing happens. The stylesheet is not added to the code. I've added an echo as well at the top of the function, and it is not printed. I have also added an echo at the very top of functions.php, outside the addExternalStuff() function and it prints, meaning this is the correction functions.php file.
After some digging, I learned that I did not include wp_head() in the header of my header.php file. This is how Wordpress adds the stylesheet to the header and enqueue can't without it (also wp_footer in footer.php).
In header.php:
<head>
<?php wp_head() ?>
</head>
In functions.php also used get_template_directory_uri() instead of get_stylesheet_uri() so that I could call a stylesheet with a unique name other than the default style.css.
<?php
function addExternalStuff(){
wp_enqueue_style('style',get_template_directory_uri().'css/new_stylesheet.css');
}
add_action('wp_enqueue_scripts','addExternalStuff');
I am trying to link my stylesheet to another page in Wordpress. The actual Wordpress installation is within a folder, within the actual site. It's set up this way because I only want to use WP for a specific section of the site (it was an afterthought, I know this is isn't necessarily the "correct" way to do things...)
I have the front page set up and the styles are all working fine. But when a create a new page and try to use get_header to pull in the styles, they don't work. The browser is looking for a page called styles.css, not a stylesheet.
I've tried to use "enqueue" in the functions.php file, but it still won't work. I have a copy of my style sheet in the theme folder and also one inside a css folder.
Example of using enqueue for the copy inside the css folder:
wp_enqueue_script( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
*I am using get_header in my page template file, (same header as the front page which is working fine), and it is linked this way:
<link rel="stylesheet" type="text/css" href="../css/styles2.css">
I'm pretty sure the issue is the "../" but when I substitute echo get_stylesheet_directory_uri()....... instead of the ../, it doesn't work as it should.
Any help would be great as I'm newer to WP development.
Thanks everyone
You have to write like this for linking template style sheet ...
wp_enqueue_script( 'styles', get_template_directory_uri(). 'css/styles2.css', array(), '0.0.1' );
Add Style sheet like this:
wp_enqueue_style( 'styles', bloginfo('template_url').'/css/styles2.css' );
You can view more detail at here
You need to hook the css:
If you are using child theme then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_template_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If you are using parent theme (no child theme) then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_stylesheet_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If want to enqueue in admin side then just change hook name "wp_enqueue_scripts" to "admin_enqueue_scripts".
Try now.
You have used wp_enqueue_script() instead of wp_enqueue_style()
wp_enqueue_style used for Enqueue Style
wp_enqueue_script used for Enqueue Script
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
Here is the full example for the same.
add_action( 'wp_enqueue_scripts', 'enqueue_custom_style');
function enqueue_custom_style()
{
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
}
I have created a theme from the static website in wordpress. I want to know the right way to add javascript & style-sheet into the wordpress theme`s file. I have header.php, footer.php and index.php files and other css & javascript files that are linked in header.php.
Thank you in Advance.
Write following code into your theme's function.php file
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
if you want to add js and css in theme/front end than you cac add js and css in your header.php like this.
<script src="<?php echo get_template_directory_uri(); ?>/js/your-js-file.js" type="text/javascript"></script>
For css
<link rel="stylesheet" type = "text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/your-style-sheet.css"/>
Loading the scripts correctly in WordPress is incredibly easy. Below is surely an example code which you would paste inside your plugins file or inside your theme’s functions.php file to properly Load scripts in WordPress.
function wpb_adding_scripts() {
wp_register_script('my_js', plugins_url('jsscript.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_js');
}
add_action('wp_enqueue_scripts', 'wpb_adding_scripts');
for stylesheets
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('mystyle.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action('wp_enqueue_scripts', 'wpb_adding_styles');
I currently have been customising the standard 2013 theme included with Wordpress, making the standard child theme and adding to the bottom of the style.css stylesheet.
This works fine for all of my pages, however there is a case where I need a custom stylesheet 'news.css' for the News page.
I've tried adding the following code into the header.php file, just before the closing tag, to ensure that it's not overruled by other css files.
<?php
if ( is_page( 'news' ) ) { ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/news.css">
<?php } else {
}
?>
The news.css file is in the child theme's root directory, and the url is www.__.com/news/ however I still can't get Wordpress to load this file when on the News page.
What would I need to do to get this stylesheet to load, only for this page?
Thanks in advance.
EDIT: SOLUTION FOUND - The news page (being my posts page) had the .blog class applied to the body tag. Using .blog in the master css file, I can now specifically adjust this page's CSS! Thank goodness!
I see you've already fixed the issue by using a selector in the CSS that make the rules only apply to the page you want them to (in your case the .blog class worked good.
This is pretty much the standard way of doing things these days.
However I just wanted to put this here for reference in case anyone needs it in the future. The function below 'enqueues' the stylesheet and is the correct way of adding additional stylesheets. This function registers and enqueues 2 new stylesheets.
function load_additional_styles() {
wp_register_style( 'second-style', get_template_directory_uri() . '/style2.css' );
wp_enqueue_style ( 'second-style' );
wp_register_style( 'third-style', get_template_directory_uri() . '/style3.css' );
wp_enqueue_style ( 'third-style' );
}
add_action( 'wp_enqueue_scripts', 'load_additional_styles' );
It's also possible to use conditionals within these functions so (using the question above as the example) you could do something like this
function load_additional_styles() {
if ( is_page( 'news' ) ) {
wp_register_style( 'second-style', get_template_directory_uri() . '/style2.css' );
wp_enqueue_style ( 'second-style' );
wp_register_style( 'third-style', get_template_directory_uri() . '/style3.css' );
wp_enqueue_style ( 'third-style' );
}
}
add_action( 'wp_enqueue_scripts', 'load_additional_styles' );
In the above code the stylesheets will only be added when is_page('news') returns true.