Use Custom Markers

If you’d like to use custom markers, the easiest way to do this is by creating a new marker folder outside of the default WPSL plugin folder, moving your custom marker images there, and adding a few lines of code to the functions.php to let the WPSL plugin know where to look for them.

Create Marker Images

If you want to create a completely new marker image, then you can find free vector icons on sites like flaticon or freepik. But if you want to keep using the existing marker style, only in a different color, then you can download the marker PSD file and adjust the colors to your needs.

File Requirements

When you save the new marker you do need to create two versions. One version that you, for example, save as my_marker.png, and the other one as my_marker@2x.png.

The one with @2x in it is used on retina displays and needs to be twice the size as the normal marker. So if the dimensions of my_marker.png are 50×60 pixels, then my_marker@2x.png needs to be 100×120 pixels.

Change Paths

Loading the markers from an alternative folder requires you to change the filesystem path and the marker folder URI. This is necessary to make sure the custom markers are accessible in both the back and front-end of the plugin.

Filesystem Path

Adjusting the filesystem path makes sure the marker images are read from the correct folder when the “Markers” section on the settings page is created.

Settings markers

This example changes the filesystem path to /wpsl-markers/ inside the current theme folder:

The $admin_marker_dir value will look like this: /home/user/public_html/wp-content/themes/my_theme/wpsl-markers/. All images from this folder are automatically shown in the “Markers” section.

Marker Folder URI

You can change the marker folder URI by using the WPSL_MARKER_URI constant and setting the value to the wpsl-markers folder inside the current theme folder.

The WPSL_MARKER_URI value will look like this: http://mydomain.com/wp-content/themes/my_theme/wpsl-markers/.

Select the Custom Marker

The last step involves selecting the new start and store marker.

You can do this by opening the WPSL settings page, scrolling down to the “Markers” section, and selecting the new marker. Which, in this case, is a custom fork and knives icon.

Custom marker

All code needs to go in the functions.php inside your active theme folder.

If you’re trying to load custom markers, and they don’t show up. Then make sure you have not set the start_marker and store_marker attribute in the wpsl shortcode.

Related