I want to add some code in my wordpress theme. I've tested it works here: http://jsfiddle.net/UYMxa/250/
I've tried adding it to my wordpress site, by adding custom links in sidebar widget, and js/css in a header/footer plugin but it doesn't work.
I have then replaced $ to jQuery but still no luck?
$('#affiliateLink').click( function () {
$("#fb_pixel").addClass("fb_conversion");
console.log("click");
});
You have to set click handler after the DOM is ready:
jQuery(document).ready(function(){
jQuery('#affiliateLink').click( function () {
jQuery("#fb_pixel").addClass("fb_conversion");
console.log("click");
});
});
And use jQuery instead of $ because you are in noConflict jQuery mode.
You should use $('').on('click', function() {} structure of you code. Then check if you have added jQuery library properly . It might by also some issue with others jQuery functions so try wrap your code into IFFE
https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
Related
I'm looking for a solution (guess it has to be a wordpress plugin) in order to solve a problem.
I'm publishing lots of sites with WP - some of them have internal links (already inserted via html) to pages which aren't published yet.
My goal is that these links are not "active" from the point of publishing the URL (because then they would result in a 404 since the direction site is not online yet). I'd rather like them to be somehow inactive or deactivated until the "target" of the link is published.
I tried broken link checker but it doesn't work.
Regards
Something like this should work. Ideally you would have some way to change the wrapping class once you know all the links should work so that this happening forever. Replace #content and www.yourdomain.com with the appropriate values. Also I'm assuming that you have jQuery loaded already since this is a wordpress site. Also if you're using ES6 then convert to using let/const and arrow functions if you want.
jQuery(function ($) {
$(document).ready(function() {
$('#content').find('a[href*="www.yourdomain.com"]').each(checkLinkStatus(this));
});
function checkLinkStatus(linkObject) {
var link = $(linkObject).attr('href');
$.ajax({
type: 'HEAD',
url: link,
success: function () {
// page exists
},
error: function () {
$(linkObject).attr('href', '#');
}
});
}
});
I'm trying to edit the WordPress TinyMCE editor so all the links has the target = "_blank". I've tried with jquery to set the 'Open link in new tab' checkbox to be always checked but, no results.
Thank you
You can accomplish this with the default_link_target setting in your TinyMCE configuration: https://www.tinymce.com/docs/plugins/link/#default_link_target
Here is a TinyMCE Fiddle of this in action: http://fiddle.tinymce.com/31faab
To do this in Wordpress you will need to create a simple plugin that modifies this setting as TinyMCE is loaded. It would look something like this:
<?php
add_filter('tiny_mce_before_init', 'add_my_options', 1000);
function add_my_options($opt) {
$opt['default_link_target'] = "_blank";
return $opt; //you must return $opt to not break things
}
?>
If you have never created a WP plugin they are not hard to build and there are plenty of examples on the web.
I've spent a few hours on this but I'm not getting anywhere. I'm just starting on Wordpress, and I'd like a simple page where I click on something (a list item) and a textual description appears in a div somewhere else on the same page.
This would be trivial if I was writing plain HTML and JS, but I can't get my head around how to integrate this into WordPress. As far as I can make out, I have to write a plugin, but I can't find any handlers for mouse events in the hooks API. Or should I just hardcode an onclick into the HTML, and find somewhere to put some JavaScript code to handle it? Any advice appreciated...
Wordpress doesn't have mouse events/hooks. Wordpress hooks apply to the backend only, they are a way to interact with the WP core which is written in PHP (executed on the server, not the client).
Mouse events happen on the client side, so to achieve what you want you should register a Javascript file with wordpress via wp_register_script (http://codex.wordpress.org/Function_Reference/wp_register_script) and add your Javascript behaviour there.
You don't have to write a plugin, just add wp_register_script logic in your functions.php.
Vlad Cazacu is right, we dont have any hooks for javascript events and i am not sure if there is any option in other server side languages as well besides node.js. Anyways you can use jquery in the normal way with registering and enqueing the file. But if you want to have advanced interactivity then there are functions in wordpress that can do that for instance there's this function wp_localize_script, it is used with ajax to grabs the data as a javascript array/object and then converts it into php array/object which is then available to use in wordpress/php.
In short -
Add an id (and a styling class) to whatever you want a handler for
in the HTML
Register handlers in JS, as follows:
function fp_onload_js() {
var id = document.getElementById('myID');
id.addEventListener(
"click",
function() { myEventListener(); },
false);
}
Register/enqueue the file which contains your JS, in functions.php:
add_action('wp_enqueue_scripts', 'theme_enqueue_stuff');
function theme_enqueue_stuff() {
...
wp_enqueue_script(
'myHandle',
get_template_directory_uri() . '/path_to_my_js_file.js');
}
The tricky bit: you have to make sure that the event listener code is run after WordPress has constructed the DOM, after the IDs have been created. You need to run the JS after the page loads (see here). Basically, also in functions.php:
add_action('wp_footer', 'fp_onload_php');
function fp_onload_php() {
?>
<script type="text/javascript">
fp_onload_js();
</script>
<?php
}
And make sure you don't use the 'visual' tab in the WordPress editor - it will mess up your carefully-crafted HTML.
I tried using tinyMCE directly from the package included with:
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
And then I just set this in my jQuery file:
tinymce.init({
selector: "textarea"
});
Now, for some reason that I can't understand, all my textareas are hidden (visibility:hidden) and nothing else is showing up. I am modifying the DOM in this file with jQuery but I tried to insert a non-modified textarea and still nothing shows up. Is there something with Wordpress that makes this error? I am writing this in the functions.php-file.
Or maybe you should simply use wp_editor() php function
http://codex.wordpress.org/Function_Reference/wp_editor
I am trying to use simplemodal to have modal popups with text in wordpress posts. I've played around with various plugins but they have specific uses (such as the contact form, or another one I saw that displays a single note you can customize).
I've tried following this tutorial: http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html but the instructions are not very clear for people without advanced jquery or wordpress knowledge and it simply isn't working for me. The author does not explain where you put the function, for instance.
For anyone who's gotten simplemodal working in wordpress, without developing a plugin, can you please assist? Thank you.
The tutorial is a good start on a solution, but does not quite provide all of the details. There are also some changes that I would make. Here is what I would do to get it working:
Create the Ajax Handler template and page
Make sure the link you want to use to open the modal includes the postpopup class and has the post ID in the rel attribute.
Create a js/ folder in your theme directory
Download SimpleModal 1.4.1 and place the file in the js/ folder
Create a custom JavaScript file (site.js) and place it in the js/ folder
Put the following code in site.js:
.
jQuery(function ($) {
$('a.postpopup').click(function(){
id = this.rel;
$.get('http://yourdomain.com/ajax-handler/?id='+id, function (resp) {
var data = $('<div id="ajax-popup"></div>').append(resp);
// remove modal options if not needed
data.modal({
overlayCss:{backgroundColor:'#000'},
containerCss:{backgroundColor:'#fff', border:'1px solid #ccc'}
});
});
return false;
});
});
Add the following code to your theme's functions.php file:
.
function my_print_scripts() {
if (!is_admin()) {
$url = get_bloginfo('template_url');
wp_enqueue_script('jquery-simplemodal', $url . '/js/jquery.simplemodal.1.4.1.min.js', array('jquery'), '1.4.1', true);
wp_enqueue_script('my_js', $url . '/js/site.js', null, '1.0', true);
}
}
add_action('wp_print_scripts', 'my_print_scripts');
That should get it working for you. Make sure you have the wp_footer() function in your theme's footer. I re-worked the way the modal window was being called so that the auto-centering of the content works.