Archetyped Smart Tools Sun, 13 Apr 2014 05:35:32 +0000 en-US hourly 1 What’s New in Simple Lightbox 2.3.0 Mon, 07 Apr 2014 19:11:10 +0000 A look at the new features and enhancements in this major update to Simple Lightbox.

The post What’s New in Simple Lightbox 2.3.0 appeared first on Archetyped.

191 Commits Ago…

It seems like only yesterday that Simple Lightbox (SLB) 2.2.2 was set free upon the world, but 191 commits have actually taken place since v2.2.2 was released barely more than a month ago.

Simple Lightbox 2.3.0 is a big update with lots of new features and enhancements. Let’s take a look at what’s new in this release.

Activate Anywhere

You asked for it, so here it is. slb_activate() is a new template tag that allows you to activate content with SLB anywhere. Themes and plugins can now activate content that is not directly supported by SLB, such as featured images in templates or plugin-specific output.

Content activated with slb_activate() supports all of SLB’s awesome functionality you’re used to in natively-supported content areas such as:

  • Intelligent link activation
  • Support for WordPress attachments
  • Use metadata from your site’s media library (titles, captions, descriptions, etc.)
  • Support for additional content types (video, etc.) via add-ons
  • Shortcode support (see next section)


slb_activate() is used like a standard WordPress template tag. Simply pass the content to slb_activate() and it will process and return the activated content.

$content = 'content with links and stuff to activate';
if ( function_exists('slb_activate') )
    $content = slb_activate($content);
echo $content;

New Shortcodes

Simple Lightbox has two new shortcodes in v2.3.0 that give you even greater control over how content is activated by SLB:

Note: Due to formatting issues with WordPress, shortcodes in the examples below use curly braces ({ / }) in place of square braces ([ / ]) normally used for shortcodes. Make sure to use square braces in your posts when using these shortcodes.


You can now manually exclude parts of a post from being activated by SLB by using the slb_exclude shortcode. Any content between the shortcode’s opening and closing tags will not be activated by SLB.

Some text here.  Links up here will be activated normally.

{slb_exclude}Nothing between these tags will be activated by SLB{/slb_exclude}

More text here. This content will be activated normally.


You can also manually group links in content using the slb_group shortcode. Grouped links are displayed in the lightbox as a slideshow.

Some text here.

{slb_group}Links between these tags will be grouped together.{/slb_group}

More text here.

By default, links grouped using the slb_group shortcode will be assigned to an automatically-generated group. If you want to assign a specific group to some links, you can use the id attribute in the shortcode. This allows you to group links in different parts of a post (or across multiple posts) together.

Some text here

{slb_group id="group-1"}Links in here will be grouped together{/slb_group}

More text here

{slb_group id="group-1"}These links will be in the same group as the ones above{/slb_group}

New Filters

Several new filters have been added to SLB 2.3.0, allowing users and developers to extend and customize SLB’s behavior.


Filter content before it is processed by SLB.

  • Parameters
    1. $content (string) – Content to be processed by SLB.
  • Return (string) – Updated content to be processed by SLB


Filter content after it has been processed by SLB.

  • Parameters
    1. $content (string) – Content processed by SLB
  • Return (string) – Updated content


Filter a link’s attributes before the link is saved.

  • Parameters
    1. $attributes (array) – The link’s attributes (key = attribute name / value = attribute value)
  • Return (array) – Updated link attributes


Filter the properties associated with an item activated by SLB (e.g. image properties from WordPress’ media library).

  • Parameters
    1. $properties (object) – Item properties
  • Return (object) – Updated item properties


Filter content before instances of the slb_exclude shortcode are processed.

  • Parameters
    1. $content (string) – Content before slb_exclude shortcodes are processed.
  • Return (string) – Updated content


Exclude specific shortcodes from activation by SLB.

  • Parameters
    1. $shortcodes (array) – List of shortcodes to exclude from activation.
  • Return (array) – Updated list of shortcodes to exclude.


Automatically group links in content generated by specific shortcodes when activated by SLB.

  • Parameters
    1. $shortcodes (array) – List of shortcodes to group automatically.
  • Return (array) – Updated list of shortcodes to group.

Bye-Bye Default Title

When you upload images to WordPress’ media library, WordPress will automatically generate values for the required metadata fields if you do not set values for these fields yourself.

One of the required fields is the image’s title field. By default, WordPress uses the image’s file name when automatically-generating a title. This has been a point of confusion for some users who think the image’s file name is being displayed in the lightbox, when in fact SLB is using the title from the media library.

You now can control whether to display the default WordPress-generated title using the “Enable default title” option in SLB’s settings. When this option is disabled, the default WordPress-generated title will not be displayed and the title will instead be blank in the lightbox.

Faster Client-Side Loading

Optimized versions of Simple Lightbox’s JavaScript files are used to improve client-side loading. By removing unnecessary white space, SLB’s client-side footprint is reduced by nearly 60%.

Of course, development versions are still included if you want to peruse the code or load them instead of the optimized production files.

Ready for the Future

WordPress 3.9 is coming and SLB is ready for it. SLB has been tested against the beta versions of WordPress’ upcoming update to make sure that SLB continues to run perfectly when the WordPress 3.9 is officially released.

Clean & Polish

Aside from that, SLB’s code has been cleaned and polished to make SLB run faster and smoother. SLB was already fast and now it’s faster.

A Big Update, The Next One Has Already Begun

SLB 2.3.0 was a big update with a lot of new features and optimizations. Now that 2.3.0 is out the door, work can continue on the next update.

Yep, you read that right, work on SLB 2.4 is already underway and it’s going to make SLB even faster and more robust.

