Yes, it’s another new look

One of the things that interested me about WordPress 3.5 was the new default theme, Twenty Twelve. This has a minimalist look with a distinct lack of images, some quite tasty typography, and most importantly for my purposes, the option of a full-width layout.

I knew I’d need to make a couple of changes to get it the way I wanted, but as this can be done with a simple child theme, I decided to give it a try. One alteration was to make the footer widgets appear on every page – this needed one line of code, so it was simple enough even for me. I copied footer.php to my child theme and changed this:

<!-- #main .wrapper -->
<footer id="colophon" role="contentinfo">

to this:

<!-- #main .wrapper -->
<footer class="template-front-page two-sidebars"><?php get_sidebar( 'front' ); ?>
</footer>
<footer id="colophon" role="contentinfo">

That <footer…> was needed to get the styles right. Without it, the footer widgets ended up piled up on the right of the screen.

I also moved the block that shows the date of each post from the bottom to the top – and that was a simple cut and paste job. Admittedly, it does leave a section at the head of the post being called a footer, but I can live with that.

At that point, I thought I’d got it. But then I happened to look at an old post that had something like this in it:

Note: It’s really important not to break old stuff when you do something new.

Instead of showing up in a nice box like that, it was just plain text. It was at that point that I recalled that I’d replaced my previous simple styles with the nifty buttons and shortcodes provided by the excellent Graphene theme that I’d been using. Now themes that provide functions like this are generally a Good Thing, but if you ever decide to go for a new look, it can be a bit of a pain to fix things. But I was in the mood to do some research, so I looked through the files of the Graphene theme and worked out how it was adding the buttons to the post editor (something I’ve failed to get my head around in the past) and how the buttons inserted the shortcodes, and finally, how the shortcodes get translated into nicely formatted blocks.

I spend some time fiddling with that on my test site[1] and eventually added a modified version of the code to my Functionality Plugin, together with the JavaScript that talks to the TinyMCE editor, and the little icons. The only remaining bit was copying the CSS to get the appearance right. Now I’ve done that, I can adapt this for other buttons, or indeed change these to look completely different.

For the benefit of anyone wanting to try this, here’s the code for adding the shortcodes:

function warning_block_shortcode_handler( $atts, $content= NULL, $code = '' ) {
    return '<div class="warning_block message-block">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'warning', 'warning_block_shortcode_handler' );

function error_block_shortcode_handler( $atts, $content= NULL, $code = '' ) {
    return '<div class="error_block message-block">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'error', 'error_block_shortcode_handler' );

function notice_block_shortcode_handler( $atts, $content= NULL, $code = '' ) {
    return '<div class="notice_block message-block">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'notice', 'notice_block_shortcode_handler' );

function important_block_shortcode_handler( $atts, $content = NULL, $code = '' ) {
    return '<div class="important_block message-block">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'important', 'important_block_shortcode_handler' );

/**
 * Hook the shortcode buttons to the TinyMCE editor
*/
class LCB_Shortcodes_Buttons{

	function LCB_Shortcodes_Buttons(){
		if ( current_user_can( 'edit_posts' ) &&  current_user_can( 'edit_pages' ) ) {
			add_filter( 'mce_external_plugins', array(&$this, 'lcb_add_plugin' ) );
			add_filter( 'mce_buttons_2', array(&$this, 'lcb_register_button' ) );
	   }
	}

	function lcb_register_button( $buttons ){
		array_push( $buttons, "separator", "warning", "error", "notice", "important");
		return $buttons;
	}

To avoid things clashing, I changed the function and class names to have my initials at the start. This makes it easier to see what’s going wrong. However, because I needed the shortcode names to be the same as before, there was a problem running this code with the Graphene theme active, so watch out for that.

And here’s the JavaScript that adds buttons to the editor:

(function() {
	tinymce.create('tinymce.plugins.lcbShortCodes', {
		init : function(ed, url) {

			ed.addButton('warning', {
				title : ed.getLang('lcbshortcodes.warningtitle', 'Add a warning message block'),
				image : url+'/warning.png',
				onclick : function() {
					 ed.selection.setContent('
' + ed.selection.getContent() + '
'); } }); ed.addButton('error', { title : ed.getLang('lcbshortcodes.errortitle', 'Add an error message block'), image : url+'/error.png', onclick : function() { ed.selection.setContent('
' + ed.selection.getContent() + '
'); } }); ed.addButton('notice', { title : ed.getLang('lcbshortcodes.noticetitle', 'Add a notice message block'), image : url+'/notice.png', onclick : function() { ed.selection.setContent('
' + ed.selection.getContent() + '
'); } }); ed.addButton('important', { title : ed.getLang('lcbshortcodes.importanttitle', 'Add an important message block'), image : url+'/important.png', onclick : function() { ed.selection.setContent('
' + ed.selection.getContent() + '
'); } }); }, createControl : function(n, cm) { return null; }, }); tinymce.PluginManager.add('lcbshortcodes', tinymce.plugins.lcbShortCodes); })();

This will all work so long as the JavaScript file and the image files are in the same folder as the plugin. If you move it somewhere else, you’ll need to change the paths in the code.

Finally, here’s the CSS for the boxes:

.message-block {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	padding: 5px 10px 5px 50px;
	background: #eee;
	margin: 10px 0 0;
	min-height: 35px;
	overflow: auto;
}

.message-block p.first-p {
	margin-top: 0;
}

.warning_block,
.error_block {
	background: #FCC url(/wordpress/wp-content/plugins/losingit-functionality-plugin/warning.png) no-repeat scroll 10px 7px;
	border: 1px solid #F99;
	color: #C31B00;
}

.error_block {
	background-image: url(/wordpress/wp-content/plugins/losingit-functionality-plugin/error.png);
}

.notice_block {
	background: #FDEBAE url(/wordpress/wp-content/plugins/losingit-functionality-plugin/notice.png) no-repeat scroll 10px 7px;
	border: 1px solid #E6C555;
	color: #9E660D;
}

.important_block {
	background: #DEE3AB url(/wordpress/wp-content/plugins/losingit-functionality-plugin/important.png) no-repeat scroll 10px 7px;
	border: 1px solid #A3C159;
	color: #5E6F33;
}

And yes, I have spent a lot of time on this over this weekend, but it was fun in and odd sort of way. It was satisfying to be able to find solutions to the problems I had with this and the EXIF matter I mentioned earlier. I’m still nowhere near being an actual coder, but I do occasionally get a little less distant.

[1] It’s always a good idea to have a test site for this kind of thing. I broke it several times while testing. I found the web server’s error logs very helpful in pointing out my mistakes.