WordPress Backend Design Study – An Alternative to MP6?

Our designer and usability expert Nick at marketpress.com did a design study on the coming WordPress backend design MP6 for version 3.7 and tried to analyse what can be done better and how!

wpbackendhigh

Also interesting question he asks:

The dashboard is the least used and yet most needed page in the back-end. Why?

More screens and his full analysis can be read on at MarketPress.com

What's your opinion?

WordPress-Christmas-2010-03

Extend the TwentyEleven Navigation with your Social Icons

TwentyEleven Screenshot

In this little tutorial we show how to add in the navigation of the TwentyEleven Theme our RSS Feed, a link with icons to our Twitter page and to our Facebook profile. Without writing a single line of PHP code. You are able to accomplish this with the WordPress Menu.

First we go in the backend to Design-> Menu and activate the CSS Classes. Therefore we click on "Screen Options" on the very top right corner. And unter "Show advanced menu properties" you check the box for "CSS Classes" and close the Screen Options.

WordPress menu screen options

After that we use the "Custom Links" to create the menu entries. We add the addresses to our RSS Feed, Facebook and Twitter and add them to the menu. There we assign the 3 menu entries to the CSS Classes. RSS Feed has the class rss, Twitter the class twitter and Facebook facebook. Don't forget to save.

WordPress Menu

I prepared a sprite, which you can download with a right mouse click->Save Image As… . You have to save this sprite into the folder twentyeleven/images/.

Social Sprite

Then we open the file TwentyEleven style.css with a text editor and add at the end of the Menu block #access our additional CSS. We do not have much to add. We let our 3 list items float to the right, push the text out of view and position the graphic. Only for the hover, focus and active states, we must define a little tricky CSS rule in order to circumvent the background gradients of TwentyEleven.

#access .twitter, #access .rss, #access .facebook {
	float: right;
}
#access .twitter a, #access .rss a, #access .facebook a {
	background: transparent url(images/social-sprite.png) 0 0 no-repeat;
	padding: 0;
	text-indent: -9999px;
	width: 70px;
}
#access .rss a { background-position: 0 0; }
#access .facebook a { background-position: 0 -96px; }
#access .twitter a { background-position: 0 -48px; }
#access .rss a:hover, #access .rss a:focus, #access .rss a:active {
	background: transparent url(images/social-sprite.png) 0 -144px no-repeat;
}
#access .twitter a:hover, #access .twitter a:focus, #access .twitter a:active {
	background: transparent url(images/social-sprite.png) 0 -192px no-repeat;
}
#access .facebook a:hover, #access .facebook a:focus, #access .facebook a:active {
	background: transparent url(images/social-sprite.png) 0 -240px no-repeat;
}

This is just an example to experiment. Add your Google+ profile and expand this example with cool CSS tricks!

New Plugin to Style your Plugin on WordPress Admin with Default Styles!

WordPress is developing fast - this also applies to the design of the backend. So it is important not to use your own styles in the admin area and use tags and classes of WordPress. This is the best way you can simplify your work as a developer and you don't have to test the design with every update. Unfortunately, there are quite extensive opportunities in the backend to implement the requirements. Several different classes and HTML structures are used. To be able to look up something this simple, I have developed a small Plugin, which tinkers in the development environment and quickly represents the necessary elements. Here you see two screenshots with the differences between version 3.1 and 3.2 of WordPress and the current contained elements of the Plugin.
Continue reading …

Comment Form Hooks Visualized

Most themes (e.g. TwentyTen) use the comment_form() function to insert the comment form after posts. There are quite some hooks inside the function but they are hard to localize. The codex documentation isn't too helpful, neither.
To give you an easy overview the following diagrams visualize the points where the various hooks are anchored. The number of available hooks depend on the discussion settings and the user's capabilities.

In the most common scenario the user is not logged in, is allowed to comment on the article and the comments are not closed:

There are six hooks available:

  • comment_form_before
  • comment_form_top
  • comment_form_before_fields
  • comment_form_after_fields
  • comment_form
  • comment_form_after

You might have noticed that the hooks comment_form and comment_form_after seem to be anchored almost at the same point but depending on the user's role and discussion settings they are not always available so you should take care which hook you are using in your code.


User logged in
If you are logged in you have fewer hooks available since the name, email and URL input fields are not needed. The missing hooks are

  • form_comment_before_fields
  • form_comment_after fields


User is not logged and "Users must be registered and logged in to comment" activated
If your blog is configured that only registered users can comment, an unregistered user will see this comment form and additionally the hook comment_form_must_log_in_after is available. Please notice that in this case the hook comment_form is left out.


Comments closed
If the comments on the post are closed you have only one hook left (comment_form_closed) since the form is not displayed at all:

Contactable – Contact Form Easy with WordPress

The integration of a contact form in WordPress usually begins with a search of a Plugin and often ends with a great effort too. Since scripts are loaded on all pages and posts - only to be integrated on one side of a form. The blog is only as good as his technician and I would like to show a very simple way how to integrate a contact form into your own blog without much knowledge.
Continue reading …