For your reference, here’s the full list of changes in SLB 2.3.0:

  • Update: WordPress 3.9 support
  • Update: Support URI, content
  • Add: Enhanced grouping support
  • Add: Shortcode: slb_group
  • Add: Shortcode: slb_exclude
  • Add: Filter: slb_pre_process_links
  • Add: Filter: slb_post_process_links
  • Add: Filter: slb_process_link_attributes
  • Add: Filter: slb_media_item_properties
  • Add: Filter: slb_pre_exclude_content
  • Add: Filter: slb_exclude_shortcodes
  • Add: Filter: slb_group_shortcodes
  • Add: Template Tag: slb_activate() – Manually activate content
  • Add: Option to enable/disable usage of WordPress-generated media title
  • Add: Dev mode
  • Add: Theme breakpoints
  • Optimize: Remove deprecated code
  • Optimize: Remove deprecated legacy support
  • Optimize: Content exclusion performance
  • Optimize: Content grouping performance
  • Optimize: Harden code against third-party post query modifications
  • Optimize: Utility code
  • Optimize: Loading process
  • Optimize: Client-side code
  • Optimize: Client-side: Code loading
  • Optimize: Client-side: Simplified dependency detection
  • Optimize: Client-side: Default Theme transitions
  • Optimize: Grunt: Cleanup
  • Optimize: Grunt: Path abstraction
  • Optimize: Grunt: Task loading
  • Optimize: Grunt: Selective file compilation


  • Simple Lightbox — The only lightbox custom-built specifically for WordPress.

The post What’s New in Simple Lightbox 2.3.0 appeared first on Archetyped.

]]> 0
Tools I Use: Checkvist Wed, 26 Mar 2014 18:11:16 +0000 As the size and complexity of your projects grow, managing tasks becomes a task in itself. Here's why Checkvist is the tool I use to manage my tasks and projects.

The post Tools I Use: Checkvist appeared first on Archetyped.

As the size and complexity of your projects grow, managing tasks becomes a task in itself. What you need is a tool manage and organize your tasks and then get out of the way.

The selection of task managers is vast. I know, I’ve tried them all.

The tool I use is Checkvist.

Checkvist logo

Who is it for?

If you have things to do, then Checkvist can work for you. Everyone from startups to soccer moms can benefit from a good task manager.

Here are just a few of the things you can use Checkvist for:

  • Software development
  • Design projects
  • Project management
  • Travel planning
  • Film production
  • Business development
  • Meeting agendas

Task Management vs Project Management

A task manager focuses primarily on your tasks– a to-do list, if you will– whereas a project manager usually includes task management, but also provides additional tools for communication, collaboration, and visualizing a project’s current state.

While Checkvist includes some collaboration functionality, everything is centered around your tasks.

Full list of tasks

Full list of tasks

That said, you can definitely manage large projects with Checkvist depending on your needs and workflow. I manage dozens of projects with Checkvist, including those requiring collaboration with others.

Let’s look at what makes Checkvist so much better than the other task managers out there:

Dive Right In

No project setup, team members, contact information, milestones, or due dates. In Checkvist, you just create a new list:

New list

New list

You can immediately start adding tasks to your new list:

Tasks added to new list

Tasks added to new list

There’s nothing to slow you down in Checkvist. Everything is very simple and straightforward.

Keyboard Driven

It’s rarely necessary to take your fingers off the keyboard when using Checkvist.

When you name a new list and hit enter, a new text field is ready and waiting for your first task.

Adding first task

Adding first task

Add your first task and hit enter. A new text field for your next task appears below it.

Adding another task

Adding another task

Creating a subtask is just as simple. Just hit tab in the text field and the field is shifted to the right and is now a subtask of the task directly above it.

Shift task to subtask

Shift task to subtask

Navigate and select tasks using your keyboard’s arrow keys. If the task you want is far away, using the mouse is also an option.

Selecting a task

Selecting a task

Just hit enter to create a new task under the selected task.

Inserting a new task

Inserting a new task

When you’ve completed a task, select it and hit space.

Complete a task

Complete a task

Type tt to bring up the UI to tag tasks for even more refined organization.

Tagging UI

Tagging UI

You get the idea– your fingers stay on the keys 99% of the time in Checkvist, keeping you from wasting time reaching for the mouse every time you want to make a change to your list.

Pro tip: Press ? to see all available keyboard shortcuts in Checkvist.

Unlimited Nesting

Breaking a big task down into smaller chunks is a great way to make it more manageable. Checkvist allows you to break your tasks down to the atomic level if that’s what you want.

Nested tasks

Nested tasks

I don’t know how deep my subtasks go, but at least I know I won’t be limited by Checkvist. Unlimited nesting makes Checkvist flexible enough for any project.

Task Focus

Nesting tasks is great, but when you’re 10 levels deep in subtasks, it can be difficult to focus on a specific task.

Busy list

Busy list

Thankfully Checkvist has your back with hoisting. Just select a subtask and hit Shift → to display only the selected task and its subtasks.

Focused subtask

Focused subtask

Your list has not been modified, just your view has. Hit Shift ← to once again view the full list of tasks.

Flexible View Modes

When you’ve completed a lot of tasks, things can start to look a bit messy.

Lots of completed tasks

Lots of completed tasks

Just type hc to toggle the visibility of completed tasks to make it easier to focus on the remaining tasks.

Hide completed tasks

Hide completed tasks


Whether you’re planning a vacation with your family or working on a project with a large team, Checkvist’s sharing feature makes it easy to collaborate with others.

Sharing lists

Sharing lists

