Essential Plugins, Website

Customising the Visual Editor

As a developer you frequently need to build in complex design features. Sometimes, these styled elements look like they should appear in the main content area, but because you can’t use proper HTML in the page editor, they have to be separated off into widgets of using custom fields.

You can always customise the editor-styles.css file to make the editor show your blocks in a styled way – but these can be easy to break while editing, and a user can’t add a new block in the way they could insert an image of add a new heading.

That doesn’t have to be the case though! You can customise the visual editor in WordPress to not only show your styles, but also to allow users to insert your custom created blocks.

Here’s a round-up of the plugins that give you the ability to make WordPress a more complete CMS.

Visual Editor Custom Buttons

This plugin allows you to create a new icon on the editor toolbar which, when clicked, inserts your code. You can either insert your code as a single block – say, a column grid template users can edit – or you can wrap selected content in your code, as you can already do when changing paragraphs into headings.

You can also add your own CSS to style your code on a per-button basis, so you’d never have to edit editor-styles.css.

One example of using this plugin would be to create a button that lets users insert a featured content box with multiple columns and a placeholder image.

You could also use it to insert your own custom shortcode, or even to allow users to create accordions without needing use shortcodes.

TinyMCE Professional Styles

You can add your own formats to TinyMCE (which is what WordPress uses for the visual editor), but doing so is a bit fiddly and time consuming. This plugin lets you add new formats quickly, shows all of your new formats, and includes documentation on the setup page.

The settings are very flexible and you have about as much control over formatting changes as WordPress offers you with the existing visual toolbar buttons.

For example, you could could create a format named “Image Border” that applies a class of “imgborder” to any images. Now, when a user clicks on an image in the post editor, they’ll have the option to use the Image Border format. Selecting the format will add your class. Clicking it again will remove the class.

Another example would be to allow users to add the class of “fancybox” to links, letting them create their own lightboxes.

Formats appear in a dropdown menu next to the dropdown that normally says “Paragraph”. The menu will list all the formats you’ve created, and formats can only be used on elements you’ve allowed usage for. In the example, since you set the class to be added to images only, users won’t be able to add the class “imgborder” to links or paragraphs.

The available options are quite expansive, so it’s well worth having a look. The examples given here don’t do justice to how powerful this plugin really is.

Other Plugins

Forget About Shortcode Buttons lets you quickly insert buttons in a range of configurable styles. Selecting your buttons and changing their styles is quick and simple. This one is not recommended though, as it’s not really suitable for website development. As simple as the plugin is to use, you’d probably prefer not to have users creating bright, bold buttons everywhere in an otherwise understated and calm website design!

The plugin Crazy Pills does a similar thing to Forget About… – but like FASB, it’s real-life applications are limited.

There’s also the plugin collection named WP Editor. It’s downloadable only from wp-editor.com, but lets you create info boxes, buttons, and columns. Only the latter is really useful for website development, but they’re all worth downloading if you’d like to learn more about TinyMCE plugins.

Standard
Essential Plugins, WordPress

Essential Plugins: Admin – Editing

This is the third part of a series of posts on essential WordPress plugins.

The last post dealt with plugin which could help make your commercial website development faster, easier and cleaner. Today’s post covers plugins which will speed up and improve  the editing part of building or maintaining a website.

These plugins aren’t just for your client – they’re great for you too!

Admin Quick Jump

A huge time saver, Admin Quick Jump adds a box above the Publish button allowing you to quickly move to another page (or post of the same post type) for editing. There are other similar plugins, but this one is the least obtrusive.

Display Kitchen Sink by Default in Visual Editor

It seems almost silly that half of the buttons in the visual editor toolbar are hidden by default, but this plugin gets around that quirk. With it installed, the “kitchen sink” – the second row of editor buttons- will be shown right away for all users.

TinyMCE Advanced

The visual toolbar has so much more to offer, but most of the buttons are not available by default. TinyMCE Advanced has been giving developers and website users access to all the otherwise hidden features of the editor, including a familiar-looking toolbar which offers every button option, with an incredibly useful text label indicating the purpose of a button. It certainly makes adding links easier – who would know otherwise that the icon that looks like a paperclip creates links!

Standard
Essential Plugins, WordPress

Essential Plugins: Admin – Development

This is the second part of a series of posts on essential WordPress plugins.

We’ve covered the front-end, interactive feature plugins you absolutely must install when you start building a new WordPress website. Next, we’ll cover the admin area plugins, which affect the main development of a website, or which make the editing experience faster and easier.

Advanced Custom Fields

This is, by far, my favourite plugin of all time. If a website needs any custom data set for a page or post, Advanced Custom Fields is the right tool for the job. You can create a range of fields, from plain text to select boxes containing a range of posts. Using fields in the template code is very easy, and the documentation is clear and substantial.

Sure, you could just use the custom fields built into WordPress, but they’re ugly, unclear, and can be very limiting. ACF lets you create tabs, messages, rules for showing the custom fields, and so much more.

