WordPress 3.3. media uploader

One of the nicest updates is the new drag and drop media uploader. Other updates are:

• hover menus for the navigation (fly-out)
• new toolbar
• improved co-editing support
• Tumblr importer
• pointer tips for new features included in each update
• friendly welcome message for first-time users
• improved dashboard experience on iPad and other tablets

You can read more about the new features and updates and watch the release video at the WordPress development blog.

Carisma House website

The site, that was designed by an advertising agency, is running on WordPress and uses the built-in commenting system to display feedback from clients.

add_action('admin_head', 'remove_category_scrollbars');
function remove_category_scrollbars() {
echo '
<style type="text/css">
#category-all.tabs-panel {height: auto;}
</style>
';
}

The above code adds some CSS into the WordPress header. The admin_head action event makes sure that the CSS only gets added to the admin area. Take a look at the HTML markup of the WP admin area. With the help of admin_head and CSS you can change the appearance of almost anything you want.

Hiding the WordPress admin menu

The admin menu can be hidden by adding the following code to the themes functions.php file:

add_action('admin_head', 'hide_the_entire_adminmenu');
function hide_the_entire_adminmenu() {
global $current_user;
get_currentuserinfo();
if($current_user->user_level < 4) {
echo '
<style type="text/css">
#adminmenuback {display: none;} /*Hides the admin menu*/
#adminmenuwrap {display: none;} /*Hides the admin menu*/
#wpcontent {margin-left: 10px;} /*Makes the content area stretch across the entire page*/
</style>
';
}
}

The above is just a quick and dirty way to hide the admin menu. The menu items are still accessible by writing the url.

If you want to hide the menu bar you can read about how it is done in the post titled How to Remove the WordPress Admin Bar.

Make Post Title Required

By making small adjustments to the following code snippets you should be able to make almost anything required before a post can be published.

First, add this to the functions.php file in your theme.

add_action('admin_print_scripts', 'title_and_cat_required');
function title_and_cat_required() {
global $post_type;
if($post_type=='post') {
wp_enqueue_script('require-post-title', get_bloginfo('template_directory') . '/require-title-and-cat.js');
}
}

The code above will add the content of the file require-title-and-cat.js to the header of all admin pages when adding or editing posts. Change $post_type==’post’ to $post_type==’page’ if you want to run this on pages. You can also make the code run on only a custom post type if you need.

Next, you should create the file require-title-and-cat.js and put it in your themes’ folder. The file should contain the following code:

jQuery(document).ready(function($){
$('#post').submit(function(event){
var title = $('#title').val();
if( title.length == 0 || title.replace(/\s/g,'').length == 0 ){
event.preventDefault();
$('div#notice').remove();
$("<div id='notice' class='error below-h2'><p>Please give a title to the post.</p></div>").insertAfter('h2');
alert("Please give a title to the post.");
$('#title').focus();
$('#ajax-loading').hide();
$('#publish').removeClass('button-primary-disabled');
}
else if( $( "#categorychecklist input:checked" ).length == 0 ) {
event.preventDefault();
$('div#notice').remove();
$("<div id='notice' class='error below-h2'><p>Select at least one category.</p></div>").insertAfter('h2');
alert("Select at least one category.");
$('#ajax-loading').hide();
$('#publish').removeClass('button-primary-disabled');
}
});
});

The jQuery code above first checks if a title has been given. If a title doesn’t exist a window that tells the user to enter a title will pop-up. If a title is found the script searches for a checked category. If a category hasn’t been chosen a pop-up that tells the user to select at least one category will appear. By checking the sourcecode of the WordPress post editing page you can figure out how to make almost anything required.

For further reading you can check out these two discussions at the WordPress support forums:

http://wordpress.org/support/topic/require-post-title-prevent-posts-with-no-title

http://wordpress.org/support/topic/i-want-to-make-required-the-user-to-select-category-for-each-post

You might also find the Require Post Category plugin by Josh Hartman to be interesting.

jQuery Colorbox example image

I had some trouble with the jQuery lightBox plugin when trying to use it on a page with some other jQuery effects. After trying a couple of different plugins I ended up using the jQuery Colorbox by Arne Franken. The plugin has a number of nice features and you can choose from 11 different Colorbox themes. By the time of writing jQuery Colorbox is compatible up to the latest version of WordPress (3.2.1).