Send collaborators an invitation (via email or link) to access one of your lists. They can then work on the list by adding, removing, and (most importantly) completing tasks.

Import & Export

Tasks can be imported in a variety of formats, making moving your tasks over to Checkvist relatively painless.

Fully nested lists can be imported and the tasks can also be nested under the currently-selected task in a list.

Import tasks

Import tasks

Tasks Imported

Tasks Imported

Of course, task can also be exported in a variety of formats for integration with other tool and for backup purposes.

Export list

Export list

Note: Checkvist’s “Pro” offering automatically stores 10 days of backups so that any of your lists can be restored if you inadvertently delete a bunch of tasks or something.

The Holy Grail?

Checkvist is the best task manager I’ve found for my needs and workflow. It helps me organize my tasks without getting in the way so that I can focus on the work.

Of course, there are definitely some features I would love to see, which I’ll be detailing in an upcoming series of posts.

I’d definitely recommend giving Checkvist a look. It is likely to become a tool you use.


  • Checkvist — The most streamlined task manager around. Feed it your tasks and watch it go.

The post Tools I Use: Checkvist appeared first on Archetyped.

]]> 2
Redesigning Archetyped: Side Project Wed, 19 Mar 2014 17:30:41 +0000 Sometimes it is good to switch gears and work on something else for a bit to get some much-needed perspective.

The post Redesigning Archetyped: Side Project appeared first on Archetyped.

Sometimes it is good to switch gears and work on something else for a bit to get some much-needed perspective.

Case in point: I’ve been so deep in Archetyped’s redesign that things were starting to blend together.

I was losing focus.

So I put this site’s redesign on pause and started working on something that would let me look at this project with fresh eyes.

That’s right another redesign.

The difference was that the scope of this side project was much smaller and more straightforward. Really, it was more of a refresh than a full redesign. At least that was the idea…

In the end, a 2-day project turned into a 5-day project, but the result is a fairly dramatic visual transformation that I’m very happy to have out in the wild: Suggestion of Motion

Suggestion of Motion (New Design)

New Design

Suggestion of Motion (Old Design)

Old Design

Having an updated site is nice, but the benefits didn’t stop there. In fact, the side-project’s biggest benefit was its impact on Archetyped’s redesign.

A Prototype for Archetyped

Suggestion of Motion’s previous design was not nearly as old as Archetyped’s, having been most recently redesigned in 2012. That said, it was in need of some sprucing up to accommodate the evolving direction of the site.

However, Suggestion of Motion’s focus on photos and videos is completely different from Archetyped’s focus on code and web design– how does this side project give me any perspective on Archetyped’s redesign?

While not everything in Suggestion of Motion’s redesign will transfer over to Archetyped, it does share several features planned for this site.

Using Suggestion of Motion’s new design, here is a preview of some of the things you can expect to see in Archetyped’s upcoming redesign:

Focus on Content

Sidebars have been banished on Suggestion of Motion.

No Sidebars

Unless the goal of a page is to send users away to another page, sidebars have no place on a website. Sidebars only serve to distract visitors from the primary content on a page. Sidebars contain secondary content, but it’s placed side-by-side with the primary content!

Wonder why your bounce rate is so high? It’s because you’re sending visitors away with a more interesting link in the sidebar!

That’s not to say that secondary content has no place on a page, just that it should take a secondary position. In most cases, this means that content usually found in the sidebar will show up below the primary content.

Likewise, post metadata will be…somewhere. Details like publication date and tags do have value, but just like on Suggestion of Motion, these things will be absent in the initial release of Archetyped’s redesign.

While useful, metadata is simply not important enough to delay release. This is one of the things I had to get perspective on by switching to a side project– I was digging deeper and deeper into the minutiae of Archetyped’s redesign. If I kept going, who knows when the redesign would ship?

More Visual

Suggestion of Motion is focused on stories told through photography and video, so a highly visual design makes sense.

Visual Post Header

While it might not be evident at first glance, an emphasis on visuals also makes sense for Archetyped’s more technical slant.

Visuals help to set the tone of the content regardless of the context. Though code may make frequent appearances, you are still telling a story. Visuals can help tell that story more effectively by setting the stage for the mindset a reader should have.

As a result, visuals will play a larger role in Archetyped’s upcoming design.

No Comments

Suggestion of Motion has no comments and soon, neither will Archetyped.

Encouraging healthy discussion is very important– it builds a sense of community and helps good ideas grow into great ones.

I’ve enjoyed the discussion we’ve had on this site, but I’m just not so sure that standard WordPress comments are the best way to facilitate discussion.

Discussions on this site’s content are already being held all over the web, so I prefer to let that continue as organically as possible. Attempting to box the discussion in to a single website limits the reach an idea can have.

In the future, I may look into tools like Disqus to aggregate discussions from across the web to help users more easily join in the conversation after reading a post. For the moment though, I’m using Twitter’s web intents to make it simple for visitors to share their thoughts on a post.

Easy discussion with Twitter Web Intents

Step Out of the Shadows

Looking at Suggestion of Motion and Archetyped side by side, you can clearly see a stark difference.

Light vs Dark

Suggestion of Motion has always been light and bright, while Archetyped has been dark and stark.

Archetyped is coming into the light. It is no longer my “underground lab” and the redesign reflects that. A brighter appearance is more inviting, while improved white space gives users room to breath and improves readability.


A responsive design is far overdue. Using Suggestion of Motion as the model, I was able to suss out the ideal breakpoints to provide the best experience for various devices and screen sizes.

Archetyped’s content will soon look great on any device as well.

Coming Soon to a Screen Near You

