This here is the most recent article, but you can browse all other sections below.
Thursday, March 10, 2011
Current or Active Navigation Highlighting in new WordPress Nav Menu
I have fallen in absolute love with the WordPress 3.0x dynamic menu options. This has given WordPress another leverage in being the superior content management system.
I am currently working on a project using WordPress as the Content Management System. One of the requirements for this project was utmost flexibility of the system. Making the navigation easy to customize by the client meant activating the new wp_nav_menu(). For function/API reference, you can check http://codex.wordpress.org/Function_Reference/wp_nav_menu
Not until I got my hand dirty in the WordPress theming process did I realize that there was no room for assigning active classes on the codes dynamically. During my research I have come up with two solutions…at least till the WordPress team add support to this feature.
The first technique is to give your <body> an ID with the name of your current webpage, then using CSS to select the menu element.
Let me explain in ‘english’. Let’s say your is http://yourpage.com/about, you can give your <body> an ID of ‘about’. So it would look like this: <body id = “about”>
How would you do that dynamically?
In your header.php file, add this:
What this does eventually is removes everything from your URL save your ‘page name’. So http://yourwebsite.com/about.php will return ‘about’.
Next, in your CSS you can select the particular element:
body#about ul#extra-nav li.history a{ our_css_property: xxxx; }
Basically, what this does is it selects the anchor in the list item with a class called history under the ul with an ID of extra-nav that particularly belongs to the body tag called about. It then gives it property.
I got this idea from watching a CSS-tricks video. You may find it really explanatory.
Other Alternatives
There are actually many approaches to this. I guess it depends on your choice. I have also found these
- Andrew Turn’s jQuery for Active State navigation
- StackOverFlow: Handling active state in jQuery
- jQuery Active Menu Plugin
Thursday, March 03, 2011
Fun with Cron Jobs:using WordPress’ Cron function …for mischief
Here is the situation: You want to piss off someone at work. The day before, he was sending you tasks just when you were packing up your things to go home. You couldn’t think of anything else to do but send 3,000 emails to him with one sentence “Choose a better time!”
Here’s another situation: You want to send the special ‘her’ a message in an email every hour.
You can either type your message and click send every time you want to send the emails or you can employ Cron Jobs.
I have been working on a pet project for quite a while. It utilizes Cron Jobs. Not having a dedicated linux server to practice on, I went to unearth some of WordPress’ scripts where they make use of Cron Jobs and I can tell you right here how to use WordPress’ built-in functions to create scheduled tasks.
- So first you need to have a WordPress installation that is live on a web server.
- Next, create functions.php (if it hasn’t been created) in your current theme’s directory.
- Place the code below in the file.
add_action('my_hourly_event', 'do_this_hourly');
function my_activation() {
if ( !wp_next_scheduled( 'my_hourly_event' ) ) {
wp_schedule_event(time(), 'hourly', 'my_hourly_event')
}
}
add_action('wp', 'my_activation');
function do_this_hourly() {
// this is what you do hourly
mail($to, $subject, $message); //you define your $to, $subject and $message variables yourself. Or you could just put in your own code.
}
So basically we have three functions used here. do_this_hourly() is a self created function. This is the function you want running every hour. my_activation() is a self created hook which you will use to add an action hook.
So here we go. Go ye disciples and do likewise.
This post is powered by Cron. I typed this days ago!
Tuesday, January 18, 2011
Anatomy Of A WordPress Theme
You may want to know this: I am a WordPress enthusiast. I stay up all night coding in WordPress or building new plugins for clients. I love wordpress because of the ease of customization of themes and plugins. In fact, almost all websites I design come with a back-end powered by WordPress.
WordPress started out as a blogging platform through wordpress.com and then, it evolved to being a standalone downloadable software that could be plugged into your design to make a highly customizable Content Management System.
I have had to train loads of people on how to integrate websites with WordPress. I thought this diagram will help others/newbies to understand how WP works.
Remi, I challenge you!
Tuesday, December 21, 2010
How to solve ‘NextGen Gallery Effect not working’ issues
Creating themes from scratch with WordPress is very interesting. But hitting a bug especially when it comes to third-party applications can be very frustrating.
One of the frustrating things for me has been integrating NextGen Gallery plugin to my WordPress themes that are built from scratch. Many times, I end up creating my own custom jQuery slideshows/ galleries; but as you know, NextGen is the best plugin for picture albums for WordPress.
Of course, if you know how to put your WordPress header filter hooks like the wp_header(); using do_action(‘wp_head’); you may be able to get away with this fine.
This is a quick rough escape to getting your gallery right:
- Be sure to install NextGen gallery
- Confirm that wp-content/gallery/folder exists.
- Check your header.php file( or wherever your header tags are located) for the code below. If they don’t exist, copy and paste this and don’t forget to replace ‘yourdomain.com’ with the location of your website.
Special thanks toThe sCube
Saturday, November 06, 2010
Add a Copyright Notice to Copied Text in WordPress
Hey y’all!!!
I recently stumbled on a tutorial from Bavotasan, a website filled with lots of articles and resources for web developers. One of the latest was “Add a Copyright Notice to Copied Text”. I found that resourceful as I’d like to add that to my blog so that anyone who copies text from my blog will see my copyright notice. A couple of Lyrics’ websites use this technique also.
You could try copying any text from this website. Then paste it in your text editor. See what is written.
This blog is powered by WordPress and so one of the quickest ways to do this seemlessly is to create a plugin for this function or just add the codes (that we will see) to your theme’s functions.php file.
Briefly, here is what you need to know and what you we will be needing:
- You will need to take a look at Bavotasan’s code
- We will be examining the wp_head WordPress hook. Read more about it here.
C. Bavota, specifies that the code needed which is javascript by the way, needs to be put in the <head></head> tags of your web page or in this case, your wordpress header.
I will run through a brief explanation of his codes and then we jump right at how to integrate it with WordPress.
We create a function in javascript called addLink.
addLink has a couple of variables defined. They are:
- body_element: Body element uses DOM and specifies ‘anything in the body section of your page’.
- selection: Is the variable definition of what we select from our page.Assigned to it on the next line is window.getSelection(). This function holds what we select.
- pagelink: This is the link we want our copy and pasters will see that refers them both to the particular webpage that the user copies from and then the copyright information and owner of the text.
- copytext: This is the final copied content comprising of ’selection and pagelink’
- newdiv: Is the html of what our copied text will be.
Very simple and straight forward script actually. The script is ended by calling the document.oncopy DOM function. This is assigned a value of our javascript function: addLink();
Next on, adding this to WordPress. Remember we are meant to put this code in between our
tags. This is easily accomplished by using the wp_head WordPress action hook.So first, you create a function, naming it what ever name you want. In my case, I named it copyrightpaster.
We will pass the javascript file into the function and echo it.
Next, we …hook the script using this filter thankfully provided by wordpress. You do that by typing ‘add_action(‘wp_head’,'copyrightpaster’);‘
There we go! Copy and paste your code in your theme’s functions.php file and you are good to go!
Here is the final code:
function copyrightpaster(){
$output = '';
echo $output;
}
add_action('wp_head','copyrightpaster');
Thanks for reading. And don’t forget to also check related articles with Bovatasan.










