Tag Archives: wordpress

Wordrpess Importer hangs with sealed lips

Today I tried to import some content from another wordpress installation to mine. First off – I imported the XML file into my staging DB, and it all went well. Then I went on and tried to import it on the live server. At hitting the button – the page reloads for a while, and then – nothing.
I tried it a couple of times with no avail.
First thing – I have verified that the file is smaller than the max file size limit set on the server. It was.
So I went ahead to seek help from Mr. Google, but all I came up with was a load of rants and rackets about the WordPress Importer plugin. That meant I need to roll up my sleeves and get my hands dirty with raw plugin code…
Making a long story short – it all comes down to this line:
$dom = new DOMDocument;
within the WXR_Parser_SimpleXML class, in a file named parser.php of the importer plugin. And at that – the plugin cannot be blamed. Thing is – when calling the DOMDocument class, if it is not installed on the server , it will return nothing. Nesting this call inside a try and catch will not do either. This might be an issue with WordPress, and maybe turning on debug mode can help, I admit I haven’t checked it.
So only thing left is indeed to check if the libxml and the domdocument extensions are indeed installed with the server. They are probably not, so setting them with the server is most likely to solve the problem.

Upgrading WordPress – A Peack under the Hood

What happens when we click Upgrade Now?

  • WordPress creates automatically a file named .maintenance
  • All these files might be overriden:
    • All the files under /wp-includes/
    • All the files under /wp-admin/
    • Any wordpress’ original theme folder (Twentyten, Twentyeleven etc..) under wp_content/
    • All files directly under wordpress’ root
  • A couple of files/folders may be added to wp_content/
  • On the database, The “db_upgraded” flag on the wp_options table is set to “0”
  • If all went well, WordPress deletes automatically the .maintenance file

Once done, the right db and system versions are recorded on the wp_config.php file:
/**
* The WordPress version string
*
* @global string $wp_version
*/
$wp_version = '3.1.3';

/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
*
* @global int $wp_db_version
*/
$wp_db_version = 17516;

If anything goes wrong – here’s an interesting article with some suggestions for troubleshooting.

Adding Scripts and Style only to a certain Page on WordPress

Sometimes we want to add a script or a css file only to a certain page. How can this be done?

Here’s what happened to me: I needed to insert a code snippet on a page. The snippet was generated by a third party. In fact – it was a form, and the form’s code, already ready, also contained the action for the form, on a galaxy far, far away. I.e. – remote server, not a part of the site.

That means – most of the work already done. All is needed is to paste the piece of code on a page, and let the 3rd party action page deal with the rest. Unfortunately, even when a remote server takes care of the form data, it is still our responsibility to validate it on the client side. So further to adding the html code for the form, we need some javascript to actually validate it. To do so, I wanted to call an external jquery plugin called validationengine. Question is: how do I call this script only on the form’s page?

So the first thing we do, is create a unique template for the form page. Having done that we go on to the next stage

What we need to do now, is creating 2 hooks that will be called and affect the content of the page’s head. The first hook, when called, will register the necessary js files, and the second hook will add a line to the head html: a call for the css file.

In this example I will demonstrate adding some script that take care of form validation, but you may use the same technique for anything you want.

So it is time to add some code to our functions.php file. You can find this file on your theme’s directory. If you don’t find it – don’t worry. Just go ahead and create one. Open the functions.php file with your favorite text editor and write down:
function print_form_scripts () {
wp_enqueue_script('validationEngine-en', get_bloginfo( 'template_url' ).'/jquery.validationEngine-en.js', array('jquery'));
wp_enqueue_script('validationEngine', get_bloginfo( 'template_url' ).'/jquery.validationEngine.js', array('jquery'));
}
function print_form_styles ($content) {
$content .= '<link rel="stylesheet" href="'.get_bloginfo( 'template_url' ).'/validationEngine.jquery.css" type="text/css"/>';
echo $content;
}

The first function (print_form_scripts) when called, will register a couple of scripts to the page,
The second function (print_form_styles) when called, will add an html line to the head content, a call for a css file, that is relevant for the form validation.