By focusing on a side-project with a smaller scope, I was able to get perspective on the big picture. Content and audience differ, but the structure and standards developed for Suggestion of Motion are just as useful on more involved sites like Archetyped.

Though there was some time lost on Archetyped’s redesign, it was completely worth the wait as this structure is useful for Archetyped and for future projects as well.

The next step is merging the new structure into Archetyped’s redesign. From there I can make adjustments to better fit this site and get an initial release out the door!


The post Redesigning Archetyped: Side Project appeared first on Archetyped.

]]> 0
Simple Lightbox: WooCommerce Add-On Fri, 14 Mar 2014 01:48:34 +0000 Supercharge your WooCommerce shop with the power of Simple Lightbox! What is the WooCommerce Add-on? Automatically display WooCommerce product images and other supported media in a lightbox with Simple Lightbox– the custom-built lightbox for WordPress. Your WooCommerce product pages will never be the same! Special Discount (Limited Time) Simple Lightbox’s WooCommerce Add-On is currently available ...

The post Simple Lightbox: WooCommerce Add-On appeared first on Archetyped.

Supercharge your WooCommerce shop with the power of Simple Lightbox!

What is the WooCommerce Add-on?

Automatically display WooCommerce product images and other supported media in a lightbox with Simple Lightbox– the custom-built lightbox for WordPress.

Your WooCommerce product pages will never be the same!

Special Discount (Limited Time)

Simple Lightbox’s WooCommerce Add-On is currently available for 50% off during the limited-time beta period. Once the beta period has ended, the discount will end.

You can determine the future of the WooCommerce add-on by downloading the beta and providing feedback.

Get the Video Add-on for Simple Lightbox – $18 $9


  • Display Product images in the lightbox
  • Display links in Product content areas in the lightbox (description, short description)
  • Group product images into separate slideshow
  • Full control over activation, grouping, etc. via Simple Lightbox’s admin settings


Installation Instructions

  1. Download Simple Lightbox WooCommerce Add-on.
  2. In WordPress’ Admin Plugins page, click Add New.
  3. On the Install Plugins page, click “Upload” and select the Video Add-on ZIP file.
  4. Click Install Now.
  5. Activate the WooCommerce Add-on after it has been installed.

Send Feedback

The post Simple Lightbox: WooCommerce Add-On appeared first on Archetyped.

]]> 2
Laser-Guided User Support with GitHub Wed, 12 Mar 2014 17:30:32 +0000 Learn how to use GitHub's API to guide users through creating support requests that contain exactly what you need.

The post Laser-Guided User Support with GitHub appeared first on Archetyped.

Support requests are essential for helping users get the most out of your software. If a user is experiencing a problem with your software, providing a way for them to report the issue is the first step toward resolving it so that they can get back to enjoying what you’ve created.

For a support request to be effective though, it needs to be complete, and this is where the process can fall apart. Without a complete report, you cannot properly evaluate– much less resolve– a user’s issue.

This tutorial will show you how to use GitHub’s API to guide users through creating complete support requests that contain exactly what you need to evaluate and resolve their issue.

The Problem: Incomplete Support Requests

One of my favorite tools for managing user support requests is GitHub’s Issues feature, primarily because it’s so simple and straightforward. If someone can send an email, they can submit a support request to you on GitHub.

Blank New Issue Form on GitHub

Blank New Issue Form

In some ways though, GitHub’s issue submission form can be too simple. The form is a blank canvas, making it difficult for a user to know what information is required to get the help they need.

You could provide instructions for users in your project’s wiki or on your website before sending users to GitHub. For example, all of my GitHub projects have a “Reporting Issues” page in the wiki to help users submit complete support requests.

Support Request Instructions

Support Request Instructions

The problem is that some users might not see those instructions (or take the time to read them) before reaching the issue submission form, which brings us back to our original predicament– incomplete support requests.

The Solution: Guided Support Requests

What you need is a way to guide users through making a complete support request directly on the issue submission page.

This does two very important things:

  1. Prompts users to provide the information you need to effectively evaluate their issue.
  2. Creates a standardized structure for support requests that will help you to evaluate a user’s problem more efficiently.

For example, prefixing the title with “Issue:” would make it clear that the user is reporting a problem. Even better, automatically populating the report’s body with prompts for the user would allow them to simply fill in the blanks to provide the details you need.

Pre-filled New Issue Form on GitHub

Pre-filled New Issue Form

Sounds awesome, right? Too bad GitHub’s submission form isn’t customizable.

Except, it is.

GitHub API to the Rescue

Using GitHub’s API, you can create a customized issue submission form to guide users through the support request.

In truth, you won’t actually be using the API to do this– all you really need is the API documentation.

GitHub Issues API documentation

GitHub Issues API documentation

The magic is that the same parameters used to work with issues via GitHub’s API can be used directly on the issue submission page itself allowing you to create a link that customizes the form the user sees when submitting a new support request.

Step 1: Get the Base URL

First you need the base URL for your project’s issue submission form. This is the form’s URL for the GitHub project used throughout this tutorial:

Step 2: Add a Title Prefix

Now we’ll customize the form’s title by prefixing it with “Issue: ” so that it’s clear what kind of report the user is submitting.

To do this, we add the aptly-named title parameter to the base URL:

Make sure to properly encode the title prefix before adding it to the URL.

Now when a user clicks your custom link, the title field will automatically contain your prefix.

New Issue Form with pre-filled title

New Issue Form with pre-filled title

Step 3: Add a Report Template

Next we’ll add a template to the form’s body to prompt the user to provide specific details about their problem. Here are some basic details that you may want from a user for a web-based application:

  • Description of problem
  • URL of page exhibiting the problem
  • Web Browser(s) that exhibit the problem
  • The version of your software that they are using

