How to Use an SVG for a Custom Post Type Icon

By Devin

Let's use this id-card svg for the custom post type icon rather than a standard dashicon.

First, download the raw SVG file. If you open it up in a text editor, it should look something like this:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="id-card" class="svg-inline--fa fa-id-card fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528 32H48C21.5 32 0 53.5 0 80v16h576V80c0-26.5-21.5-48-48-48zM0 432c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V128H0v304zm352-232c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16zm0 64c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16zm0 64c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16zM176 192c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zM67.1 396.2C75.5 370.5 99.6 352 128 352h8.2c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h8.2c28.4 0 52.5 18.5 60.9 44.2 3.2 9.9-5.2 19.8-15.6 19.8H82.7c-10.4 0-18.8-10-15.6-19.8z"></path></svg>

I usually clean up the svg code to just include the necessary bits:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528 32H48C21.5 32 0 53.5 0 80v16h576V80c0-26.5-21.5-48-48-48zM0 432c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V128H0v304zm352-232c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16zm0 64c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16zm0 64c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16zM176 192c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zM67.1 396.2C75.5 370.5 99.6 352 128 352h8.2c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h8.2c28.4 0 52.5 18.5 60.9 44.2 3.2 9.9-5.2 19.8-15.6 19.8H82.7c-10.4 0-18.8-10-15.6-19.8z"></path></svg>

Note that I leave fill="currentColor" on the path.

Now, you have two options for how to load the icon. You can set the svg code inline as a variable:

$icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528 32H48C21.5 32 0 53.5 0 80v16h576V80c0-26.5-21.5-48-48-48zM0 432c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V128H0v304zm352-232c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16zm0 64c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16zm0 64c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16zM176 192c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zM67.1 396.2C75.5 370.5 99.6 352 128 352h8.2c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h8.2c28.4 0 52.5 18.5 60.9 44.2 3.2 9.9-5.2 19.8-15.6 19.8H82.7c-10.4 0-18.8-10-15.6-19.8z"></path></svg>';

Or you can load it directly from your file (icon.svg),

$icon = file_get_contents( plugin_dir_path( __FILE__ ) . '/assets/icon.svg' );

Then set the menu icon when the post type is registered:

'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode($icon)
view raw svg-icon-post.md hosted with ❤ by GitHub

Material UI and Laravel

By Devin

Material UI is a popular React framework based on Google’s Material Design System. It provides a nice design system and library of prebuilt components that can speed up the process of building web applications. I’ve worked with it on a couple projects, and really enjoy building on top of it.

Because I like having good boilerplates available to start new projects with, I rebuilt my Laravel React Bootstrap To Do App with Material UI. It uses the same REST API for authentication and data storage- but it is a completely headless implementation and could easily be updated to use different APIs.

View the Demo
Source Code on Github

More About the Project

If you’d like to host your own backend, you can also find that source code on Github. In the future, I hope to write a new version of the backend that uses Airlock rather than the tymondesigns/jwt-auth library for auth. If that would be useful to you, leave me a comment.

Building a Mobile App with Flutter and Laravel

By Devin

I’ve been developing a mobile app at work using Flutter the last couple months and absolutely love it. It’s a UI framework developed by Google that compiles down to native code for iOS and Android. It makes developing mobile layouts feel like snapping together legos.

To learn Flutter (which uses the programming language Dart), I built the generic “to do” app, exactly as I had done when learning Laravel and React. The mobile app actually uses the same REST API (hosted at laravelreact.com) as that project, which is a really nice benefit of having a decoupled UI.

Here’s a short overview video showing how it works:

Continue reading →

Building a React App on Laravel

By Devin

The first time I built a Laravel React app, most of my time was spent simply building out the infrastructure related to authentication (login, registration, password reset, etc).

With a server rendered app, Laravel generates the authentication boilerplate for you. But with a 100% React frontend, all these pieces need to be built custom: an auth API (with JSON web tokens), routing, forms and form validation, persistent storage, and tests. There’s also aren’t many tutorials or example projects that show how it all works together.

Example To-Do App

Now that I’m more familiar with these concepts, I’ve released an example boilerplate for others to look at. You can view a demo of the Laravel React To Do App here. Source code and installation instructions are available on GitHub.

It includes:

You can find the project on GitHub. Use it as a starting base for quick prototypes or to learn from. Suggestions, recommendations, and pull requests welcome! Continue reading →

Restrict Access to a WordPress Site Based on IP

By Devin

I recently developed an internal website for our company that wanted to be accessible to employees only. Instead of having a server level password, or individual WordPress logins, we decided to just limit access to by IP address. This way everyone on the office network could access easily, but outside the network they would get an access denied message.

We use WP Engine for hosting, but IP whitelisting or blocking should work with any host.

.htaccess Option

One quick method to set this up is by editing the .htaccess file directly (this should be in the base folder of your WordPress directory) and add the 3 lines at the top of this codeblock:

order deny,allow
deny from all
allow from 98.6.000.111
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
view raw .htaccess hosted with ❤ by GitHub

You’ll want to change the IP address in the example (98.6.000.111) to the IP you want to whitelist. You can also whitelist multiple IP addresses by just adding more below that line.

Plugin Option

An easier option (in my opinion) is to use the Restricted Site Access plugin, maintained by the folks at 10up. This plugin provides you with a dashboard to set up the IP restrictions, and also allows you to set a custom restriction messages or redirects.