Now, all is left to do, is actual hooking of these functions to the wp_head action.

In order to do so, open your new page’s unique theme file (page-NNN.php) and add these lines, before the call for the get_header() function:
add_action('wp_print_scripts', 'print_form_scripts');
add_action('wp_head', 'print_form_styles');

Keep in mind, that these lines should be added to the file before the call for the theme’s header file (get_header()), as they are hooked to wp_head, which in its turn, is called from within the header file.

Having done that, you can refresh the page and check it’s html hitting “view source”, and see that indeed the calls to the requested js and css files are added to the head html, for this page only.

Customizing a Page on WordPress

It’s always recommended to be consistent with your site’s look and feel. However, there may be a time when a page calls for a unique look and feel. Be it you homepage, or a special landing page, or a complex form. For those cases there should be a way to customize a unique page without affecting other pages’ appearance, and indeed, there is. In fact, there are at least two.

WordPress has a theme hierarchy. Which means that whenever a page is loaded, the system detects its type, and calls for a ceratin template file from your theme directory. If that file is missing, WordPress will fall back to the next in line.

For page display, WordPress will look for a theme file called page.php, however it will look first for a file called page-NN.php, where NN be the pages id.

So if your special page’s ID is 44, create a file in your theme’s directory, called page-44.php, and use it to customize your page layout. Even better would be to save the page.php file as page-44.php. That way you already have a base that you can start work on.

You can also create a file named page-my-new-landing-page.php, where “my-new-landing-page” be your special page’s slug. Yes, before WordPress looks for a page-NN.php, it looks for a page-SLUG.php!

Read more about WordPress theme hierarchy here.

Using a theme file

Sometimes you need to customize not just one page, but a couple of pages. For example, a series of landing pages. In this case, you will be better off setting a special template file to rule them all.

First thing: Create a file in your theme directory, and give it a name. For instance: “landing_page.php”.

Open the file with your favorite text editor and add these lines:

/**
* Template Name: Landing Page Them
* A custom page template for landing pages
*/

The “Template Name” bit is the identifier of this theme.

Once this is done, go to the back office and create or edit a page. When the page is open for editing you will notice on the right hand side the “template” drop-down menu. From this menu you can now choose your new template for this page, and others.

Yet Another Simple Gallery Plugin for WordPress

I have been looking for a really simple gallery plugin that can use WordPress’ native Gallery features and jquery support, but couldn’t find any. My qualifications were simple: a row of thumbnails, a main photo, and a way to switch to another photo by clicking on its thumbnail. I didn’t want the featured image to be modal, like in a lightbox mode, but located in the same page as the thumbnails. Only thing resembling what I was looking for, was really hard to adapt, even in terms of css. I know there are millions of gallery plug-ins out there, so my search was probably not good enough, however – I ended up writing it from scratch.

It was registered today with WordPress.

This plugin is really simple. All you need to do is download and activate it. Then go ahead and create a new post with gallery for your photos. What happens next is that the photos are arranged in your new post like small thumbnails and a main image. Clicking on a thumbnail will switch the main image to the one related to the clicked thumbnail. Off-course, if you are as control freak as I am, and you definitely need to make a change – you can create a yasg.css file, save it under your theme folder, and change any css rule you feel like. These rules are to override the gallery’s default css rules. I can hardly imagine you’ll ever need more control than that.

The plugin was tested on WordPress 3.2.1

Please comment on this post, if any problem, bug, question or ideas for improvements.

Download the plugin now.

Setting a menu item as ‘current’

We would always like to know where on the site we are on each given moment. For that, we always expect to see a special mark up for the menu item that refers to the page we’re in. To Realize such a thing, we assign a special css class (almost always containing the string ‘current’) to the said menu item, and apply special style rules to that class

As a general rule, WordPress always sees to add such a mark up to its menu items. For instance: when you’re in a certain page, the menu item that refers to this page, would always get a special ‘current’ class – probably: “current_page_item”. If your menu contains a link to a category, on the category page that the link refers to, or for each post belonging to this category, the relevant menu item will be assifned a special class – normally: ‘current-menu-item’ or ‘current-parent-item’.