GitHub’s issues use Markdown, allowing you to create a nicely formatted template for support requests:

## Description of issue

## URL of page exhibiting the issue

## Web Browser(s) that exhibit the issue

## Installed Software Version

Encode your template and add it to the submission form using the body parameter:

Now when a user clicks your custom link, the form will contain your template and all they have to do is fill in the blanks:

Pre-filled New Issue Form on GitHub

Pre-filled New Issue Form

Step 4: Distribute Custom Link

Finally, update any links that direct the user to your GitHub project for making support requests (e.g. on your website, in your project’s wiki, etc.) with your customized URL that will guide users through the submission process.

Bonus: Infinite Possibilities!

Using URL parameters to customize the issue submission form is even better than being able to edit the page directly because it gives you so much more flexibility. By modifying the parameters in the URL, you can use GitHub’s issue reporting functionality for much more than just support requests!

For example:

What uses can you find for GitHub’s issue reporting? Share your templates on with us!

Target Acquired

Everybody wins with guided support requests. Users will get their issues resolved faster because they provide the necessary information from the start and you will have a nicely structured support request that is quick and easy to evaluate.

Of course, the key is making sure you ask the right questions in the customized form so that you actually get the details you need to properly evaluate their issue. Fortunately, you can always update your custom links to refine the template if necessary.

Your Turn

What questions do you ask users to get useful support requests? Tweet your suggestions so we can can improve the user support experience together!


The post Laser-Guided User Support with GitHub appeared first on Archetyped.

]]> 0
Become a WordPress Troubleshooting Ninja Wed, 05 Mar 2014 17:30:43 +0000 This step-by-step guide will transform you into a troubleshooting ninja that can quickly pinpoint the root of any problem on your WordPress site and remove it with exacting precision.

The post Become a WordPress Troubleshooting Ninja appeared first on Archetyped.

So you’ve switched themes or installed/updated some plugins and now your WordPress site is not working properly. Worse yet, you have no idea what the problem is.

First of all, don’t worry– we’ve all been there.

Secondly, troubleshooting a problem on your WordPress site is pretty simple and straightforward. This step-by-step guide will transform you into a WordPress troubleshooting ninja that can quickly pinpoint the root of a problem on your site and remove it with exacting precision.

Ninja training begins now.

The Goal: Identify the Conflict

More often than not, when your WordPress site is not working properly after switching themes or updating plugins, it is due to a conflict. There are so many different themes and plugins available for WordPress that sometimes one component will have a compatibility conflict with another.

Therefore, the main goal when troubleshooting a problem on your WordPress site is identifying the conflict.

Some examples of conflicts on a WordPress site are:

  • Outdated theme or plugin that uses code no longer compatible with the current version of WordPress.
  • Naughty theme or plugin that does things that are discouraged on a WordPress site.
  • Incompatible theme or plugin that conflicts with another component (theme or plugin) on the site.

Thankfully, regardless of the reason for the conflict, the same 4 steps can be used to identify the conflict.

Step 1: Start with a Clean Slate

Before you can do anything else, you need to make sure your WordPress site works properly without any third-party components such as themes or plugins.

1.1: Switch to a Default Theme

First, temporarily switch your theme to one of the default themes that come with WordPress such as Twenty-Fourteen.

Activate Twenty-Fourteen Theme

  1. Log in to your site’s WordPress admin.
  2. Go to Appearance > Themes
  3. Activate the Twenty-Fourteen theme.

1.2: Disable Plugins

Next, we need to temporarily deactivate the site’s plugins.

Bulk Deactivate WordPress Plugins

  1. While still in your site’s admin, go to Plugins.
  2. Select all plugins in the list.
    Ninja tip: Select all plugins at once by clicking the checkbox in the top row of the plugins list.
  3. From the Bulk Actions menu, select Deactivate and click Apply.

1.3: Confirm Functionality

With your site back to its default state, any conflicts caused by third-party components should no longer be present.

Browse through your site to confirm that the problem is no longer occurring.

The Problem Still Exists

If your site is still not working properly when using a default theme and all plugins have been deactivated, then you have a problem with WordPress itself.

Your next steps:

Once you have WordPress working properly in its default state, you can continue following this guide if you are still experiencing a problem.

Step 2: Test the Theme

Now that you have confirmed that the site works properly in its default state, it’s time to test the third-party components, starting with your custom theme.

  1. In the site’s admin, go to Appearance > Themes
  2. Reactivate your custom theme.
  3. View the site to see if the problem has returned.

The Problem Has Returned

If the problem has returned, then the custom theme is causing the conflict. Switch to a different theme and contact the theme’s developer to report your issue.

Step 3: Reactivate Plugins

With the custom theme in the clear, we now move on checking plugins for conflicts.

  1. Activate the Twenty-Fourteen theme to return the site back to a default state (see step 1.1).
  2. Go to Plugins.
  3. Activate a single plugin (any plugin).
  4. View the site to see if the problem has returned.
  5. If the site works properly, repeat until all plugins have been activated.

The Problem Has Returned

The last plugin to be activated before the problem returned is the one causing a conflict. Disable the plugin and contact the plugin’s developer to report the issue.

You should continue to reactivate plugins one-by-one to confirm that no other plugins are causing conflicts as well.

Step 4: Test Theme with Plugins

So far you have confirmed that:

  1. The custom theme works.
  2. All plugins work.

The final step is to confirm that there are no conflicts between the custom theme and the plugins.

  1. With all plugins activated, activate your custom theme (see step 2).
  2. View the site to see if the problem has returned.

