I’m building my website on Wordpress + Bootstrap CDN.
I decided to make it on CDN to have no problem with updates in the future plus I read that this way it’s a bit faster.
So the thing is I have a problem with styles.
I imported my local ‘style.css’ to ‘header.php’, but since ‘bootstrap.min.css’ from CDN also has its own parameters I can’t apply some things.
How do I rewrite CDN’s parameters? Or is there a way to edit this exact ‘bootstrap.min.css’ file?
Thanks in advance.
You can simply just use wp_enqueue_style to load those files. Here is an example you can get an idea from.
function enqueue_my_scripts() {
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true); // we need the jquery library for bootsrap js to function
wp_enqueue_script( 'bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_styles() {
wp_enqueue_style( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_my_styles');
and to write the rules just use !important in your style.css file.
When you use wp_enqueue_style, you have the option to take control on where your styles and script be used for further references. Here is an example how to use it.
function my_enqueue_stuff() {
if ( is_page( 'landing-page-template-one' ) ) {
/** Call landing-page-template-one enqueue */
} else {
/** Call regular enqueue */
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );
#TylerH answered my question and it solved my problem.
A better technique would be to include your own CSS file after you include the CDN file, and just write whichever styles you need to this CSS file of yours. That way they will override the problematic styles in your CDN file.
Thank you very much!
Related
I use Elementor to build my website and there are a lot of functionalities that I'm not using but are none the less loaded on every page of my website. So I decided to dequeue the css files I'm not using in my child theme's functions.php and dequeue the css files which I'm only partially using, replacing them with a 'cleaned-up' version of the file.
This is how I wanted to start doing it:
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'new-elementor-frontend-css', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'new-elementor-frontend-css' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
But while the second part of my function adds my new custom css file nicely, the first part removes almost 10 other Elementor's css files along with the one I actually wanted to dequeue.
This is the list of files being dequeued:
custom-frontend.min.css
post-1501.css (this is the css file of the page I was looking at while making these changes)
frontend-legacy.min.css
post-1396.css (some global Elementor's css)
post-3556.css (this one and the 5 below are templates from a plugin I'm using across my website)
post-4473.css
post-5653.css
post-3489.css
post-3464.css
post-3458.css
I'm guessing it has something to do with the handler 'elementor-frontend' not being correct. The custom-frontend.min.css file had the 'elementor-frontend-css' ID in the link tag of the HTML code, so I was guessing the handler from there.
Does anyone know how I can dequeue only the custom-frontend.min.css file?
After that I wanted to dequeue these files as well:
animations.min.css
elementor-icons.min.css
global.css
frontend-legacy.min.css
swiper.min.js
I've been browsing this for a few days and I'm starting to feel lost, so any help will be much appreciated!
You can dequeue the Elementor CSS file with the use of wp_deregister_style and wp_dequeue_style. For this, you need to pass the CSS file handle name. You can use the below code to dequeue the Elementor plugin global.css file.
function dequeue_elementor_global__css() {
wp_dequeue_style('elementor-global');
wp_deregister_style('elementor-global');
}
add_action('wp_print_styles', 'dequeue_elementor_global__css', 9999);
Here elementor-global is the handle name of the global.css file. You can get any file handle name by stylesheet id. For example:
If any stylesheet id is the elementor-global-css then this file handle will be elementor-global
My understanding is that all Elementor frontend styles, e.g. your post-1234.css files, are children of 'elementor-frontend', which means if you unload it, none of them will load.
If you load your new, optimised frontend.min.css files with the same name, then it should work.
e.g.
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'elementor-frontend' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
Also. Can you not just add your custom-frontend.min.css to the relevant location in your Child Theme and it will overwrite the Parent theme version by default?
This seems to work. Tested on a few pages and posts:
add_action( 'elementor/frontend/after_enqueue_styles', function() {
wp_deregister_style( 'elementor-frontend' );
wp_dequeue_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
wp_enqueue_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
} );
I am trying to enqueue an external plain JavaScript file from within my plugin php, to add within my footer of the WP theme. Is this possible?
I've tried the below, but test is failing as no alert is firing...
<?php
/**
Plugin Name: Add Footer JS
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
<script>alert( 'Hi Roy' ); </script> // just a test
<?php
}
So basically; the JS would be at:
http://dev.website.com/wp-content/plugins/mykewlplugin/js/script-support.js
And this PHP, at:
http://dev.website.com/wp-content/plugins/mykewlplugin/support.php
And core plugin PHP/functionality at:
http://dev.website.com/wp-content/plugins/mykewlplugin/mykewlplugin.php
Make sure that your currently active theme is making use of the wp_footer() and wp_head() functions, as those are required to utilize the appropriate action hooks. With that said, you should really properly enqueue your assets. Anybody else working on the project (including your future self) will be appreciative of that!
This involves utilizing the wp_enqueue_scripts hook and the wp_enqueue_script() function (which relies on both the wp_head() and wp_footer functions).
The proper way to do this would be like the following:
add_action( 'wp_enqueue_scripts', 'no_spex_footer_js' );
function no_spex_footer_js(){
wp_enqueue_script( 'no-spex-footer-js', '/path/to/your/file.js', array(), null, true );
}
Note all the passed arguments, in order:
a unique handle
the path to your actual file
an array of dependencies by handle (if you rely on jQuery, change this to array('jquery'), etc.
version of the file. I use filemtime( plugin_dir_path( __FILE__ ) . 'assets/file-name.js' typically.
in_footer - This is the important one, and determines if the file should be loaded into the header or footer.
If you're sure your theme is making use of wp_head() and wp_footer(), and the file isn't working - it means your plugin isn't configured/activated properly, at which point I'd recommend another cursory glance at the Writing A Plugin documentation and the File Header Requirements.
For your specific case, something like this should get you started:
mykewlplugin.php:
<?php
/**
* Plugin Name: My Kewl Plugin
* Description: Does Kewl Things
* Version: 0.1
*/
add_action( 'wp_enqueue_scripts', 'my_kewl_plugin_footer_js' );
function my_kewl_plugin_footer_js(){
wp_enqueue_script( 'my-kewl-plugin-footer', plugins_url( '/js/script-support.js', __FILE__ ), array(), filemtime( plugin_dir_path( __FILE__ ) . 'js/script-support.js', true );
}
?>
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 need to put a styled map on a contact page in WP.
I'd rather not use a plugin as it would be overkill, embedding on the other way won't allow me to customize layers, use placeholders, etc
I coded an example map on a static html page. https://dl.dropboxusercontent.com/u/13823768/map/test.html
How do I get from here to wordpress?
EDIT: I'm working with a child theme so I put this in functions.php (in my child-theme dir)
function enqueue_custom_scripts() {
wp_enqueue_script('google-map-api','https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=it');
wp_enqueue_script('google-map-style', get_stylesheet_directory_uri() . '/js/map.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
?>
Looks ok so far but it needs <body onload="initialize()"> too.
Do you know how I can add the onload to the body tag?
You can accomplish this by creating a custom theme page template: http://codex.wordpress.org/Page_Templates or simply add the #map_canvas element in the "text" view of the WSYWYG content area of the page editor.
The next step is to add all of your map scripts, I would do this by enqueuing the scripts in your theme's functions.php by creating a callback function that is called on the wp_enqueue_scripts action: http://codex.wordpress.org/Function_Reference/wp_enqueue_script.
the function you will add to functions.php would look something like this(replacing the filepaths with your scripts):
/**
* 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' );
I know you mentioned not wanting a plugin for overkill, but a plugin would allow portability of your code and would allow you to switch themes without losing your map code. Adding a plugin and shortcode to render the #map_canvas element would not be much more time than adding the code to functions.php. If your interested in writing a custom plugin, http://codex.wordpress.org/Writing_a_Plugin
I have been looking to figure this out for weeks. How to include a jquery in wordpress... so I have used the wp_enqeue_scripts();
but then I still don't understand it.
so for example I have this jquery slide down code..
$jQuery(document).ready(function() {
$jQuery('#slide').slideDown();
});
now this code works perfectly on my static html code which has the slide ID in it by the way..
so how would i include that slide to my wordpress plugin?
here is my plugin code
<?php
/*
Plugin Name: Jquery Test.
Plugin URI: http://wsplugins.com
Description: A plugin that increases your website traffic by floating facebook, twitter and google + share button. The buttons bounce and move over your page ensuring maximum attention by your visitors.
Author: Ronny Kibet.
Author URI: http://#.com
Version: 1.0
*/
thanks.
You have a couple of options.
Option #1
Paste the code into footer.php (or header.php).
<script>
$(function() {
$jQuery('#slide').slideDown();
});
</script>
This would result in every DOM element with an ID of "slide" to slideDown upon page load.
Option #2
Using WordPress' API, you could create a method in your theme to include a JavaScript file with the code inside . This is more complicated and requires an understanding of WordPress hooks.
I am having this same problem, but I got it to "somewhat" work. First you need to use wp_register_scripts, with the script name, and then do wp_enque_script("scriptname");... I don't understand why this is the way it is, but we just have to deal :-/
you may need to use noConflict, an example would be:
<script type="text/javascript">
var slide=jQuery.noConflict();
slide(function() {
slide('#slide').slideDown();
});
</script>
to enqueue a script in wordpress in a plugin use this:
/**
* Proper way to enqueue scripts
*/
function theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('dependencyScriptThatNeedsToExecuteBeforeMyScriptName','forExample','jquery), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
I was also searching for the same solution but I found it myself.
create a new file custom-functions.js in the js director and past the code that you want to enqueue in that file. Now enqueue it in the functions.php
wp_enqueue_script( 'custom-functions', get_template_directory_uri() . '/js/custom-functions.js', array(), '1.0', true );
read the full tutorial at Bootstrap WordPress Snippets - wp_enqueue_script
function theme_name_scripts() {
wp_enqueue_script( 'script-name', plugins_url( '/js/responsiveslides.min.js' , __FILE__ ), array(),false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );