Codepolice

Random posts from Ola in English. Mainly about programming and the web.

Import blog from Tumblr to WordPress can totally destroy your blog if you do it wrong

We decided to move our AlternativeTo blog from Tumblr to WordPress some days ago and i just want to share some of my experience about that process. To begin with I didn’t get the importer that used the Tumblr API to import the blog at all. I could log in and everything but absolutely nothing happened. I waited for at least one hour before i gave up.

But it was when i tried to use some other importers that the problems got really serious. I did some googling and i found a site called Tumblr2Wordpress, beware of this exporter if you use WordPress 3.0. It says nothing on this site at all but as soon as you import to WordPress via the XML file produced from this site your site is more or less screwed. I got an error saying “Are you sure you want to do this? Please try again.” or something like that everytime i edited a post, saved a draft or tried to publish a post. I spend hours debugging this before i figured out it was this importer that caused this.

Finally i looked on the page about importing on WordPress.org and they actually warns about the Tumblr2Wordpress site and they provided a link to a site called Tumblr2wp that actually worked. To bad that site didn’t have better rank in Google, would have saved me hours of work and frustration. Hopefully someone will find this post at least if you are getting the same problems i had.

Creating a empty/blank text widget for WordPress without additional markup and divs

WordPress provide a simple text widget that you can use on your blog to add some random HTML, Ads, images and so on. But i has one problem and that is that it’s always adding some extra HTML like this.

<div class="widget">
 <div class="textwidget">
 </div>
</div>

Sometimes you really do not want this code if you for example want to add a widget to a ul and want the outer tag to be a li. I tried to Google for this but surprisingly i didn’t find a single “Super Empty Text Widget” so i created one myself.

/**
 * SuperEmptyWidget Class
 */
class SuperEmptyWidget extends WP_Widget {
    /** constructor */
    function SuperEmptyWidget() {
        parent::WP_Widget(false, $name = 'SuperEmptyWidget');
    }
 
    /** @see WP_Widget::widget */
    function widget($args, $instance) {
        extract( $args );
        $content = $instance['content'];
        echo $content;
    }
 
    /** @see WP_Widget::update */
    function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance['content'] = $new_instance['content'];
        return $instance;
    }
 
    /** @see WP_Widget::form */
    function form($instance) {
        $content = esc_attr($instance['content']);
        ?&gt;
         &lt;p&gt;
          &lt;label for=&quot;&lt;?php echo $this-&gt;get_field_id('content'); ?&gt;&quot;&gt;&lt;?php _e('Content:'); ?&gt;&lt;/label&gt;
		          &lt;/p&gt;
          &lt;textarea class=&quot;widefat&quot; cols=&quot;20&quot; rows=&quot;16&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id('content'); ?&gt;&quot; name=&quot;&lt;?php echo $this-&gt;get_field_name('content'); ?&gt;&quot;&gt;&lt;?php echo $content; ?&gt;&lt;/textarea&gt;
 
        &lt;?php
    }
 
} // class SuperEmptyWidget
 
// register SuperEmptyWidget widget
add_action('widgets_init', create_function('', 'return register_widget(&quot;SuperEmptyWidget&quot;);'));

Just add that to your functions.php and you should have a widget that do not add any crap either before or after the content.

Only show the sub menu when the parent is selected with the new wp_nav_menu in WordPress 3.0

I just spent two hours trying to hide the submenu for a menu item that is not selected in the new menu system in WordPress 3.0. First i found this post in the WordPress forums where someone had built a “Custom Walker” but it was for a slightly different scenario and it was also a really complicated solution. Then i realized that i can do this super simple with jQuery. All you need is two lines of codes.

$(document).ready(function () {
 $(".sub-menu").hide();
 $(".current_page_item .sub-menu, .current_page_parent .sub-menu").show();
 $(".sub-menu li").after("<li class='sub-menu-seperator'>|</li>");
});

This will hide all sub-menus, and then if a parent happens to have the class .current_page_item we show the sub-menu. My god i love jQuery.

Update:

As sushicodeur suggest you could of course do this only with CSS, it’s basically the same thing.

.sub-menu { display: none; }
.current_page_item .sub-menu, .current_page_parent .sub-menu { display: block; }