If the issue has returned, then you have a conflict between your theme and at least one plugin.

  1. With the custom theme still active, deactivate all plugins (see step 1.2).
  2. Activate plugins one-by-one (see step 3) to identify which plugin is conflicting with your custom theme.

The Problem Has Returned

The last plugin to be activated before the problem returned is the one causing a conflict. Disable the plugin and contact the plugin’s developer to report the issue. Be sure to note what theme you are using in your report.

You should continue to reactivate plugins one-by-one to confirm that no other plugins are causing conflicts as well.

Troubleshooting Ninja

Identifying the conflict is the most important thing you can do when you experience a problem on your WordPress site. Armed with this information, you know exactly what component needs to be disabled and who to contact to get the issue resolved.

You are a noob no longer– you are now a WordPress Troubleshooting Ninja who can find the root of any issue on your site now and in the future. Sweet.

Share the Guide

A ninja does not hoard knowledge. Share this guide so that others can join the ranks of troubleshooting ninja as well!

You can also send me a tweet if you have any questions or comments.

The post Become a WordPress Troubleshooting Ninja appeared first on Archetyped.

]]> 0
SLB 2.3 (Beta) Wed, 05 Mar 2014 04:50:35 +0000 Beta test resources for Simple Lightbox 2.3.

The post SLB 2.3 (Beta) appeared first on Archetyped.

Welcome to the beta for Simple Lightbox 2.3! Below you will find information and links to the beta releases for this version.


Thanks for participating in the beta testing. If you have any questions, issues, or requests, please submit them via the link below:

Feedback & Support


Beta 3


  • Add: Grouping support
  • Add: [slb_group] shortcode
  • Add: [slb_exclude] shortcode
  • Add: Filter: pre_process_links
  • Add: Filter: post_process_links
  • Add: Filter: pre_exclude_content
  • Add: Filter: exclude_shortcodes
  • Add: Filter: group_shortcodes
  • Update: WordPress 3.9 support
  • Optimize: Remove deprecated legacy support
  • Optimize: Content exclusion performance
  • Optimize: Content grouping performance
  • Optimize: Utility methods
  • Optimize: Harden code against third-party post query modifications

Beta 2


  • Add: Manual link activation template tag (slb_activate())
  • Add: Option to enable/disable usage of WordPress-generated media title
  • Add: Filter: Link attributes (slb_process_link_attributes)
  • Add: Filter: Media properties (slb_media_item_properties)
  • Add: Filter: Support link text (slb_admin_plugin_row_meta_support)
  • Optimize: Client-side object detection
  • Optimize: Remove deprecated code
  • Optimize: Loading process
  • Update: Support URI, content

Beta 1


  • Add: Production versions of client-side code (JS)
  • Add: Dev mode
  • Add: Theme breakpoints
  • Optimize: Simplified client-side dependency detection
  • Optimize: JS standardization
  • Optimize: JS:Admin
  • Optimize: JS:Image Handler
  • Optimize: JS:Template Tags (UI, Item)
  • Optimize: Default Theme transitions
  • Optimize: Grunt cleanup
  • Optimize: Grunt path abstraction
  • Optimize: Grunt task loading
  • Optimize: Grunt selective file compilation

The post SLB 2.3 (Beta) appeared first on Archetyped.

]]> 0
Browser-Centric Design Wed, 26 Feb 2014 17:30:41 +0000 While a website's design might begin in Photoshop, you need to move into browser-centric design as soon as possible.

The post Browser-Centric Design appeared first on Archetyped.

While a website’s design might begin in Photoshop, you should be doing most of your design work directly in the browser.

In fact, one of the things I’m learning from redesigning Archetyped is that you might actually want to get out of Photoshop and into the browser even sooner than you think.

A Case for Browser-Centric Design

Why design in the browser? The main reason is that browser-centric design will save you time. Vast changes to the design can be made with a single line of HTML or CSS instead of furiously clicking around in Photoshop duplicating layer groups, changing background colors, selecting different fonts, repositioning layers, etc.

The browser is also where your design will be viewed by the world. You could tweak layers and transfer modes in Photoshop all day long, but it’s just a facade– there are just some things you won’t realize until you see the design in its natural environment– the browser.

The tools are now available to effectively design in the browser. It just makes sense to start using the browser as early in the design process as possible.

Okay, enough validation, let’s dive in. In the spirit of working faster, I’m going to give you the perfect foundation to jump-start your transition into browser-centric design (BCD).

Start with a Strong Foundation

Remember learning to write an essay in grade school? I’d wager that the first thing you learned was the structure of an essay:

  • Introduction
  • Body
  • Conclusion

Web pages are very similar to essays in that they have the same basic structure:

  • Header (Introduction)
  • Main Content (Body)
  • Footer (Conclusion)

Let’s look at that in HTML:

    <!-- Header content -->
    <!-- Main content -->
    <!-- Footer content -->

Never before have we had HTML markup as straightforward as in HTML5. With tags like <header>, <main>, and <footer>, the HTML is basically self-explanitory. Look at the comments in the HTML if you have any questions.

To effectively design in the browser as smoothly as possible, we need to start with a good structure as the foundation of our page:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
        <!-- Header content -->
        <a class="site-title" href="#">
            <h1>Site Title</h1>
        <nav class="pri">
            <!-- Primary Navigation -->
        <!-- Main content -->
        <!-- Footer content -->

The page’s title and primary navigation have been added to the header section, but otherwise it’s exactly the same as the first example.

Happy Content

Though the header and footer will generally stay the same on all of a site’s pages, the main content will vary from page to page.

This HTML structure makes it easy to build templates for the different types of pages on your site (single posts, archives, etc.) because now you only need to focus on what goes inside the <main> element.

