# Helpful Tools for Theme and Plugin Development **URL:** https://discourse.roots.io/t/helpful-tools-for-theme-and-plugin-development/9273 **Category:** plugins **Tags:** plugin, sage **Created:** 2017-04-02T15:21:39Z **Posts:** 11 ## Post 1 by @MWDelaney — 2017-04-02T15:21:39Z 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. > **[jjgrainger/PostTypes](https://github.com/jjgrainger/PostTypes)** > > PostTypes - Simple WordPress custom post types. * * * **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! > **[GaryJones/Gamajo-Template-Loader](https://github.com/GaryJones/Gamajo-Template-Loader)** > > Gamajo-Template-Loader - A class to copy into your WordPress plugin, to allow loading template parts with fallback through the child theme > parent theme > plugin. So how about you all? Do you have tools like this that you use on a regular basis to make your job easier? --- ## Post 2 by @Log1x — 2017-04-02T19:06:35Z 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](https://reduxframework.com/). **Papi** I came across Papi yesterday. Seems like a cool concept for Page Types & Custom Fields. > **[wp-papi/papi](https://github.com/wp-papi/papi)** > > papi - :rocket: WordPress Page Type API with 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. > **[ineagu/wp-menu-item-custom-fields](https://github.com/ineagu/wp-menu-item-custom-fields)** > > wp-menu-item-custom-fields - Easily add custom fields to nav menu items **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](https://github.com/soberwp/intervention) is worth checking out as well. > **[soberwp/controller](https://github.com/soberwp/controller)** > > Composer package to enable a controller when using Blade with Sage 9 **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](https://toranproxy.com/) **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](https://github.com/groenroos/bulma-stylus). > **[jgthms/bulma](https://github.com/jgthms/bulma)** > > bulma - Modern CSS framework based on Flexbox **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. > **[seaneking/rucksack](https://github.com/seaneking/rucksack)** > > rucksack - A little bag of CSS superpowers, built on PostCSS **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](https://github.com/zeekay/lost-stylus) for an even more native feel. > **[peterramsing/lost](https://github.com/peterramsing/lost)** > > lost - LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS. **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. > **[static-dev/axis](https://github.com/static-dev/axis)** > > axis - terse, modular & powerful css library **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](https://github.com/rstacruz/iconfonts/blob/master/stylesheets/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! > **[rstacruz/iconfonts](https://github.com/rstacruz/iconfonts/)** > > iconfonts - Fine-tuned icon fonts integration for Sass, Less and Stylus --- ## Post 3 by @MWDelaney — 2017-04-02T19:14:25Z > [@Log1x](#): > > 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. I’ll have to look at this! I’ve used Menu Icons for… menu icons but this seems more robust. > **[Menu Icons by ThemeIsle](https://wordpress.org/plugins/menu-icons/)** > > Spice up your navigation menus with pretty icons, easily. --- ## Post 4 by @Log1x — 2017-04-02T19:27:32Z I think I’ve edited my post like 10 times now. :frowning: I spend way too much time on GitHub. --- ## Post 5 by @MWDelaney — 2017-04-02T19:30:08Z 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. --- ## Post 6 by @Log1x — 2017-04-02T19:32:05Z 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. --- ## Post 7 by @MWDelaney — 2017-04-03T04:13:13Z > [@Log1x](#): > > 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. > > [GitHub - soberwp/controller: Composer package to enable a controller when using Blade with Sage 9](https://github.com/soberwp/controller) 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: --- ## Post 8 by @Log1x — 2017-04-03T16:06:12Z 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. --- ## Post 9 by @inthedeepend — 2017-04-05T04:24:53Z 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. --- ## Post 10 by @Log1x — 2017-04-09T20:08:12Z **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](https://github.com/adamwathan/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. > **[Log1x/blade-svg-sage](https://github.com/Log1x/blade-svg-sage)** > > blade-svg-sage - WordPress plugin to add Blade SVG to Sage 9 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 > **[iconic/open-iconic](https://github.com/iconic/open-iconic)** > > open-iconic - An open source icon set with 223 marks in SVG, webfont and raster formats Another one to look out for is Font Awesome 5 which is $40 for early contributors and will have proper web-ready SVG’s. --- ## Post 11 by @joshb — 2021-03-10T19:00:57Z Discovered this and its really great. > **[Maizzle - Framework for Rapid Email Prototyping](https://maizzle.com/)** > > Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing.