Login
So if anyone has been following along with some of my development work, one of my more successful plugins has been WP SVG Icons. At the time of this writing it has 6,962 downloads and 11 five star reviews, in 6 months.
What WP SVG Icons does, is install a little over 500 icons onto your WordPress site. They come in the form of .svg (scaleable vector graphics) meaning they can be increased or decreased to any size with out any degradation in quality. They’re great for responsive sites or web applications that will mainly be used on tablets and phones.
The Problem
One of the most requested features I kept receiving from the users was the ability to use icons they had created (weather it be in Illustrator or another program). My response each time was that if they wanted the icons included into the plugin, I would most likely need to perform the task for them, and it would take me some time so in return I would need a little remuneration. I didn’t like this approach at all. Yes, I was getting small freelance jobs here and there, but It was eating up a lot of my time and I was charging people to use a free plugin which I absolutely hated doing. So the gears began to turn, and for a few weeks I contemplated how I could develop something that would allow users to import their own icons and use them within the plugin. This would allow for a wider range of use of the plugin, and would most likely reach a much larger audience.
The Resolution?
Icomoon Web Application
The gears began turning, and I did some research before undertaking the task. I knew of an extremely useful web application over at www.Icomoon.io that I utilized in the initial release of my plugin. A breif background on Icomoon – Keymoon, the web-master over at Icomoon, maintains thousands of icons, in both .png and .svg formats free for both commercial and personal use under multiple free-use licenses. He also offers premium icon packs with higher quality and a wider selection than the free variants. You can select any number of icons in a mix and math format, and download a personalized .zip of either .png’s of the icons .svg files of the icons or even a web-font pack of your icon selection.
One of the reasons I love developing new plugins and taking on more challenging tasks is that you always learn new things about yourself as a developer, and as the language you are developing in. It’s a win-win.
This is such a huge help when it comes to developing sites, graphic layouts for print, web applications, mobile applications or anything that uses icons. You can download icons and open them in Illustrator, re-edit them and use them as you please. Or you can just download them and use them right away. The free library contains nearly 5,000 icons designed by multiple designers ranging from web hosting hub to smaller designers such as PJ Onri.
What makes the Icomoon web application so powerful is its ability to re-import old icon selections (from an included .json file) back into the application, add or remove icons, and then re-download the same package without altering the original icons. Its such a powerful tool for swapping in and out icons, I can’t emphasize enough. You can name your custom icon build, and even add meta-deta to your icon-pack with things like the designer name, designer url and other attribution fields.
WordPress meet Icomoon
Knowing all of this about such a powerful and free tool, I absolutely knew this was the route I wanted to take. Immediately I began conceiving ways of being able to select any number and combination of icons from Icomoon, naming it whatever you please and downloading the pack for use in the plugin. This would be so awesome, and helpful to potentially hundreds of thousands of people, but I just didn’t know how it could be done. Some of the more huge issues that I would face was the file structure of the .zip package downloaded from Icomoon, uploading, unzipping and referencing the necessary files from a safe location, altering, including and styling the provided Icomoon HTML and CSS files without any user intervention, and removing the unnecessary files that would bloat the file system.
Fortunately, I was able to develop a method where users can do just that, with minimal interaction. Once the user has installed the latest version of WP SVG Icons, you’ll see I included a new page for custom icon pack integration. All users have to do is go over to the Icomoon App, select ‘Import Icons From Library…’ and choose whichever pack (or packs) they like. Once the icon packs are loaded in the library, start selecting any number of individual icons that you need/want for your WordPress site. Select ‘Font’ at the bottom of the browser window, click ‘Preferences’ at the top to give your icon pack a name (and custom pre-fix if you choose), and then click ‘Download’. Once you have the .zip file on your local machine, just upload that .zip file through the new Custom Pack Upload screen in the plugin and you’ll be able to start using your new icons in a matter of seconds. All of the necessary files are loaded on both the front and backend of the site and on the appropriate pages. Fonts will work anywhere on your site. In themes, on the dashboard, in templates, and in posts and pages.
How Did You Do It?
Well, it took a lot of research and let me say I learned a ton of new things, both about PHP and WordPress core. One of the reasons I love developing new plugins and taking on more challenging tasks is that you always learn new things about yourself as a developer, and as the language you are developing in. It’s a win-win.t’s a win-win.
One of the new WordPress functions I got to work with and learn a bit about was unzip_file(). Their really wasn’t too much documented in the Codex about this function when I started this task. But by the time I was finished, I had actually contributed a bit into the codex so that when others need help using the function, a working example is there for them.
Another fun function I got to work with was wp_handle_upload(). Luckily, there was a good amount of documentation in the codex on this function so I was able to learn about and implement this function without much hiccup.
Finally, another huge help to the entire plugin was the ability to change the upload directory only when uploading files from the new custom pack importer page. This was done through a custom function that sets the upload directory when on the custom pack importer page only. Emphasis on the only, because I didn’t want to change the entire upload directory and affect where the entire site was uploading files too.
This was the exact function that I wrote to carry out the task:
|
1 2 3 4 5 6 7 8 |
// Creates Dynamic Uploads Path // Sets path to wp-content/uploads/wp-svg-icons/custom-pack function wp_svg_set_upload_dir( $upload ) { $upload['subdir'] = '/wp-svg-icons/custom-pack'; $upload['path'] = $upload['basedir'] . $upload['subdir']; $upload['url'] = $upload['baseurl'] . $upload['subdir']; return $upload; } |
And then later down in the plugin I wrote a separate function that gets the current page basename, and if it matches the plugin page basename it add’s our set_upload_dir filter:
|
1 2 3 4 5 6 7 8 9 10 |
// Gets urlBasename from the URL string // If you are on the Upload a Custom Icon Pack page => set custom path for all uploads to wp-content/uploads/wp-svg-icons/custom-pack function wp_svg_change_downloads_upload_dir() { $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; $urlBasename = array_pop(explode('/', $actual_link)); if ($urlBasename == 'admin.php?page=wp-svg-icons-upload-custom-pack' ) { add_filter( 'upload_dir', 'wp_svg_set_upload_dir' ); } } add_action( 'admin_init', 'wp_svg_change_downloads_upload_dir', 999 ); |
Finally, one of the most important functions in the plugin is the ability to conditionally load the necessary CSS HTML and JS files for the new custom pack. This was done inside of a custom function that uses the file_exists() PHP function to check if the custom pack file resides in the upload directory. If the files do exits, the plugin continues on with enqueueing the necessary files. Very simple, but quite crucial to the success of loading in custom Icomoon icon packs. Unfortunately my function contains a lot of predefined varialbes so I’m going to show you the altered function:
|
1 2 3 4 5 6 |
// Check if there is a custom pack style file // if there is enqueue it if ( file_exists('/path/to/file/filename.css')) { wp_register_style('wp_svg_custom_pack_style', '/wp-content/uploads/wp-svg-icons/custom-pack/style.css'); wp_enqueue_style( 'wp_svg_custom_pack_style' ); } |
By combining a few powerful PHP functions I was able to successfully get a customized Icomoon icon pack imported to the plugin, loaded via ajax and useable in a matter of minutes. Check out the quick demonstrating how easy it is to upload a customized icon pack to the plugin, uninstall the pack and upload a new pack.
What About Icons I’ve Designed?
I’m glad you asked, because with Icomoon you can upload .svg files right into the web application they provide. After you’ve designed your icons within Illustrator (or another program that allows you to export .svg files), save out the icon in .svg format and go over to the Icomoon web application. Click ‘Import’ on the top left of the browser window and upload your .svg files. You’ll see your icons on the site in a matter of seconds. You can then manually select your icons one at a time, and carry out with the download as you would any other way. Its extremely simple and so awesome. Uploading icons you’ve designed and using them on your site give your site a new layer of customization and personalization that’s hard to come by without writing any code.
I designed this plugin to be extremely easy to use for the end user and didn’t want them to have to touch any code at all. I also did so for free, to better the WordPress community and Web as a whole. I want to bring advanced functionality to the end user in the most simple fashion possible. In that respect, How would you say I did? Let me know in the comments below, and if you love the plugin as much as I do, why not go over and leave me a nice rating and review in the repository :)?
WP SVG Icons.
Get It Now!
About the Author
Evan Herman
