Use Theme Mod Value as Default Shortcode Attr
As a WordPress developer, you often find yourself in situations where you need to create customizable elements that can be easily adjusted by your clients or end-users. One common scenario is the need to create a Google Maps shortcode that allows users to input their location, height, and width. In this article, we'll explore how you can leverage the WordPress theme modification system to set the default value for the location attribute in your shortcode, making it easier for your users to customize their maps.
The Problem
Imagine you're building a WordPress website that features a Google Maps embed on multiple pages. You want to make it easy for your clients to customize the map's location, height, and width without having to dig into the code. A common approach would be to create a shortcode that allows users to pass in these values as attributes.
Here's an example of what that shortcode might look like:
function shortcode_map($atts, $content = null) {
extract(shortcode_atts(array(
'height' => '500px',
'width' => '500px',
'location' => ''
), $atts));
ob_start(); ?>
<iframe width="<?php echo esc_attr($width); ?>" height="<?php echo esc_attr($height); ?>" id="gmap_canvas" src="https://maps.google.com/maps?q=<?php echo esc_attr($location); ?>&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
<?php
return ob_get_clean();
}
add_shortcode('map', 'shortcode_map');
This shortcode allows the user to pass in the height
, width
, and location
attributes when using the [map]
shortcode in their content. However, this approach has a few drawbacks:
- Inconsistent Defaults: If the user doesn't provide a value for the
location
attribute, the map will not display anything, which may not be the desired behavior. Ideally, you'd want to set a default location that can be easily customized by the user.
- Scattered Customization: Forcing the user to remember and input the
location
attribute every time they use the shortcode can be cumbersome, especially if they want to use the same location across multiple pages.
The Solution
To address these problems, we can leverage the WordPress theme modification system to set the default value for the location
attribute in the shortcode. This way, the user can easily customize the location at the theme level, and the shortcode will automatically use that value as the default.
Here's how you can implement this solution:
-
Add a theme modification for the primary location:
In your theme's functions.php
file, add the following code to create a new theme modification for the primary location:
add_theme_mod('primary_location', 'New York, NY');
This will create a new theme modification with the key 'primary_location'
and the default value of 'New York, NY'
. Your users can then customize this value in the WordPress Customizer.
-
Update the shortcode to use the theme modification:
Now, update the shortcode_map
function to use the theme modification as the default value for the location
attribute:
function shortcode_map($atts, $content = null) {
$location = get_theme_mod('primary_location');
extract(shortcode_atts(array(
'height' => '500px',
'width' => '500px',
'location' => $location
), $atts));
ob_start(); ?>
<iframe width="<?php echo esc_attr($width); ?>" height="<?php echo esc_attr($height); ?>" id="gmap_canvas" src="https://maps.google.com/maps?q=<?php echo esc_attr($location); ?>&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
<?php
return ob_get_clean();
}
add_shortcode('map', 'shortcode_map');
In this updated code, we use the get_theme_mod
function to retrieve the value of the 'primary_location'
theme modification and set it as the default value for the location
attribute in the shortcode.
With this implementation, your users can now customize the default location for the Google Maps shortcode by going to the WordPress Customizer and updating the "Primary Location" setting. When they use the [map]
shortcode, it will automatically use the value they set in the Customizer, unless they explicitly provide a different location in the shortcode.
Benefits of this Approach
This approach offers several benefits:
- Consistent Defaults: By setting the default value for the
location
attribute using the theme modification, you ensure that the map will always display something, even if the user doesn't provide a location in the shortcode.
- Centralized Customization: Your users can easily customize the default location for the map in the WordPress Customizer, without having to remember to input the
location
attribute every time they use the shortcode.
- Flexibility: If a user needs to use a different location for a specific map, they can still override the default by providing the
location
attribute in the shortcode.
- Maintainability: If you need to change the default location for all maps on your website, you can simply update the theme modification, and the change will be reflected across all instances of the
[map]
shortcode.
Real-World Example
Let's say you're building a website for a real estate company that has multiple locations. You want to make it easy for your clients to customize the default location for the Google Maps shortcode on their website.
Using the approach we've outlined, you can create a theme modification for the "Primary Location" and set the default value to the company's headquarters. Your clients can then go to the WordPress Customizer and update the "Primary Location" setting to the location of their choice.
When they use the [map]
shortcode on their pages, the maps will automatically display the location they've set in the Customizer, unless they explicitly provide a different location in the shortcode.
This setup ensures a consistent user experience across the website, while also giving your clients the flexibility to customize the maps as needed.
Conclusion
In this article, we've explored how to use the WordPress theme modification system to set the default value for a shortcode attribute. By leveraging this approach, you can create more user-friendly and customizable elements on your WordPress website, making it easier for your clients to tailor the content to their needs.
Remember, the key to this solution is the ability to centralize common customizations in the WordPress Customizer, allowing your users to easily adjust the defaults without having to directly modify the code. This not only improves the user experience but also makes your website more maintainable in the long run.
If you're looking to take your WordPress development to the next level, consider exploring Flowpoint.ai, a powerful web analytics platform that can help you identify and fix technical, UX, and content-related issues that may be impacting your website's conversion rates
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.