However, there are times when WordPress fails to make the connection between a menu item and a post/page. For instance: you have created a special page that lists recipes from all recipe categories on your site. You call it ‘recipe main page’ and you refer to it from the ‘recipe’ menu item on the main menu. When on this page, the menu item ‘recipes’ is assigned the ‘current’ css class. But as soon as you pick an actual recipe from the list within the page and load the recipe page – even though logically you are still in the ‘recipes’ section – WordPress wouldn’t know to assign the ‘current’ class to the ‘recipes’ menu item any more.

In order to solve this – we should intercept the actual menu output and add an action to it – to always check, for instance: are we on a recipe page, and with that, are we right now handling the ‘recipe’ menu item? If so, then we should add the current class to it.

Luckily – WordPress provides us with a filter to do right that: the filter name is ‘nav_menu_css_class’ and it passes and processes the array of class for each menu item. Now we have to write a function to this filter. On each iteration on a menu item, this function checks two conditions: 1. Are we on the recipes menu item right now? 2. Is this post a recipe.

Our first task is simple: to know if we are on a certain menu item, we need to have its id. The id is very easy to indicate and be extracted from the menu items id: right click on the page to view the page source, or use Firebug to tell ‘recipes’ menu item’s id – that should be along the lines of: ‘menu-item-NN’, where NN is a number representing the actual id of this menu item. For this example let’s assume it is 42.

Our next task is a bit more complicated. We need to retrieve, not just the category id of our current post, but its root parent id, because the recipe root category may contain several sub-categories, and all should affect the ‘recipe’ menu item to get the current indication.

WordPress has a function that gets a category id and returns a string containing a breadcrumb trail of all its ancestors, all the way to its root category. The category names in this string are separated by ‘/’.

Next step is to add the extra code to handle our special current situation inside the function.php file. A reminder: this file should be located in your current them root directory. If it’s not there: simply create a file named functions.php and save it under your current theme root directory.

So first off – we write a function that retrieves the root category id from this string:

function get_root_category($category_id='') {
$ancestors = get_category_parents($category_id); //get the string containing the category ancestors
$split_arr = split("/", $ancestors); //break this string into an array
return get_cat_id($split_arr[0]); //pass the first value of this array (being the root category) to the function get_cat_id, that gets a category name, and returns its id.
}

Now we have tools to check for each page, if it is a recipe, and for each menu item being handled, if it is the ‘recipes’ menu item.

Next: we right the actual function, to be added as a filter to the menu construction:

function add_recipe_class( $classes = array(), $menu_item = false ) {
$category = get_the_category();
$category_id = $category[0] -> cat_ID;
$is_recipes = ($category_id != '' && 4 == get_root_category($category_id)); // our root recipes categories is 4. Replace 4 with your actual one
if ($is_recipes && ! in_array( 'current-menu-item', $classes ) && 42 == $menu_item->ID) { // recipes menu-item's id is 42. Replace 42 with your actual one
$classes[] = 'current-recipe'; // Off-course, the class name may be changed to anything more relevant to your case.
}
return $classes;
}

and now: adding the actual filter/ This too should be added to the function.php file:

add_filter( 'nav_menu_css_class', 'add_recipe_class', 10, 2 );

That’s it! Now, when you’re in a post belonging to the recipes root categories, you should see (viewing the page source, or using Firebug), that a new class was added to the recipes menu item: ‘current-recipe’. Now, only thing left is to apply a couple of style rules to it – and you’re good to go!

The Lava-Lamp Menu in WordPress

The other day one of my clients asked me to look at a very neat effect he saw somewhere. He insisting on having “the same” in his site. So I made a little research and came across this really neat gimic: the Lava Lamp Menu. The main idea is to have a neat transition that enhances the hover effect, making the active menu item transform to its new css with a very delicate and not-too-obtrusive sliding motion.

Continue reading