I am trying to modify the starter WordPress theme BST for a personal project.
In it I want to have a custom page template with bootstrap elements. This page will show various images in the form of galleries.
I also need to import the baguetteBox.js plugin so that I can use its lightbox effect.
The pages have been created in html and they work. The custom page template is created and the design is the same as the html variant.
However when importing the scripts in WordPress (by using wp enque and wp register) the console cannot define baguetteBox. So I guess I am doing something wrong.
Here is the official guide on installing this Bootstrap plugin:
The enqueue code that I am using is placed in the bst-master/function/enqueues.php file:
For baguetteBox.min.js:
wp_register_script('baguetteBox-js', get_template_directory_uri() . '/js/baguetteBox.min.js', false, null, true, array('jquery'));
wp_enqueue_script('baguetteBox-js');
I have also tried without array('jquery') - no changes. I am also not sure where/how to place the "async" part (as recommended by the developers).
For baguetteBox.min.css:
wp_register_style('baguetteBox-css', get_template_directory_uri() . '/css/baguetteBox.min.css', false, null);
wp_enqueue_style('baguetteBox-css');
The problem is with the <script>baguetteBox.run('.tz-gallery', {filter: /.angelov.+\.(gif|jpe?g|png|webp)/i});</script> which I cannot figure out how and where to place so I just tried to add it inside the page template php file and also in the Insert Headers/Footers plugin.
So I figured out my own solution. First of all the classic (and recommended) way of adding scripts for WordPress was failing somehow. So I decided to place the script in the header.php file before the closing head tag and without async. I also moved the script in the js folder of the child theme.
It looks like this:
<script src="<?php echo get_stylesheet_directory_uri();?>/js/baguetteBox.min.js"> </script>
Next I placed the below code in the custom page template file right after the final closing <div> tag:
<script>baguetteBox.run('.tz-gallery', {filter:/.angelov.+\.(gif|jpe?g|png|webp)/i});</script>
And it all worked out like a charm.
Related
I have a wordpress site that used the toivo-lite theme and was able to load a custom javascript by editing the header.php under the toivo-lite theme folder, and then invoking the JS function through the body onload in that header.php file. This worked like a charm.
Now this wordpress site has switched over to the biz-news theme, which in itself uses the agency-starter theme fwiu. I edited the header.php under the biz-news theme folder the same way I did for the toivo-lite theme, but it did not work. I also tried editing the header.php file under the agency-starter theme folder, but that did not work too.
I looked at the generated page but can not figure out what template / php file is being used in order to add my custom JS code. Any ideas?
Here are plugins that helps you
Insert Headers and Footers by WPBeginner this plugin allow to add script or html code insert after body
Show Current Template this plugin show all template file load on current page
sorry if this is a basic question but I'm having trouble figuring out how to use a Javascript/jQuery script in my website. (If this is well documented and I just don't know the right terms, please share what to look for - I've had no luck yet online with what I know.)
I'd already designed a site with static pages, it just didn't have a blog. So I put Wordpress in for one of the pages, and figured out how to add in the HTML/CSS design for my existing site's menu using the header.php and footer.php files. However, my jQuery script that's supposed to load when the page is resized in order to change the menu design is not working.
I pasted the <script type="text/javascript" src="jquery.min.js"></script> code in the <head> part of the file, adjusted the body tag to <body onresize="myFunction()" <?php body_class(); ?>>, and added the "myFunction" script to the footer.php file, above the </body> tag. Above function myFunction() { I also have window.onload=myFunction(); which isn't working either - so no matter what size the page is loaded at or what size it's changed to the menu is unresponsive.
When I tried adding an enqueue code block to the functions.php file it broke the page entirely, giving a 500 error.
Any advice would be hugely appreciated!
Check that the path you specify to the jQuery library is correct. In your script tag src="jquery.min.js is a relative path. This means that the file jquery.min.js is in the same directory as your html/php/template according to your src path.
I would recommend using a CDN. You won't have a relative path, need to load your jquery files, and you'll benefit from browser caching if other pages/sites have loaded the same files.
3x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
2x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
When you add resources such as scrips and style sheets to WordPress you should enqueue them using the functions wp_enqueue_script() and wp_enqueue_style().
Doing this ensures that your scirpt/style is only included once, allows you to declare dependancies, and (in the case of scripts) allows you to add it to the footer should you require/desire.
You can find more information on these functions in the Codex -
wp_enqueue_script()
wp_enqueue_style()
In conjunction with these functions, you should use the wp_enqueue_scripts action, ensuring that your scripts styles get enqueued at the correct time.
So for example, you should place something similar to this in your functions.php file. Because jQuery already exists within WP, you don't even need to specify a location, you just tell WP that you want to enqueue it -
add_action( 'wp_enqueue_scripts', 'my_enqueue_jquery' );
function my_enqueue_jquery(){
wp_enqueue_script( 'jquery' );
}
I am helping a friend build a wordpress site using a purchased custom theme as his parent theme. There is also a child theme.
I've written some javascript to listen for clicks on specific links, and to change CSS in response to them. I can make this work in another environment, but we're trying to figure out how to get it to execute in Wordpress.
We have tried putting it in the index.php (most logical source to me, since that's to me that makes the most sense, but obviously WordPress works differently).
So all I am trying to figure out is, where in wordpress do you put the script tag (where you put code, not referencing jQuery we already have that)?
the index.php script will only load the WordPress framework and run it, you need to add your js code in the theme/template files.
a little quote from the official word press site:
JavaScript in Template Files
The safe and recommended method of adding
JavaScript to a WordPress generated page, and WordPress Theme or
Plugin, is by using wp_enqueue_script(). This function includes the
script if it hasn't already been included, and safely handles
dependencies.
you can read more here
In my opinion, the best is that you should create a js file with the code you want to run and upload to your theme/template folder, and then add it with a script tag as the link i've provided explains.
And my advice is to not embed the code directly in the template file but load it from a javascript file.
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/pathto/yourscript.js"></script>
You can do that in different ways:
Including the script in your footer for example
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/pathto/yourscript.js"></script>
Or using the wp_enqueue_script function, more info.
I am trying to hook up my custom theme created on Bootstrap 3 and installed onto the latest version of WordPress -working fine but there's an issue with it not being able to hook up to the Jquery library or my JS files.
I have usually been able to achieve this by doing:
<script src = "<?php echo get_template_directory_uri(); ?>/js/bootstrap.js"></script>
But it is just failing on me altogether.
So I have WordPress on the root of the Dir with my files sitting in the theme folder as expected. Short of ideas now :/
Side note: I have tried placing these into both header and footer files and also injecting the JavaScript straight into the HTML but nothing...
The recommended way to include both, jQuery and bootstrap.js would be a function in your functions.php.
function load_styles_and_scripts(){
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-scripts', get_template_directory_uri().'/js/bootstrap.min.js');
}
and then calling it at the end of the file
add_action('wp_enqueue_scripts', 'load_styles_and_scripts');
this way, you load the jQuery file which already comes with wordpress. As the call to enqueuing bootstrap.js comes after jQuery, this should work. You can also add dependecies in the add_action-call. This allows you to make sure, that dependencies are loaded in the right order.
For further information, have a look at http://codex.wordpress.org/Function_Reference/wp_enqueue_script
I am in need of help!
Can someone PLEASE walk me through the specifics, from start to finish, on how to add a jquery plugin script to my wordpress site?
I'm new to Jquery and I have searched the web for the last week. I've tried it myself several times and its just not working. I've asked for help on other forums and I haven't received any answers. Is this something fairly simple to do?
Just to let you know, I am in need step by step instructions. It's just that when I ask questions about this on forums, people are giving me answers and assuming that I already know certain things...I am a beginner with jquery and I need help with each step of the process of adding a jquery script, from start to finish.
The script I want to add is here:
http://tympanus.net/codrops/2010/03/09/a-fresh-bottom-slide-out-menu-with-jquery/
I want to add it on my homepage in the theme I'm using.
1) How do I call the jquery (wp_enqueue_script)
2) Where do I place this (above)
3) CSS - do I simply append the css from the script to my style.css file?
4) How do I call the script to action on the wordpress page?
5) How do I incorporate the html?
These are some of the questions that I have. I've been searching all over the net and usually people assume that people know how to incorporate javascript libraries into their themes....well some of us beginners need help :-)
Any assistance is appreciated!
Thanks!!!
~T
The slide-out menu you linked to consists of images, a stylesheet, a minified version of the jQuery library and and index.html containing the javascript of the menu.
The jQuery included in the archive you downloaded is not neccessary, as jQuery is by default included in wordpress. If you want to add the newest minified jQuery to WP do it from the google libraries in your functions.php like so:
function jq_load_from_google() {
if (!is_admin()) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
}
add_action('init', 'jq_load_from_google');
You could append the css to your existing stylesheet or (as in the following example) add it to the theme separately. Rename the stylesheet to menu.css (or the like), place the images and stylesheet in your themes /css and /images folders and add the following to your theme's header.php before wp_head() and after your main stylesheet:
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/menu.css" type="text/css" />
Add the javascript (the second script that contains code, not the jQuery line) included in the downloaded index.html to your theme's header.php after wp_head().
Change the all occurences #menu in the js to your wordpress menu's ul's ID.
See the WP docs for details and examples: http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Use Firebug to look for errors and conflicts: http://getfirebug.com/