importing jquery into wordpress - wordpress

Can you import jquery into wordpress when you're not using <?php wp_head(); ?>
i'm just beginning with wordpress and didnt include that in my theme, when i add it now it meses some things up and since i only have to add 1 more thing with jquery i dont want to do the hassle of fixing those things, so i just need to add jquery without the the tag. Any ideas?

You can manually add jQuery from the Google CDN like this in header.php, above an other calls to jQuery libraries:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
But realize that not using wp_head in your theme means you will need to manually add links to JS and CSS files for most plugins, as they hook into WP via wp_head and sometimes get_footer, too.
If things don't work right, use Firebug with Firefox to determine what JS is loading and if there are conflicts and errors.

Use the wp_enqueue_script() function. It's best to use this and let wordpress worry about including the jquery scripts so that you don't end up having the themes/plugins/whatever each including their own versions.
http://codex.wordpress.org/Function_Reference/wp_enqueue_script

i'm just beginning with wordpress and didnt include that in my theme, when i add it now it meses some things up and since i only have to add 1 more thing with jquery i dont want to do the hassle of fixing those things, so i just need to add jquery without the the tag. Any ideas?
I would highly recommend that you keep <?php wp_head(); ?> not having wp_head will cause more problems down the road. For example, your friend will not be able to use most plugins.
If you want to use Googles jQuery you just need to de register WordPress's jQuery:
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2');
wp_enqueue_script('jquery');
}

Related

Using Timber with the updated Calendar designs in The Events Calendar Plugin

I'm using the events calendar plugin for Wordpress with a Timber based theme. I'm currently using a previously documented method to integrate which is here:
https://theeventscalendar.com/support/forums/topic/events-pages-not-showing-up-in-timber-based-theme/
Since v5 of the plugin there is an option [set to default too] which uses the updated calendar and event designs that breaks my current integration method. I've tried to update my template PHP files but with little success.
The legacy functions which are relatively simple to call using the function() method in Timber are:
<?php tribe_events_before_html(); ?>
<?php tribe_get_view(); ?>
<?php tribe_events_after_html(); ?>
https://timber.github.io/docs/guides/functions/
However in the v2 templates added to The Events Calendar in v5 they are calling a class, e.g:
use Tribe\Events\Views\V2\Template_Bootstrap;
get_header();
echo tribe( Template_Bootstrap::class )->get_view_html();
get_footer();
The main problem I have is that I'm unsure how to expose this class to the Timber context. If anyone could give me a steer it would be much appreciated. What I have now works fine but the tribe_get_view function is deprecated and considered legacy so is not going to be around for ever so I need to come up with some sort of solution.
Thanks!
Right so the method I posted is no longer require at all and neither is a work around. Just make sure you have a page-plugin.twig template available. Hopefully this will help anyone else who ends up in a bit of a rabbit hole.....
To clarify, there is a workaround in timber/starter-theme, which involves multiple files, including a 'page-plugin.twig' template. Don't just add a 'page-plugin.twig' template and expect that to fix it.
Third party plugins that hijack the theme will call wp_head() to get
the header template. We use this to start our output buffer and render
into the view/page-plugin.twig template in footer.php
Go here https://github.com/timber/starter-theme.
Copy the header.php, footer.php, and page-plugin.twig into your theme and customize for your own site.
The method documented here: https://mcintosh.io/using-the-events-calendar-plugin-with-timber-and-twig/
Worked for me. You create a default template file and a matching twig template:
[your theme]/tribe/events/v2/default-template.php
[your theme]/[your twig template directory]/events.twig
The default-template.php file contains this line:
$context['tribe_markup'] = tribe( Template_Bootstrap::class )->get_view_html();
Which can be rendered like this in the events.twig template:
<div class="events-container">
{{tribe_markup}}
</div>
Note that you will need to have to select "Enable updated designs for all calendar views" in events > settings > display
I think the div.events-container may be needed for the default stylesheets, but haven't tested otherwise.

WordPress Template "X": Change html inside of <head>

I'm pretty new to WordPress and want to remove some unneeded js/css files that are loaded inside of the html-head of the page.
In wp-content/themes/x/framework/views/header/base.php I found the following code:
<head>
<?php wp_head(); ?>
</head>
This obviously doesn't help me at all. I have no idea what WordPress' "wp_head()"-function does next. Isn't there some simple file where I can just write/edit simple HTML for the "head" somewhere?
wp_head() is a function that fires the wp_head action hook. Wordpress is built on action hooks and filters, which means that not only can plugins and themes add things to your setup through these hooks, but you have the ability to remove things as well. Most of this is done programmatically (in PHP) instead of there just being an html template, although that's not always the case... but it IS the case in your case.
Scripts and styles, for the most part, are enqueued through the wp_enqueue_scripts action hook. You'll want to perform your script removals here.
The problem is, you'll have to know the name the script was registered as before you can remove it. For instance, jQuery is registered as 'jquery'. Pretty simple, right? However, not all scripts are going to be that simple, and you'll have to browse through the code to find the registered handles (names) for those scripts. Styles are a bit easier, as when you inspect your page in the browser, styles will have an id attribute set to 'example-style-css'. Wordpress appends the '-css' to registered and enqueued styles, so the name of your style is actually 'example-style'.
In your theme's functions.php, you can dequeue scripts and styles so they won't be included on your page like so:
function stack_46669800_dequeue(){
wp_dequeue_script('the-script-you-want-to-remove');
wp_dequeue_style('the-style-you-want-to-remove');
}
add_action('wp_enqueue_scripts','stack_46669800_dequeue',100);
(Notice the 100 in the add_action function here... This is the 'priority', or the order in which all added actions are fired. Most are at 10, so I changed the priority here to 100 so this would be fired presumably later than whatever is enqueueing your unwanted scripts. You can't dequeue something that hasn't been enqueued yet.)