ACF also has a selection of add-ons, which I can highly recommend. The Gallery add-on makes adding image galleries to post easy (and avoid having to use an additional plugin to handle this), while the Options plugin will help you set up a settings page for anything you’d like to make configurable on your website. It’s a great way of quickly putting together a Theme Options page, without having to do the time-consuming development work involved.

Custom Post Type UI

Using custom posts lets you add a whole new posts section with your custom post type, named what you like. Your new custom posts can be shown in an automatic archive, can be styled differently to standard posts or pages, and can use their own set of custom fields. CPT UI makes creating and managing custom post types a breeze.

Disable Comments

Most websites don’t need comments. Turn them off in a flash with Disable Comments, across the whole site, or just for certain post types.

Shortcodes in Sidebar Widgets

Similar to the plugin above, this one adds functionality into WordPress that you would think would be available from the start. As the name states, this plugin allows you to use shortcodes in widget areas. Even if you don’t use it right away, it’s a good idea to have this installed and activated to avoid confusion and frustration later!

Widget Classes

A simple plugin that lets you add classes to widget areas. There are a few other similar plugins, but this one just creates a blank text field with no extra bits cluttering up the interface.

Admin Menu Editor

Change the admin menus. A seemingly basic plugin that can actually do quite a lot, this one’s indispensable on larger sites that have loads of plugins installed.

Standard
Essential Plugins, WordPress

Essential Plugins: Front-End

This is the first part of a series of posts on essential WordPress plugins, where I’ll discuss some of the best plugins available for getting a new WordPress website ready to be shaped into something beautiful.

This post covers the plugins you’ll probably want to install when you first start building a commercial website, either for a client or for yourself.

As the title of this post suggest, this first set of plugins are for the front-end of the site – i.e., the user-facing, public face of your website.

Handling Images

Meta Slider / Master Slider

Meta Slider lets you drop in a large number of images into a slider, to create separate slides very quickly. It’s responsive and has a few good customisation options. It’s also very user-friendly, so it’s great for clients who will be changing slides.

For more control, and for a greater selection of default styles, Master Slider is the best choice. Slides need to be added individually, but the huge range of options make it worthwhile – although the abundance of customisation options mean it’s harder for clients to use it, and even developers may need to take some time to learn how to use it.

If your project needs something really fancy though, you could be better off trying a premium plugin. The two most popular plugins I’ve come across are Layer Slider and Revolution Slider. Unfortunately, while they are both good, they’re very hard to pick up and use right away. This means they are definitely not suited for a website you’re building for a client, if they will need to customise their slider frequently.

MaxGalleria

A vast improvement on the long-standing king of WordPress galleries, NextGen Gallery, MaxGalleria is easy to use and easy to customise. It’s responsive by default, can create video galleries, shows captions nicely and is very customisable. It can also import image data from NextGen, so upgrading to MaxGalleria is very easy.

User Interaction

Contact Form 7

The essential contact form plugin, WPCF7 lets you create simple and complex forms using a set of plugin-specific shortcodes. The settings may not be easily customised by a non-technical person, but it’s flexibility and range of third-party add-ons certainly make it the best form plugin currently available.

Don’t forget to install Really Simple CAPTCHA too, to prevent the usual tide of spam messages!

If you need to do more with your contact form, consider installing Dynamic Text Extension. This plugin lets you show useful information in your form and the message it sends out, such as the name of the post, and can add in hidden fields too.

Content Presentation

Tabby Responsive Tabs

With Tabby Responsive Tabs, you can code tabs into your content using a very user-friendly set of shortcodes. After a certain width (767px, one pixel after iPad portrait mode) your tabs become an accordion. The default styles look pretty good too, and the plugin is in active development, with new features being introduced frequently.

One great feature, added after the initial build, lets you create links to open certain tabs! That’s ideal for linking to information from one page to another, where the information is contained within certain tabs.

Also, seriously, the shortcodes are awesome. You simply say “this is a tab, this is a tab, and now my tabs are done”. There’s no need to close each tab or include bulky setting attributes, making this a very user/client-friendly plugin.

Squelch Tabs and Accordions Shortcodes

Tabby Tabs is awesome, but if you want to show accordions or tabs all the time – rather than before or after a certain breakpoint – then Squelch is the ideal plugin for you.

Originally intended as a replacement for the dying TheThe Tabs and Accordions, Squelch allows you to create accordions, tabs and toggles quickly with the shortcodes provided – all of which follow the same structure as the original TheThe shortcodes. The plugin creates standard jQuery UI elements and has clear documentation with lots of examples.

Easy FancyBox

Makes any image link open in a lightbox, an essential feature of any modern website. This plugin is included under the heading of Content Presentation because as well as making image links open in a lightbox, you can also change a few options to make it work with inline content (modal lightboxes), iframes (lightboxes for external website), and video services like YouTube and Vimeo.

Essentially, this plugin just enables FancyBox and adds some Javascript to configure the settings, but it’s still much faster than doing this yourself! Plus, if you would like to use a more recent version of FancyBox, you can just copy the settings from your displayed page source and use them with your own version of FancyBox.

Standard