3 of the Best WordPress CMS Plugins

Over the years, WordPress has grown incredibly in popularity among those who want a free, user-friendly content management system, or CMS, for their website.

If you use WordPress on a regular basis as a web developer or webmaster, there are certain features that you wish WordPress offered right out of the box. Features that would make it a more complete CMS, and allow for more fluid workflows.

Luckily, WordPress has support for plugins. Plugins come in many forms and levels of quality and ability to conflict with themes or current versions of WordPress. Worries aside, once you learn to be discerning about which plugins you install, you’ll learn to love them and won’t be able to imagine using WordPress without a few installed.

Most posts that start like this are going to throw 25, 30, or even 50 different plugins at you that they claim will enhance WordPress’ CMS capabilities. This is not one of those posts. I’d like to showcase 3 plugins that, when added to WordPress, will make your life as the developer or webmaster of a site easier.

Now, on to the plugins…


Bulk Page Creator

screenshot-1

As the name implies, the Bulk Page Creator plugin allows you to create WordPress pages in bulk.

Use case: A client or project manager gives you a sitemap and asks you to create all of these pages by 3pm so a content creator can log into the site and add the content to them.

Rather than tediously creating 30+ pages with the “New Page” button in WordPress, you can simply use Bulk Page Creator to add them in minutes.


CMS Page Order

banner-772x250

Paired with Bulk Page Creator, CMS Page Order allows for at-a-glance viewing of your site’s page structure, as well as easy page management and reorganization.

CMS Page Order offers a tree-style view of the pages on your site, with collapsible sections, drag-and-drop page reordering, as well as controls to delete, edit, or view a page. It’s currently my default view for viewing and accessing pages when in the WordPress dashboard.

Use case: After you’ve created all those empty pages with the help of Bulk Page Creator, your client needs to reorganize a number of the sections. No problem! Just open CMS Page Order, and drag-and-drop til everything is reorganized.


TinyMCE Advanced

banner-772x250 (1)

If you’ve used a CMS in the past few years, chances are you’ve interacted with TinyMCE. It’s the WYSIWIG editor of choice for most of the major players these days, and if you’ve worked with it across different platforms, you’ll know that it can be very powerful when the right tools are available.

TinyMCE Advanced for WordPress allows you to customize what other admins and editors on your site see as available tools when editing posts or pages, including:

  • Support for creating and editing tables.
  • More options when inserting lists.
  • Search and Replace in the editor.
  • Editing in-line css styles.
  • Advanced image dialog that offer a lot of options.
  • Adding and removing HTML tag attributes.

Use case: A client’s site has a page that needs to show mostly tabular data. They need to be able to easily edit this page on a weekly basis without the aid of a developer.

The default controls offered by the WordPress version of TinyMCE do not allow for the easy editing of tables. I get it. Tables are yucky and remind most of us about a less-than-ideal time on the web, where everything was tables. All the way down.

But, there are times where tables are appropriate, semantic, and totally fine to use. When that time comes, TinyMCE Advanced will allow you to offer your clients easy control over their tables, amongst myriad other options.


There you have it. 3 plugins that I’ve been using for quite a while, and would recommend to anyone who’s using WordPress to build CMS websites for their clients or even their own projects.

Posted in development | Tagged , , , , , , , | Leave a comment

jQuery tutorial: slideToggle Method

jQuery is a JavaScript library that puts many user interface tools in the hands of web developers everywhere. Think of it as an easier way to write JavaScript for simple UI functions, paired with a number of great methods that address commonly desired animations and toggles.

Today’s subject is the slideToggle method.

Meet slideToggle();

As the name implies, this jQuery method allows you to toggle the visibility of an element based on a set of conditions (usually a click or tap event), with a slide animation to cover the transition between hidden and visible.

The Basics

From the jQuery API slideToggle page:

The JavaScript:

$( "#clickme" ).click(function() {
  $( "#book" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});

The Markup

<button id='clickme'>Click Me</button>
<div id="book">Book!</div>

The CSS

#book { display:none; }

Working Example: CodePen

In the above example, a button (#clickme) has a click event bound to it, that then triggers the slideToggle method on another element (#book). jQuery handles this by toggling the display:; CSS value between block and none to hide or show the element.

Given that, if your CSS has #book set to display:none; initially, then the first click of #clickme will show it, the next will hide it again, and so on. Conversely, if you have it set to display:block; initially, the first click will hide your element, the next will show it, etc.

The Details

The main option that you’ll want to become familiar with for everyday use of slideToggle is the duration, or the time that the slide takes to complete.

There are 2 simple language values that jQuery will accept for the duration: slow (600ms) and fast (200ms). You can also pass a number to jQuery in this case to create a duration that suits your needs.

Uses

One popular use for the slideToggle method is to show and hide website menus on mobile / smaller-screen devices. It allows you to maintain the same navigation for both desktop and mobile versions of your site, but you gain the ability to hide the menu behind a nice little button when it’s not in use.

Other great uses are to show / hide advanced options on a form, or simply to add interactivity to given section of your site.

Conclusion

Eventually, we’ll be able to rely on CSS to handle transitions like this, but if you’d like to enable these types of features for as many users as possible, JavaScript (jQuery in this case) is still a great route to go.

Posted in development | Tagged , , , , , , , | Leave a comment

A die hard Chrome fan’s hesitant return to Firefox.

Tell me your browser and I’ll tell you what kind of person you are.

Ok, maybe I won’t. That’s a lot of information to glean about someone simply from a piece of software that they probably haven’t actively chosen. You may not even know the answer. On many computers, Safari, Internet Explorer, Firefox and Chrome are all just different ways to say ‘the internet’. Someone buys a computer, turns it on, opens the default browser and never looks back.

For another segment of people–myself included–their browser is part of their technological identity. Recently, I had an identity crisis and I’m giving another browser a shot as my daily driver.

When I start using a system I almost immediately install Google Chrome. It feels light and quick, it has a great community, and its built-in dev tools are out of this world. It fits so well into my workflow as a front-end developer that it’s hard to consider using anything else. It’s great.

Until it’s not.

Chrome is seemingly so advanced that it can interpret your error-riddled code and see the forest for the trees. Things will work flawlessly until a lesser browser points out their flaws for everyone to see. This is usually evidenced by Chrome being able to auto-close tags that–when left open in the code–will stop other browsers in their tracks. Yes these bugs are caught in testing, but Chrome has made it so that they’re often caught much later and with much more effort.

The version of Flash that gets bundled with Chrome will–on occasion–pitch-shift any audio that it plays, making the user feel insane for a few weeks. Flash is bundled, as mentioned, so the version cannot be changed.

No sidebar. It’s 2013. We have widescreens. Let us make use of them.

A challenger appears.

Since I own a Windows laptop and an Ubuntu PC and work on a Windows PC, Firefox was the obvious candidate. In the interest of transparency, Firefox was the entire inspiration for this post.

From conversations with friends and other folks working on the web, Firefox was being praised as having fixed a number of the issues that I had when I switched to Chrome. Guess I should mention that I was a Firefox user who converted to Chrome around 2007 for various reasons.

I always seemed to be among the segment that experienced the infamous memory leak issue, which doesn’t seem to be plaguing me now.

Previously, you couldn’t pull a tab out of a Firefox window without reloading the tab, so pulling an in-progress YouTube video out of the main window would cause the video to reload. That has been addressed.

The dev tools in Chrome–much like its version number–also quickly surpassed those found in Firefox for me. They were much more intuitive and easy to use for a front-end developer. Not to sell short Firefox’s native dev tools, but any issues I had with them are quickly being remedied Firebug. You can even skin Firebug using Stylish (my personal fav is Monokai since it matches my text editor). My only issue thus far is that you can’t display both the Style and Layout tabs of the Firebug panel (that I know of) – functionality which exists in Chrome’s native dev tools.

The sidebar. For the love of god, the sidebar. It slices, it dices, it displays your bookmarks, and even lets you open sites in it! This is a non-issue for many people, but I can’t get enough of the sidebar. Most websites don’t take advantage of the approximately 1920×1080 resolution that is commonly found on the desk of a person working on the web. Bookmark http://m.twitter.com, then set it to open in the sidebar. Open the bookmark and it runs in the sidebar. Did I mention that the Twitter mobile site doesn’t auto-display images (yet)?

On the fence, kind of.

It’s been a few weeks now, and I’ve gotten good and used to Firefox again. I still find myself opening Chrome sometimes out of habit, and I’ve needed to install a few extensions in Firefox to restore all the utilities that I’m used to, mainly the Omnibar extension to mimic Chrome’s behavior of being able to search Google from the address bar (many ISPs hijack this traffic to show their own search results, mine included). Seems that training myself to use Ctrl+K instead of Ctrl+L was a bit too difficult.

Overall, it’s been a great experience and it will likely mean that Chrome takes a back seat until a reason appears to act otherwise.

Posted in tech | Tagged , , , | Leave a comment

An introduction to jQuery UI Tabs

In the world of front-end development, eventually you’re going to want to–or be asked to–deploy a user interface element that uses tabs to hide and show different pieces of content. Whether it’s as the main navigation for your site, or to showcase different content pieces within a given page, it’s good to have a reliable go-to solution to create those tabs.

A Brief History

A quick Google search for tabbed navigation will tell you that–as with many things web development related–there are as many solutions out there for creating tabs as you could ever want. Ranging from pure CSS to JavaScript and jQuery options, you can use whatever is most appropriate for you. Today we’re going to talk about one of the simplest implementations that I’ve come across, building on a library that you probably already have included in your site anyway: jQuery.

Enter jQuery UI

At this point, let’s assume an intermediate level of familiarity with jQuery. You’ve included it in your sites for a while, and used plugins for it. You’ve probably even cobbled together some of your own custom jQuery scripts that fit your needs. If you’re an advanced jQuery developer then you’re probably well aware of the content of this tutorial, but if not, read on.

jQuery UI is basically a predefined set of user interface options–that you can add to your existing markup with minimal effort–that builds on top of the base jQuery library. All you have to do is download and include it in your site to get started, or link it from your favourite CDN.

Starting Tabs

Once you have both libraries included (jQuery and jQuery UI), you’re ready to create your markup and start using tabs.

At its most basic, an implementation of tabs only requires a div that contains an unordered list of links that will be used for your navigation, the content that you’d like to show separated out into its own divs, and an initialization script.

Here’s the initialization script (include this after you call jQuery and jQuery UI):

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

and the markup is as follows:

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">Some content for tab 1</div>
    <div id="tab2">Some content for tab 2</div>
    <div id="tab3">Some content for tab 3</div>
</div>

I threw together a very quick working demo of this using the base jQuery UI Theme to show you what this looks like out of the box.

It Doesn’t Work!

If your script isn’t working, there are a few common things that I’ve run into in my travels:

Are you working with a CMS, primarily WordPress? If the answer to this is yes, you may already be familiar with jQuery’s .noConflict() method. You can either use this method, or get into the habit of replacing your $ with the word jQuery, like so:

<script>
    jQuery(function() {
        jQuery( "#tabs" ).tabs();
    });
</script>

Are you targeting the right element? In the above examples, #tabs is the element we want to target, not to be confused with .tabs();, which initializes the jQuery UI functionality. The element’s ID or class may be different in your markup, so be sure that you’re targeting the proper element.

Do you have jQuery and jQuery UI included before your initialization script? This one may seem obvious, but I’ve fallen victim to this one before, as I’m sure many others have.

Time For Some Polish

Once you have everything working, you can start to make the tabs look the way you want so they feel more organic to your site’s design. If you dig into the rendered source, you’ll discover that jQuery UI is adding classes to your nav elements, which will make it easy for you to get specific with your styling if you need.

Tabs adheres to the jQuery UI Theming CSS Framework, so you can work with the default classes that they give, or work with your own.

Happy Tabbing

Hopefully that’s enough of an introduction to jQuery UI Tabs to get you interested, up and running. Tabs are great to have in your front-end toolkit, and will help to add visual interest and utility to your pages.

Posted in development | Tagged , , , , , | Leave a comment

Using Sass to speed up your front-end development workflow

As front-end developers, we have an unending list of tools and resources at our disposal. When thought out and well chosen, they can alleviate problems we commonly run into, and shorten our deployment times. Whether it’s choosing the right text editor, framework, or server environment, there are many decisions to make.

Today, let’s talk a bit about Sass (Syntactically Awesome Stylesheets), and how incorporating it into your workflow can make it one of those time-saving problem-solvers we all love so much.

If you’re unfamiliar with Sass, it’s a preprocessor extension to CSS, and here’s a short description from the Sass website:

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

New Car Smell

If you’re excited about Sass, and you want to try it out on your next project, but you don’t know where to begin, There are a few steps you’ll need to take to get started. These steps will vary depending on your preferred method of installation.

You can install Sass a few different ways – one is with an app (there are multiple options spanning all platforms), and the other is via the command line. Sass is dependent on Ruby, so if you’re going to go with the command line option, then you’ll need to install Ruby first (I’d head straight here if you’re on Windows and don’t have Ruby already), then Sass, and then proceed from there.

Once you’ve got everything installed you’ll then need to decide on your method for compiling your Sass files into regular CSS files. I’ve tried the command line option on both Linux and Windows, and I’ve tried the LiveReload option for Windows. Your mileage may vary, but on my Windows machine, LiveReload compiles my Sass more quickly than the command line watch option by a large margin, so it’s the one that I use day to day. If you’re using the command line to ask Sass to watch for changes and you find that it’s taking a while to generate your .css files, I’d suggest trying out one of the app options.

Wading In

Once you have Sass installed and watching a folder for changes, it will wait until you’ve made a change to your .scss file, then it will compile those changes into a new .css file which gets uploaded to your server or development environment.

A great use-case for Sass are things like using simple variables to declare your project’s color scheme in natural language like assigning something like ‘$lightblue‘ a value of #AAD4FF so you can recall the word lightblue when coding rather than trying to remember the hex code or keep it in a clipboard somewhere.

Another good one is simplifying a font stack. Assign ‘$sans‘ to something like font-family:’Droid Sans’, Helvetica, Arial, sans-serif; and you have a quick way to reference your sans-serif font stack without having to type it out or copy/paste it every time.

Those are just some of the basics though, and if you really like the idea of these extensions to your daily CSS workflow, then I highly encourage that you take a closer look at everything that Sass can do for you. From darkening and lightening colours (color: lighten($lightblue, 10%);) to mixins that can allow a single variable to generate multiple lines of CSS code for you, Sass is pretty powerful when used well.

A Cautionary Tale

Sass is powerful, and can make your life a lot easier. However, as with most good things, it’s wise to practice some moderation. Nesting your CSS selectors and using lots of mixins are great ideas in practice, but as many people in the community have pointed out, they can lead to a few problems if not used sparingly.

Bloating in the CSS output file and overly specific selectors are two common pitfalls. If you nest too many selectors and your styles become too specific (and the names begin to become very lengthy [imagine: body #container #header .wrap nav ul li a vs. nav ul li a]), they are both hard to reuse and hard to override without resorting to the use of !important.

In Conclusion

If you decide to incorporate Sass or some similar CSS preprocessor into your workflow, it will be difficult to remember what life was like without it. Get to know it well and use it in moderation and it will be a great help to your front-end development workflow.

Posted in design, development, tech | Tagged , , , , , , | Leave a comment