This is my first time posting so any advice for how I post is much appreciated.
LINK TO SITE: http://rightbraingroup.com/services-new-css-style/
I am running into a problem trying to get this amazing css function to work - modernizr and the css to load in Wordpress. I tried many things like adding scripts to the header, registering and enqueing the modernizr.custom.js file. I also added . And none of these options worked. I am just learning about modernizr and am truly stuck. Any help is appreciated.
Below are the ways to include js and css into Wordpress without using Enqueing (which is the proper way).
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/modernizr.custom.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/component.css" media="screen" />
This is how I registered and Enqued the js file
// script manager template to register and enqueue files
function childtheme_script_manager() {
// wp_register_script template ( $handle, $src, $deps, $ver, $in_footer );
// registers modernizr script, stylesheet local path, no dependency, no version, loads in header
wp_register_script('new_service', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
// enqueue the scripts for use in theme
wp_enqueue_script ('new_service');
}
add_action('wp_enqueue_scripts', 'childtheme_script_manager');
I keep getting a 404 error or "Resource interpreted as Script but transferred with MIME type text/plain" (used plugin to fix but did not help). If anyone can give a little guidance or direction it would be much appreciated. This is also my first time posting so if you need any more info from me please let me know. Thank you for your time.
Your wp_enqueue_scripts code is correct and Modernizr appears to be loading fine on your site. You need to do a similar invocation for adding stylesheets.
function childtheme_script_manager() {
wp_register_script('new_service', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
wp_enqueue_script('new_service');
wp_register_style('my_style', get_template_directory_uri() . '/css/component.css', array(), false, 'screen');
wp_enqueue_style('my_style');
}
Note, I've left the $deps array empty, if the css has dependencies, you may need to specify those names in the array.
Related
When I add the js file by html command, it loads but when I add it by wp command, it doesnt load.
<!-- <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> -->
<?php
wp_register_script( 'foo-stylesa1-slick-jquery', 'https://code.jquery.com/jquery-2.2.0.min.js' );
wp_enqueue_script( 'foo-stylesa1-slick-jquery' );
?>
I use above code snippet in my 2 plugin at the same time.
What is the problem?
You have to use complete register script function, since many times wordpress loads script above jquery and due to this scripts not work.
wp_register_script( 'someScript-js', '/someScript.js' , '', '', true );
Here true is used for loading scripts to the footer section after jquery enqueued.
Or you can directly use jquery enqueue function without loading its from external.
wp_register_script('jquery');
This will directly include jquery for your website.
I am at my wit's end. Of the following two script tags, the first one does not show up in my source code; the second one does. I've tried a number of different ways of presenting it including relative links, the wordpress template URI call, etc, but when the link is VALID it disappears. The same thing happens to my stylesheet. What could possibly cause this? Could it be some sort of security thing?
<script src="https://mywebsite.com/wp-content/themes/aiir-theme/jquery.matchHeight.js" ></script>
<script src="https://mywebsite.com/wp-content/smurf/aiir-theme/jquery.matchHeight.js" ></script>
You shouldn't be "baking in" scripts and styles. Once you get the hang of properly enqueuing your assets, they'll be much easier to load/unload, maintain, manipulate, and otherwise handle - and your future self (and other developers) thank you in advance!
You'll need to make use of the wp_enqueue_scripts Action Hook which uses the wp_enqueue_style() and wp_enqueue_script() functions (which rely on your theme properly utilizing the wp_head() and wp_footer() functions.
add_action( 'wp_enqueue_scripts', 'so_53109688_enqueue_assets' );
function so_53109688_enqueue_assets(){
wp_enqueue_script( 'jquery' ); // Make sure jQuery is loaded
wp_enqueue_script( 'jquery-matchheight', get_stylesheet_directory_uri() . '/jquery.matchHeight.js', array( 'jquery' ), null, true );
wp_enqueue_style( 'jquery-matchheight-styles', get_stylesheet_directory_uri() . '/jquery.matchHeight.css' );
}
I can't attest to why they're disappearing, but if you properly enqueue your assets, they leave a much easier diagnostic trail for bug fixing.
SOLVED!! Someone at the company (not me) installed a plugin that "optimizes" js and css. This was causing it to delete the links from source code; now I can continue with problem solving.
Thanks for the inspiration,
Ric
I'm quite new to WordPress and I'm following a Udemy course on theme development and one part involves using the Google Maps API. When I register/enqueue the script, it doesn't appear in the HTML source code when viewing the page. There are also no errors in the developer console either.
This is a snippet from my functions.php:
wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap', array(''), '', true);
wp_register_script('fluidboxjs', get_template_directory_uri() . '/js/jquery.fluidbox.min.js', array('jquery'), '2.0.5', true);
wp_register_script('script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('googlemaps');
wp_enqueue_script('jquery');
wp_enqueue_script('fluidboxjs');
wp_enqueue_script('script');
}
add_action('wp_enqueue_scripts', 'lapizzeria_styles');
And this is the HTML that is output below the footer (I believe I should be seeing a link to the Google API here):
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-content/themes/lapizzeria/js/jquery.fluidbox.min.js?ver=2.0.5'></script>
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-content/themes/lapizzeria/js/scripts.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-includes/js/wp-embed.min.js?ver=4.7.4'></script>
Interestingly this line does appears in the head when I enqueue googlemaps:
<link rel='dns-prefetch' href='//maps.googleapis.com' />
As a bit of background on the issue:
The first step in the exercise was to place Google's sample code (script & styles) directly into front-page.php and the map displayed fine.
The second step was moving that code out from the front-page.php and placing it in functions.php, scripts.js, and style.css.
Moving the styles to style.css works fine. Moving the initMap() function to scripts.js works fine. But when attempting to enqueue/register the Google Maps API in functions.php it doesn't seem to be adding the <script> for the Maps API under the footer as it does for other enqueued items.
I'm not sure if it makes a difference but I'm working locally and running MAMP. I've tried clearing my browser cache and using a different browser. I've tried changing the order in which it is enqueued.
EDIT:
One thing I have noticed, is that if I put a dependency in for googlemaps it DOES print the <script> tag I'm expecting but brings up this error in the console: initMap is not a function. My understanding is that Google Maps API shouldn't require jQuery to work so I'm not sure if this bit of extra info is relevant.
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap&ver=4.7.4'></script>
Maybe something fishy going on with the #038; appearing in the line above?
Any help would be appreciated!
I suspect the issue is due to the dependency that has been set for googlemaps. Instead of passing in an empty array to specify no dependencies for the script, the array contains a blank string. The dependency can't be satisfied so the script isn't loaded.
Simply replace array('') with array().
wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap', array(), '', true);
I wish to clean my code from duplicate css in my child genesis theme.
Some plugins use the same library with different version like font-awesome.
If you see html code here www.cartomanziadivinazione.it you can see:
<link rel='stylesheet' id='fontawesome-css' href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css?ver=1.3.9' type='text/css' media='all' />
I wish to delete this row and I wrote this in function theme
add_action('wp_enqueue_scripts', 'cleaning_seo');
function cleaning_seo() {
wp_dequeue_style( 'fontawesome-css' );
wp_deregister_style( 'fontawesome-css' );
}
but nothing...
According to codex:
Remove an enqueued script.
To be dequeued, the script must have been enqueued. Attempting to
dequeue a script before the script is enqueued will have no effect.
So, a possibility is you are trying to dequeue the script before it queued.
To make sure that you are using this function in the right place; try increasing the execution order:
add_action('wp_enqueue_scripts', 'cleaning_seo', 999);
Late, but maybe this answer will help others.
The handle has to be fontawesome, not fontawesome-css:
wp_dequeue_style( 'fontawesome' );
wp_deregister_style( 'fontawesome' );
The -css is added to the handle by WordPress (in the case of text/javascript -js is added).
I am trying to get my custom javascript (jQuery) to load correctly in Wordpress.
I know you have to use wp_enqueue_script() to do this correctly. However the problem I have is that the result is not my script, but in the place I should have javascript I have the code for a 404 page !
I've tried two ways of enqueueing the script :
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),1);
just above wp_head()
and :function my_script_load() {
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),null);
}
add_action('init', 'my_script_load');
in functions.php
both methods have the same effect. When I inspect the HTML in firebug I find the script is corredtly referenced :
<script src="http://localhost/wordpress/wp-content/themes/doric2011/javascript/sitescript.js" type="text/javascript">
however when I inspect the script itself I find the following (an extract) :`
Page not found | Nick Kai Nielsen
and so on... It is a HTML output for a 404 page, but occupying a space where javascript should be...
Needless to say the script does not work.
I have only had this problem since updating to 3.1 and it does the same thing if I try loading highslide.js and highslide.config.js (professionally written scripts). The script I wish to load is already working on my site and I want to go on using it in the new theme I am developing.
has anyone any idea of what is happening ? And, of course, what should I do about it ?
This is a local installation - I'm not risking breaking my site until this is sorted out.
Try:
add_action('init', 'my_script_load');
function my_script_load() {
wp_register_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'), true);
wp_enqueue_script('sitescript');
}
Assuming your javascript file is in the proper location (and the URL isn't pointing to a spot where the JS file isn't...) try this:
function add_my_scripts() {
$templatedir = get_bloginfo('template_directory');
if(!is_admin()) {
wp_register_script( 'sitescript', $templatedir . '/javascript/sitescript.js');
wp_enqueue_script( 'sitescript' );
}
}
add_action( 'init', 'add_my_scripts');