Let me know if you know of a better lightbox plugin.

<code><?php
 require_once('./blog/wp-blog-header.php');
 ?></code>

Just edit the path so that it leads to your WordPress installation. You can find a better example about how to use the code at http://www.wordpress-master.com/wordpress-functions-external-php-pages.html.

For the first method you only need your Twitter RSS feed url. You can the RSS link in the right sidebar of your Twitter page.

Twitter RSS feed link

When you have the link just drag a RSS widget (no plugin needed, it comes with WordPress) to your sidebar, footer or other similar area and enter the URL of your Twitter feed and give the widget a title if you want. The RSS widget shows the 10 latest items by default so you probably want to change this to number to 1 to only show your latest tweet.

The settings for the RSS widget to show a Twitter status

You can style the widget in  the style.css file so that it looks the way you want. By default the widget title has a feed icon to its left side. The title works as a link to your Twitter page.

Another easy way to display a Twitter feed in WordPress is using a plugin called Wickett Twitter Widget by Automattic. Once you have installed and activated the plugin you’ll find a Twitter widget among your other widgets. Just drag the widget to your sidebar and enter your Twitter username and give the widget a title. You can choose how many tweets you want to show.

The Wickett Twitter Widget settings.

You can learn more about Wicket Twitter Widget by watching a video at WordPress.tv.

The WordPress admin bar in action.

There are a lot of different ways to remove the admin bar that. Here is a method that I have found simple and effective. Just add the following to your functions.php file:

function my_function_admin_bar() {

return false;

}

add_filter( 'show_admin_bar' , 'my_function_admin_bar');

You can read more about the admin bar in the article written by Nilesh Shiragave.

A custom WordPress menu

Before the default menu builder was introduced I used to use a great plugin called WP Menubar and developed by http://www.blogsweek.com/about-the-author/. The plugin still has a lot of  great features compared to the built-in version and you should definitely check it out.

Here is how you enable the built in menu builder in your theme:

1) Add the following code to your functions.php file

register_nav_menus( array(

'primary' => __( 'Primary Menu' )

) );

2) Add this to your header.php or wherever you want the menu to appear

<div id="access">

<?php wp_nav_menu( array( 'container_class' => 'menu-header','theme_location' => 'primary' ) ); ?>

</div>

3) Below is the menu style from the default Twentyten theme, copy it to your style.css file

/* =Menu

-------------------------------------------------------------- */

#access {

background: #000;

display: block;

float: left;

margin: 0 auto;

width: 940px;

}

#access .menu-header,

div.menu {

font-size: 13px;

margin-left: 12px;

width: 928px;

}

#access .menu-header ul,

div.menu ul {

list-style: none;

margin: 0;

}

#access .menu-header li,

div.menu li {

float: left;

position: relative;

}

#access a {

color: #aaa;

display: block;

line-height: 38px;

padding: 0 10px;

text-decoration: none;

}

#access ul ul {

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

display: none;

position: absolute;

top: 38px;

left: 0;

float: left;

width: 180px;

z-index: 99999;

}

#access ul ul li {

min-width: 180px;

}

#access ul ul ul {

left: 100%;

top: 0;

}

#access ul ul a {

background: #333;

line-height: 1em;

padding: 10px;

width: 160px;

height: auto;

}

#access li:hover > a,

#access ul ul :hover > a {

background: #333;

color: #fff;

}

#access ul li:hover > ul {

display: block;

}

#access ul li.current_page_item > a,

#access ul li.current-menu-ancestor > a,

#access ul li.current-menu-item > a,

#access ul li.current-menu-parent > a {

color: #fff;

}

* html #access ul li.current_page_item a,

* html #access ul li.current-menu-ancestor a,

* html #access ul li.current-menu-item a,

* html #access ul li.current-menu-parent a,

* html #access ul li a:hover {

color: #fff;

}

Edit the style to make the menu fit your theme.

This is of course just a quick way to get the menu working on your page at WordPress Themes Collection. To learn more about the menu visit the Function Reference/wp nav menu page at the WordPress Codex.