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');
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 want to give my wordpress dashboard custom css styles by using external css file in my theme. This is my code:
<?php
// Custom Dashboard Styles by Loading assets/css/admin.css
function filmview_admin_css() {
echo '<link rel="stylesheet" href="bloginfo('template_directory')/assets/css/admin.css" type="text/css" media="all" />';
}
add_action('admin_head', 'filmview_admin_css');
?>
You can't use bloginfo() and echo at the same time because bloginfo() is already outputting a string.
Anyway, I suggest you to use get_template_directory_uri(), get_theme_file_uri() or get_parent_theme_file_uri() instead because those functions are meant to be used on functions.php for this kind of purposes.
Also, to enqueue styles or scripts, you should use WordPress built in functions like wp_enqueue_style() and hooks like admin_enqueue_scripts:
function filmview_admin_css() {
wp_enqueue_style( 'custom_wp_admin_css', get_template_directory_uri() . '/assets/css/admin.css' );
}
add_action( 'admin_enqueue_scripts', 'filmview_admin_css' );
Please see this thread https://wordpress.stackexchange.com/questions/41207/how-do-i-enqueue-styles-scripts-on-certain-wp-admin-pages.
In general you could use:
function admin_custom_css() {
wp_enqueue_style( 'stylesheet_name', 'stylesheet.css');
}
add_action('admin_init', 'admin_custom_css' );
Don't hardcode things like <link rel="... as it is bad practice and WordPress can do it all for you in a coherent way.
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 want to remove css and js file from a template in WordPress by using wp_dequeue_script and wp_dequeue_style function but my code is not working.
Js File: <script type='text/javascript' src='http://localhost/worpress/wp-content/themes/goliath/theme/assets/js/vendor/jquery.hoverintent.min.js'></script>
Css File: <link rel='stylesheet' id='plsh-bbpress-css' href='http://www.smeadvisor.com/wp-content/themes/goliath/theme/assets/css/bbpress.css' type='text/css' media='all' />
I am using goliath theme and I have added below code in goliath-child theme functions.php file
add_action('wp_print_scripts','example_dequeue_myscript');
function example_dequeue_myscript() {
wp_dequeue_script( 'jquery.hoverintent' );
}
add_action('wp_print_styles','example_dequeue_mystyle');
function example_dequeue_mystyle() {
wp_dequeue_style( 'bbpress' );
}
Please help me in these!
wp_dequeue_script() and wp_dequeue_style() works only if the related CSS and JS files are included in the website by wp_enqueue_script()..
wp_dequeue_script and wp_dequeue_style work by taking the handle as the parameter.
You should have registered as like follows :
wp_register_style('pagination-style', plugins_url('style.css', __FILE__));
wp_enqueue_style('pagination-style');
and script like this :
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
wp_enqueue_script('jquery');
And then use handle for removing css and js as follows:
wp_dequeue_style('pagination-style');
wp_dequeue_script('jquery');
Hope Remove css and js
Try
add_action('wp_enqueue_scripts','example_dequeue_myscript', 30);
function example_dequeue_myscript()
{
wp_dequeue_script('jquery.hoverintent');
wp_dequeue_style('bbpress');
}
You have to enqueue these file in header or footer, not directly write in script or link tag that is proper method and then enqueue your script in condition. like this
add_action('wp_enqueue_scripts','example_dequeue_mystyle');
function example_dequeue_mystyle() {
if(!is_page('my-page-slug')){
wp_enqueue_style( 'bbpress' );
wp_enqueue_script( 'jquery.hoverintent' );
}
}
Hope you got that.
If the files are enqueued (not hardcoded in title) then the problem may be in wrong script/style names. Try to use this in functios.php first:
function remove_head_scripts() {
global $wp_styles;
var_dump($wp_styles);
global $wp_scripts;
var_dump($wp_scripts);
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts', 101 );
Then you can see all of the enqueued styles & scripts with their respective slugs printed somewhere inside your html (try to use ctrl+U in browser). Looking in that lists you can locate your desired script & style & find out it's slugs. If you can't see them, try to play with priority (101) or hook (wp_enqueue_scripts)
After you know exact slugs of your script & style, replace snippet above with new one:
function remove_head_scripts() {
wp_dequeue_style( 'exact_style_slug' );
wp_dequeue_script( 'exact_script_slug' );
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts', 101 );
Again, you can play with priority & hook. It highly depends on where your theme/plugin is enqueueing that script & style.
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