Helpful Tools for Theme and Plugin Development

plugins
,
1

Hi!
Throughout my time with Roots I’ve come across a small collection of tools that make my daily life as a developer easier. A recent reply in another thread about how to easily register post types got me thinking that a library of make-my-job-easier tools might be useful.

This is meant to catalog tools that make the task of creating themes and plugins easier. Cool stuff you can do with yarn libraries are awesome, but not the focus of this thread.

Here’s what I use a lot:

PostTypes
A super useful class for easily registering post types.

  1. Include this class with composer
  2. Register your post type with one line: $books = new PostType('book');

The documentation at the link below goes into detail on setting post type icons, columns, supports, etc.

I tend to go overboard with post types and create them all as separate mu-plugins and this class takes a lot of the work out of that task.

Gamajo Template Loader
You know how WooCommerce and The Events Calendar include their own default templates and let you override them in your theme? This class let’s you do that for your plugins.

The documentation goes into much greater detail that I could cover here. I tend to use this for plugins for shortcodes that I use across multiple projects to include the views along with the functionality. I haven’t figured out how to get the override themes to work with Blade yet but this is still a great tool for plugins that include templates!

So how about you all? Do you have tools like this that you use on a regular basis to make your job easier?

11 Likes
2

Good post.

I actively use PostTypes in almost all of my projects. I forked it to make a subtle change using after_setup_theme instead of init for initializing the post type for compatibility purposes when fetching the post type in admin panels such as Redux Framework.

Papi
I came across Papi yesterday. Seems like a cool concept for Page Types & Custom Fields.

Menu Item Custom Fields
I use this on projects where I want to do icons or titles (such as for a Mega Menu) in a custom nav walker. Makes adding custom fields for menu’s super easy & has composer support.

Controller
I’m sure most have heard of this by now, but figured I’d give it a plug on this thread anyway. A must have for Sage 9 in my opinion. Darren did a great job on this. Intervention is worth checking out as well.

Toran Proxy
Not really WordPress related, but I recently setup Toran Proxy for paid plugins and various private repo’s to easily manage them with Composer. Just make sure you password protect its directory. It’d be nice if they’d add user management and then use an API key of some kind for adding it to Composer instead of having to use Basic Auth but it works fine otherwise.

Toran Proxy

Bulma
In the past I’d usually roll my own SASS framework, but I recently stumbled upon Bulma after finding out Jeffery Way uses it on his new Laracasts design and have really enjoyed working with it on my current project. I use the Stylus Fork.

Rucksack
I recently switched to Stylus and much prefer it’s syntax. Rucksack is PostCSS but with Stylus’ syntax it goes hand in hand and is a nice little toolbox.

LostGrid
I used Bourbon & Neat for a couple years but after using LostGrid I doubt I’ll ever go back. If you use Stylus, there’s also a nice little mixin library for an even more native feel.

Axis
Although I ended up using the Stylus fork of Bulma instead, Axis seems like a great library for Stylus and adds 0 overhead to your code. Just include what you need as you need it for a great default for most elements/components. If you do use it, make sure you check out the source code as they have a couple useful mixin’s that aren’t documented. They also appear to be working on a PostCSS version for v2.0.

Icon fonts
Provides a lot cleaner way to include icon fonts in your SASS or Stylus. Instead of including a massive list of icon’s directly into your CSS, instead use this mixin to only include what you need. I usually use my own icon font based on Entypo and created with IcoMoon, so I forked ionicons.styl and used a more native naming scheme since I only use 1 icon font.

Instead of:

.example
  &:before
    font-family: '...'
    content: '\109a'

I can now simply do:

.example
  icon: arrow-right

Great!

3 Likes
3

I’ll have to look at this! I’ve used Menu Icons for… menu icons but this seems more robust.

1 Like
4

I think I’ve edited my post like 10 times now. :frowning:

I spend way too much time on GitHub.

5

Do you use Papi? It seems like a huge departure from my typical Page Templates Plus ACF approach, or more recently for smaller projects, Beaver Builder.

I worry that solutions like Papi are so different from typical WordPress that they’re hard to support or hand off.

6

I haven’t used it yet but I found the concept interesting. It’s indeed “different” though. It could definitely cause some issues if it were to be abandoned and WordPress did an update that broke it.

But with 3800+ commits, it seems to be well cared for.

1 Like
7

I really like this approach to controllers but I kinda wish it was something I could include in my theme rather than a plugin (even an mu-plugin). The work it does seems fundamentally theme level stuff.

I’ll probably adopt it anyway :slight_smile:

8

I agree. In this case, I usually go with something like this in my themes composer.json:

  "extra": {
    "installer-paths": {
      "../../mu-plugins/{$name}/": ["type:wordpress-muplugin", "soberwp/controller"],
      "../../plugins/{$name}/": ["type:wordpress-plugin"]
    }
  }

This at least stops the average user from messing with it.

3 Likes
9

Officially my first bookmarked thread on Roots Discourse. Thanks for this. I’ll come back and chip in my two cents when I get a decent enough moment.

2 Likes
10

Blade SVG for Sage
Since Sage 9 uses sage() as it’s container instead of Laravel’s default container name app(), we are unable to use Laravel’s service providers as-is.

One service provider that stuck out most to me was Blade SVG. I’d love to move from icon fonts to SVG’s and this seemed like a great, clean way to do it.

For that reason, I’ve reworked Blade SVG and turned it into a WordPress plugin to be used solely with Sage 9.

It’s still quite early, but I’d appreciate anyone testing it out and reporting any issues. I also added some filters to be able to control configuration in a more native WordPress way instead of having a PHP configuration file like the original service provider.

It hasn’t been used in production yet and am unsure if it will work with build:production. I tried using sage('asset')->get instead of get_stylesheet_dir() to get cache busted internal dist files but it didn’t return the full directory like getUri does, so I may or may not need to do a workaround for that.

By default, @icon() is configured to use inline SVG’s to encourage use of the customization possibilities with inline SVG and the use of a spritesheet, but this can easily be set to false with the bladesvg_inline filter.

If you’re new to SVG, check out Iconic Open. It’s one of few SVG icon packs that has proper path classes allowing you to easily multicolor icons

Another one to look out for is Font Awesome 5 which is $40 for early contributors and will have proper web-ready SVG’s.

3 Likes
11

Discovered this and its really great.

3 Likes