enque jquery scripts in wordpress plugin

I can't get any enqueue_script to work, here is my code (which is in my plugin file)
function load_custom_wp_admin_style() {
wp_enqueue_script( 'jquery-ui-datepicker', '', array('jquery'));
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
Where am i going wrong? I can't seem to load my own scripts either
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');
I am now getting jquery-ui script loaded, but the datepicker script is not being loaded
jquery-ui-datepicker is bundled with WordPress (recent versions) so you don't need to tell it anything more than the script handle.
wp_enqueue_script('jquery-ui-datepicker');
But: "can't get it to work" means what exactly? Have you looked in the page source and not found the script being loaded? Or it loads, but has no CSS styling it? I suspect your problem is the latter, because you aren't enqueuing any CSS for the datepicker (above, at least).
Now, the problem is that WordPress doesn't actually bundle in any supporting CSS for the datepicker, since WordPress itself doesn't use it. So, you need to either:
add some supporting CSS to your admin stylesheets
enqueue a compatible standard jquery-ui theme, e.g. from a CDN
For the latter, I blogged about that a while ago; here's some code that should handle that for you; add it to your function, above.
global $wp_scripts;
// get registered script object for jquery-ui
$ui = $wp_scripts->query('jquery-ui-core');
// tell WordPress to load the Smoothness theme from Google CDN
$url = "https://ajax.googleapis.com/ajax/libs/jqueryui/{$ui>ver}/themes/smoothness/jquery.ui.all.css";
wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
That loads the whole enchilada, but you might want to pare it back to just the CSS that the datepicker needs.
Edit: to get the datepicker script on an older version of WordPress which doesn't bundle the datepicker script with the other jquery-ui scripts, the easiest solution is to install Use Google Libraries. This plugin will replace the local jquery scripts with Google's CDN hosted versions, and all jquery-ui scripts will be downloaded as a single (well-cached!) script.

Bullet proof way to avoid jquery conflicts on wordpress plugins

I have been developing wordpress plugins for a while now and i always seem to get the following issues with all my plugins Jquery conflicts issues.
I have tried so many different ways to avoid these but i always get users contacting me saying when they have installed one off my plugins it has stopped another plugin from working aahhhhh.
I really want to get this sorted because i understand how frustrating this can be for people.
I always set and option or include wordpresses jquery, below is just an example not working code.
add_action( 'init', array( $this, 'include_jquery' ) );
function include_jquery(){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1');
wp_enqueue_script('jquery');
}
Ok so after issues with this i now have a select option in the plugin admin to toggle yes or no to include jquery or not i know it is automatically installed but some users remove this, this works for some people but not all.
if you include the wordpress jquery i know you have to run your jquery with the following.
jQuery(document).ready(function ($) {
jQuery instead of the dollar sign $
i understand and have used jquery no conflict and tried and tested some if not all off these
http://api.jquery.com/jQuery.noConflict/
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
This as with the others works for some but not all users with conflicts arising still with certain users.
I am hoping that from this post some of us wordpress plugin developers could help out and post a bullet proof way to use wordpress and jquery within our plugins without getting conflict issues.
Thanks
Doesn't it work with a closure?
(function($){
// your plugin code
})(jQuery);
Read these parts of the codex :
Load a default WordPress script from a non-default location
jQuery noConflict wrappers
You should use wp_enqueue_scripts hook instead of init.
And you should use jQuery.noConflict(); instead of $.noConflict();.

jQuery Gallery is not working in WordPress

Even though, I used same code for both of them http://bda.ctuproject.com/ is not showing tip image. When you go over any item in http://bda.ctuproject.com/wp-content/themes/twentyten/exam/index.html you will see that box will come up saying what is that picture but it's not doing it when I put it in WordPress. Why any ideas ?
http://bda.ctuproject.com
http://bda.ctuproject.com/wp-content/themes/twentyten/exam/index.html
i think you're calling the jquery script twice
As #Colby said, you are loading jQuery twice. Try putting this into your active theme's functions.php file to deregister the WP jQuery load:
if( !is_admin()){
wp_deregister_script('jquery');
}

Resources