Blog | Adrian Tomic

Wordpress: Edit link highlight with jQuery

This is a simple jQuery script that you can use for your WordPress theme. I use it on a theme I made for a client. It makes it easier to see what they are editing when they mover the house over the edit-button.

Anyway, here’s the script:

$("a.post-edit-link").hover(
	  function () {
	  $(this).parents(".hentry").css("background", "yellow");
		},
	  function () {
	  $(this).parents(".hentry").css("background", "none");
	  }
	);

It will highligt the parent div (.hentry) when doing a mouse over of the edit-post link.

By Adrian Tomic on July 15th, 2010.
No Comments.

How to add jQuery to WordPress + jQuery plugin

Adding jQuery functionality to a WordPress theme is pretty easy. But there are a few things you need to do to make it right. This is a tutorial describing how to activate jQuery (since it’s already built into WordPress) and later adding a jQuery plugin.

Start by going into your header.php file in your theme directory.

Add the code BEFORE the <?php wp_head(); ?> function.

That’s it. Now let’s try if it works. Create a directory in your theme directory called “js” (short for javascript). In the js directory, create a file called myscript.js. The myscript.js file will contain all the scripts. In the file myscript.js copy and pase the code below.

jQuery(document).ready(function($) { // When the document (page) has finished loading.
 
alert("jQuery is working!"); // Shows a window displaying "jQuery is working!"
 
});

Save the file and go to your site. You should see a window displaying the text “jQuery is working!”

The third step is adding a jQuery plugin. There are a lot of plugins for jQuery out there. I’ve decided to use the jQuery Cycle plugin. jQuery Cycle will cycle through images or div containers. Take a look at the examples on the site of the plugin.

The first thing you should do is to download the jQuery Cycle files. You can find them here. Place the files in your “js” folder.

You now need to notify WordPress about the new jQuery plugin files. You do that by using the wp_enqueue_script (same as the jQuery code). Place the code BEFORE
the <?php wp_head(); ?> function and the <?php wp_enqueue_script(“jquery”); ?>. Like this:

<?php wp_enqueue_script('myscript', '/wp-content/themes/yourtheme/js/myscript.js'); ?>

In your myscript.js add the jQuery cycle code. In this example the contents of your myscript.js should look like this after you have copy and pasted one of the examples from the jQuery cycle page.

jQuery(document).ready(function($) { // When the document (page) has finished loading.
 
$('#s1').cycle('fade'); //jQuery cycle code.
 
});

I hope I made myself clear in this tutorial. If you have any questions or like this tutorial, please make a comment below

By Adrian Tomic on May 6th, 2010.
No Comments.

jQuery LocalScroll Tutorial

This is originally a post that was on my Tumblr blog. Since I just redesigned my portofolio and incorporated my blog into it I now repost the tutorial here. If you (for some reason) like the Tumblr post better, you can find it here.

Another note: I accidentally deleted the demo files If you can’t get the code to work from the tutorial, please comment and I’ll try to find the time to recreate the demo files.

I´m writing this small tutorial since I found it a bit tricky to implement the jQuery plugin LocalScroll.

This tutorial will help you add the nice scrolling effect that you can see on my portfolio to your own site. Go to my portfolio and try clicking on “Contact Me” on my portfolio and you´ll understand what I´m talking about.

Step one:
Download jQuery, LocalScroll and ScrollTo. jQuery is the base code. LocalScroll and ScrollTo are plugins that you can use with jQuery.

jQuery
http://jquery.com/

LocalScroll & ScrollTo (scroll to the bottom of the page for downloads)
http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

You´ll also need to setup a menu and have <div> tags with a unique id. For example: A link in the menu to a <div> with the id “#aboutMe”. If you don´t know what I´m talking about, you can view or download the example files i made.

Step 2:
When you have downloaded the files you should put them in a folder called “js” (short for java script). You don´t have to, but it´s good to keep things organized Make sure the js folder is in the same folder as your index.html.

These are the files you should have in your js folder (the version numbers may differ though).
jquery-1.3.1.min.js
jquery.localscroll-1.2.6-min.js
jquery.scrollTo-1.4.0-min.js

Step 3:
Now when you have all the files you need, you just have to put some code in your html file.

Let´s start with importing the .js files. Put these lines of code in the <head> tag of your html file.

<script type=”text/javascript” src=”js/jquery-1.3.1.min.js”></script>
<script type=”text/javascript” src=”js/jquery.localscroll-1.2.6-min.js”></script>
<script type=”text/javascript” src=”js/jquery.scrollTo-1.4.0-min.js”></script>

And then copy and paste this below too (also in your <head> tag).

<script type=”text/javascript”>
$(document).ready(function () {
$.localScroll();
});
</script>

What we just did was to first import the .js files. And then implement the localScroll and scrollTo plugin so it starts when the site is loaded.

The code below adds a smooth scrolling effect to all your anchor links on the page.
$.localScroll();

Step 4:
Click and enjoy the super smooth scrolling

By Adrian Tomic on May 5th, 2010.
No Comments.