This will be even more useful when you convert the HTML into a WordPress theme. A future post will discuss how to save a massive amount of time building templates for WordPress using structured HTML like this.


This simple structure is perfect for styling with CSS as well. By using meaningful tags like <header> and <footer> instead of <div> tags, we can easily target the primary sections of the page.

/* Header styles */
body > header { }

/* Main Content styles */
main { }

/* Footer styles */
body > footer { }

The body > header and body > footer selectors target only the top-level <header> and <footer> elements so the elements don’t need attributes (ID, class names, etc.) that would only add noise to the HTML.

Also, as there can only be one <main> element on a page, the selector is incredibly simple.

Simple HTML = Simple CSS.

No ID, No Problem

You may notice that some elements, such as the page’s primary navigation, do have addtional attributes.

<nav class="pri">
    <!-- Primary Navigation -->

A class name is added to these elements for flexibility. While there should only be one top-level <header> and <footer> element in a page, there may be multiple navigation elements in the header (secondary navigation, etc.).

By adding the pri (as in primary) class to this nav element, we can easily target and style the page’s primary navigation in the header:

/* Primary Navigation styles */
body > header > nav.pri { }

But then, why use a class name when we could give the element an ID and target it directly?

<!-- Using ID attribute instead of class attribute -->
<nav id="nav-pri">
    <!-- Primary Navigation -->

Targeting this element in CSS would be straightforward:

/* Primary Navigation (using ID selector) */
#nav-pri { }

In a word: flexibility.

IDs can only be used once per page, so all style rules set using the #nav-pri selector can only affect a single element on the page.

By Contrast, a class name can be added to multiple elements on a page. Therefore, using a class name allows you to set baseline styles common to all primary navigation elements on the page.

/* Baseline primary navigation styles */
nav.pri { }

Targeting specific navigation elements on the page is also possible by using selectors with more specificity.

/* Primary Navigation in header */
body > header > nav.pri { }

Of course, you can also an ID attribute in addition to a class name.

<nav id="nav-pri" class="pri">
    <!-- Primary Navigation -->

This would allow you to augment the baseline styles for a specific element regardless of its position on the page.

/* Baseline primary navigation styles */
nav.pri { }

/* Specific navigation element */
#nav-pri { }

However, with a good document structure the results are the same in both examples, making the ID attribute unnecessary and redundant.

Pro tip: Start with class names and add IDs only when necessary.

I’m on board, what’s next?

Now that you have a strong foundation for BCD, it’s time bring in the design! In the next post we’ll use CSS to transfer our design from Photoshop to an actual web page.


  • HTML5 Doctor — The latest and greatest iteration of HTML makes great strides toward a semantic (meaningful) internet. Check out this site for tutorials and articles on how you can add meaning to your site’s content through code.
  • The <main> element — There can be only one! (and that’s a good thing)
  • Redesigning Archetyped — Archetyped is being redesigned from the ground-up. Read about the design from the beginning.

The post Browser-Centric Design appeared first on Archetyped.

]]> 0
Simple Lightbox: Customizing Theme Styles Wed, 19 Feb 2014 17:30:45 +0000 This brief tutorial shows you how easy it is to create a custom lightbox theme with just a bit of CSS.

The post Simple Lightbox: Customizing Theme Styles appeared first on Archetyped.

Simple Lightbox’s theme engine is incredibly robust, but it is not complex. You can completely change the appearance of a lightbox as easily as making a web page using HTML and CSS.

Just like making a web page, a theme’s layout (HTML) defines the structure and the stylesheet (CSS) controls the appearance of the lightbox in the browser.

After this short tutorial, you will be able to fully customize a lightbox’s appearance with your own custom theme.

Sample Layout

This tutorial focuses on styling elements in a lightbox’s layout. As a reference, this is the HTML layout used in SLB’s default themes:

<div class="slb_container">
    <div class="slb_content">
        <div class="slb_nav">
            <span class="slb_prev">
            <span class="slb_next">
        <div class="slb_controls">
            <span class="slb_close">
            <span class="slb_slideshow">
        <div class="slb_loading">
    <div class="slb_details">
        <div class="inner">
            <div class="slb_data">
                <div class="slb_data_content">
                    <span class="slb_data_title">
                    <span class="slb_group_status">
                    <div class="slb_data_desc">
            <div class="slb_nav">
                <span class="slb_prev">
                <span class="slb_next">

Pro Tip: Use Sass

While you could use plain CSS to style a theme, using a CSS preprocessor such as Sass is highly recommended as it is much more efficient at styling the lightbox as you will soon see.

All code examples in this tutorial use Sass. Sass looks a lot like CSS though, so it shouldn’t be too hard to follow along even if you’re not familiar with it. There’s a link at the end of this post with more information if you want to learn more about Sass.

Styling the Lightbox

Styling the lightbox is basically the same as styling a web page– you use selectors to target specific elements in the lightbox’s layout and add style rules to customize their appearance.

Targeting Your Theme

As SLB is added to existing pages with their own styles, it is important that your theme’s styles do not adversely affect anything else on the page.

To do this, SLB generates a selector specifically for lightboxes using your custom theme:


As you might expect, [theme-id] represents the theme’s ID. For example, the selector for a theme registered with the ID my-theme is:


By preceding all rules in your theme’s stylesheet with its unique selector, you ensure that the theme’s custom styles do not affect anything else on the page.

