Dots & Thoughts

This idea has been submitted to WordPress. Please vote for it if you’d like to see it included in an official future WordPress release!

WordPress 3.3 is finally there and it is an awesome release, with lots of nice improvements. If you’re sure about what you’re doing and have a recent backup, I invite you to upgrade asap.

But if you ask me what I think about the revamped post editor in WordPress 3.3, there is something I’d discuss. About the post editor, there is not many visual differences in this release because it’s mostly feature-wise.

Now that we have a nice all-in-one uploader and media button, I don’t think it’s still necessary to have it staying alone above the post editor. Plus, if I follow their [WordPress] “just write” concept, I think it is more disturbing than useful.

So what would I do? I’d remove this upload/media button and place it in… the toolbar. Quite obvious, isn’t it? It’s (just) a tool we can use to embellish the text but it is not the main component of the page.

If I remove this button and its label, the white space (negative space) is too tall but I can’t reduce it because there is still the Visual/HTML toggle on the right. What is this? Oh, it’s a tool. Ok, I’ll place it in the toolbar too. And now I can reduce the white space between the title field and the text editor. Not too much, though, because we have to take care about the permalink that’ll show up after we’ve entered a title. While we’re at it, let’s fade this element a little bit out.

I don’t say that this is perfect and I didn’t spent hours working on it. I just say this may improve the overall UI of the post/page editor and remove some clutter.

Below are some captures and mods about this.

Please note that these images are made to respect a max-width of 660 pixels, the Visual/HTML buttons are right aligned.

Original post editor

Original post editor + permalink

Modded post editor

Modded post editor + permalink

If you’re like me and spend a lot of time writing CSS, here is a tip that can save some characters.

When we want to use the sans-serif fonts, we usually declare it like this :

.something {
	font-family: Helvetica, Arial, sans-serif;
}

This complete font-family tells to work with Helvetica first, then to fall back on Arial and on the generic sans-serif as a last resort. You actually don’t need that complete family declaration. You can just use :

.something {
	font-family: sans-serif;
}

And sans-serif will automatically select the most appropriate one.

Allons-y pour un deuxième article à propos du menu d’administration de WordPress, après celui sur la largeur du menu.

Si vous avez l’habitude d’utiliser WordPress pour créer des sites un tant soit peu avancés, vous êtes certainement déjà familier avec les Custom Post Types. Je ne vais donc pas expliquer ce que sont les CPT ici.

Vous savez certainement qu’il est possible de changer la position de vos CPT dans le menu d’administration de WordPress, ceci via le paramètre menu_position. Et pour cause, quand on utilise les CPT c’est souvent le coeur du site qu’on développe et ceux-ci sont plus important que les articles ou les pages. Dès lors on apprécie de les placer au-dessus de ceux-ci dans le menu afin de les mettre en avant. On peut jongler un peu avec le paramètre menu_position mais on en atteint vite les limites.

Il est par contre tout à fait possible de réécrire à la main l’ensemble des éléments du menu. Il n’est pas utile de tout réécrire si on veut simplement placer les CPT sous l’élément “Tableau de bord”. Placez ceci dans votre fichier functions.php et vous aurez :

1. Tableau de bord : l’index de l’administration ;
2. Activités : le type “activite” ;
3. Ateliers : le type “atelier” ;
4. Stages : le type “stage”.

function custom_menu_order($custom_menu_order) {
	if (!$custom_menu_order) return true;
	return array(
		'index.php',
		'edit.php?post_type=activite',
		'edit.php?post_type=atelier',
		'edit.php?post_type=stage'
	);
}

add_filter('custom_menu_order', 'custom_menu_order');
add_filter('menu_order', 'custom_menu_order');

Autre exemple, si vous placez tools.php en premier lieu, ce sera le menu “Outils” qui sera en tête de liste.

Pour plus d’informations sur les Custom Post Types, je vous conseille de passer par le Codex WordPress qui explique tout ça en long et en large.

Comme avec toutes les localisations, il peut y avoir des petits couacs quand il s’agit de faire tenir un label en français dans un espace à l’origine prévu pour un label en anglais.

Et WordPress n’est pas à l’abri. Si vous utilisez WordPress en ayant la langue française activée, vous avez sans doute déjà remarqué que l’élément de menu “Tableau de bord” (tout en haut à gauche) est obligé de tenir sur deux lignes.

On peut corriger ça rapidement en injectant un peu de CSS dans l’entête du panneau d’administration de WordPress.

Pour WordPress < 3.3 ajoutez ceci dans le fichier functions.php de votre thème :

add_action('admin_head', 'my_admin_css');

function my_admin_css() {
	echo '<style type="text/css">
	#adminmenuback, #adminmenuwrap, #adminmenu,
	.js.folded #adminmenu .wp-submenu.sub-open,
	.js.folded #adminmenu .wp-submenu-wrap {
		width: 155px;
	}
	#wpcontent, #footer {
		margin-left: 175px;
	}
</style>'."\n";
}

A partir de WordPress < 3.3, l’item “Tableau de bord” est normalement écrit sur une seule ligne. Cependant, si vous souhaitez appliquer un changement similaire, voici ce qu’il faut ajouter dans le fichier functions.php de votre thème :

add_action('admin_head', 'my_admin_css');

function my_admin_css() {
	echo '<style type="text/css">
	#wpcontent, #footer {
		margin-left: 175px;
	}
	#adminmenuback, #adminmenuwrap, #adminmenu,
	#adminmenu .wp-submenu, #adminmenu .wp-submenu-wrap,
	.folded #adminmenu .wp-has-current-submenu .wp-submenu {
		width: 155px;
	}
	.wp-menu-arrow {
		-moz-transform: translate(156px);
		-webkit-transform: translate(156px);
		-o-transform: translate(156px);
		-ms-transform: translate(156px);
		transform: translate(156px);
	}
	#adminmenu li.wp-not-current-submenu .wp-menu-arrow {
		-moz-transform: translate(155px);
		-webkit-transform: translate(155px);
		-o-transform: translate(155px);
		-ms-transform: translate(155px);
		transform: translate(155px);
	}
	#adminmenu li .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu {
		left: 156px;
	}
</style>'."\n";
}

On peut discuter les tabulations et retours à la ligne mais de cette façon c’est propre dans le code source.

Le but on l’a compris mais quel est l’intérêt ? Dans mon cas c’est simplement parce que je trouve ça dommage qu’un élément de menu d’une interface soit écrit sur deux lignes sans raison raisonnable.