Important: Uploading and using custom icons requires our Timeline Express – Image Icons Add-On.
Note: Icons should be uniform in height and width. ie: 64×64, 128×128 etc. Anything smaller than 60px will degrade in quality as it will scale up the icon fit 60px icon container.

There are two methods available for utilizing custom image icons within the plugin. The first is the standard WordPress media uploader, which allows you to upload an image file to use as the image icon. The second method is a bit more involved but would allow you to create a directory of images in your theme root to be referenced in the ‘Announcement Icons’ browser.

Method 1: Uploading Custom Icons

This method is fairly straightforward and is the exact same as uploading media to your WordPress site.

You’ll first want to click on the ‘Add or Upload Icon’ button in the ‘Image Icon’ section.

Next, click on the ‘Upload Files’ tab and click the ‘Select Files’ button. Then, select the image icon you want to upload from your local machine to complete the upload.

Finally, when the icon has uploaded you can click on the ‘Use this File’ button in the bottom right of the media uploader.

Method 2: Custom Icons in the Icon Browser

The next method is a bit more streamlined, and a great approach for those handing off projects to a client who want to implement custom icons – and who may not want to use any of the bundled icons.

First, you’ll want to create a directory, timeline-express, in the root of your theme. If you’ve implemented a custom template or have made any customizations to the template files, you may already have this directory created.

Inside of the timeline-express directory, you’ll want to create another directory ‘image-icons’.

For example, if you had a TwentySeventeen child theme installed, your directory structure would be wp-content/themes/twentyseventeen/timeline-express/image-icons.

Example

You can add all of your icons into the image-icons directory and Timeline Express – Image Icons Add-On will pick up the icons and display them inside of the Announcement Icon browser.

Custom Icon Naming Conventions & Categories

The Image Icons Add-On will pick up any custom icons that are added to the directory mentioned above. The add-on also does it’s best to generate a category from the filename of the icon, which is then displayed in the drop-down used for filtering the icons.

More specifically, categories are generated from the prefix of your icon filename. For example, if you upload an icon Custom-icon123.png, the plugin will generate a category ‘Custom’ and display it in the drop-down. Prefixing your icon with a `Custom-` prefix will place the icon into the ‘Custom’ category.

If you upload a large number of icons and want to split them up into categories for easy sorting, you can do so by prefixing them accordingly.

  • Special_Icons-icon123.png
  • Brand_Name-icon.png
  • Magic-icon.png

If you added 3 icons to the directory with the names above, you would get 3 separate categories: Speical Icons, Brand Name, and Magic.

Disable All Bundled Icons in Icon Browser

If you’re uploading a large number of icons, there’s a good chance you don’t necessarily want to use the default icons in your timeline. If this is the case, you can disable all of the icons from displaying in the ‘Announcement Icon’ browser window so only your custom icons and custom icon categories are available to choose from.

Take a look at our article on How To: Disable All Bundled Icons in the Icon Browser.