// Target custom theme
.slb_theme_my-theme {
    // Style links in lightbox
    a {

Increasing Specificity

If a rule requires more specificity (e.g. to override another rule), you can also use the global lightbox selector:



// Target global lightbox selector
#slb_viewer_wrap {
    // Target custom theme
    .slb_theme_my-theme {
        // Style links in lightbox
        a {

Styling Template Tags

Template tags also have special selectors that let you style the tags in a theme with varying levels of precision.

Style All Template Tags

To target all template tags in a theme, use the base template tag selector:



// Target custom theme
.slb_theme_my-theme {
    // Style all template tags
    .slb_template_tag {
        font-weight: bold;

Style A Specific Template Tag

You can also style all instances of a specific template tag simply by adding the tag’s name to the base tag selector:


Here, [tag-name] is the name of a specific template tag (e.g. item, ui, etc.).


This example demonstrates how to style all item template tags in the theme (e.g. {{item.title}}, {{item.description}}, etc.)

// Target custom theme
.slb_theme_my-theme {
    // Style all "item" template tag instances
    .slb_template_tag_item {
        font-weight: bold;

Style Template Tags with Specific Properties

You can get even more precise and target only the template tags using a specific property by appending the property to the tag selector:

  • [tag-name] — Name of specific template tag
  • [property] — Specific template tag property


This example demonstrates how to style the {{item.title}} template tag in the theme:

// Target custom theme
.slb_theme_my-theme {
    // Style the "{{item.title}}" template tag
    .slb_template_tag_item_title {
        font-weight: bold;

Styling Other Layout Elements

You may have noticed other classes in the reference layout above. You can add classes to elements in your theme’s custom layout to help you target and style those elements.


Say you want to style the slb_details block in the layout:

<div class="slb_details">
<!-- Title, Description, etc. go here -->

You would simply target the class name and apply your styles:

// Target custom theme
.slb_theme_my-theme {
    // Style "details" element
    .slb_details {
        padding: 1em;

Now You’re Stylin’

You now know everything you need to completely customize the appearance of a lightbox in SLB! Too cool.

Now the fun begins! You can create a lightbox theme to perfectly match your site’s theme, or you can even create unique themes that others can add to their own sites.

In any case, please let me know about your theming adventures. I’d love to hear about how you’ve customized Simple Lightbox!


  • Simple Lightbox — The awesomest ever lightbox plugin for WordPress!
  • Theme Overview — Learn more about registering and using custom themes in SLB.
  • Customizing Theme Layouts — Learn how to create a layout for your custom lightbox theme.
  • Sass — An awesome CSS preprocessor that does everything you wish CSS could do.

The post Simple Lightbox: Customizing Theme Styles appeared first on Archetyped.

]]> 0
Redesigning Archetyped: WordPress Theme Setup Wed, 12 Feb 2014 17:30:50 +0000 Everything you need to quickly set up a WordPress theme.

The post Redesigning Archetyped: WordPress Theme Setup appeared first on Archetyped.

Once the majority of the graphics and layouts have been designed, it’s time to start building the WordPress theme.

This post tells you everything you need to quickly set up a WordPress theme.

Note: Make sure to read to the end for a handy tool to set up a WordPress theme in seconds!

Give it Structure

Starting with a good directory structure keeps a theme organized and easy to work with. This will make the theme easier to maintain so that it can be updated quickly and painlessly in the future.

The is a good directory structure for WordPress themes:

  |_ fonts
  |_ images
  |_ sass
  |_ css
  |_ js
    |_ dev
    |_ prod
  • lib — PHP libraries for the theme. Splitting your theme’s code into separate files based on functionality makes it easier to find and update specific features.
  • templates — Layout templates. Think of templates as the building blocks for a theme’s various pages. From displaying posts to building a sidebar’s modules, templates are reusable chunks of code that you can use throughout your theme.
  • client — Front-end assets. Each type of asset gets its own sub-directory:
    • fonts — Font files
    • images — Image files
    • sass — Sass-based stylesheets
    • css — Compiled stylesheets
    • js — JavaScript files
      • dev — Development code
      • prod — Production (minified) code

Add Baseline Files

These are the baseline files you need for a WordPress theme:


Additional files can be created to further customize specific pages as per WordPress’ template hierarchy (see link below).

Define Theme Properties

You might think that the style.css file in the list above should be in the client directory with the other front-end assets, but in actuality, this file is not a front-end asset. In fact, despite its name, style.css contains no styles at all.

WordPress looks in style.css for a theme’s properties which is all this file is used for in my themes.

Here are the properties for Archetyped’s theme in style.css:

Theme Name: Archetyped
Theme URI:
Description: Theme for
Version: 2.0
Author: Archetyped
Author URI:

There are other properties you can add if you’re creating a public theme, but these are the basic properties WordPress needs to recognize the theme.

Display a Screenshot

The same goes for screenshot.png. This image is not a front-end asset, but rather is displayed on WordPress’ Themes page as a thumbnail for your theme.

Theme Details

WordPress Theme Quick-Start

This is the basic setup when starting a new WordPress theme. Doing this every time is tedious, so I’ve created a quick-start bundle to set up a theme in seconds.

I think it’s pretty useful, so I’m making my Theme Quick-Start bundle available to you. Just for fun, I’m letting you decide how much the quick-start bundle is worth. It’s as cheap as free, but if spending less time setting up themes and more time hugging your cat is worth the price of a cup of coffee to you, I’m happy to serve.

Get the Theme Quick-Start Now

The theme is now ready to be customized according to the design!

Your turn: How do you set up your WordPress themes? Do you have any tips for quickly getting a new theme up and running? Would you rather hug a cat or a dog (koala bear is a valid answer as well)? Join the conversation and let us know!


The post Redesigning Archetyped: WordPress Theme Setup appeared first on Archetyped.

]]> 0