A client I recently built a site for wanted to display company contact details in multiple places on the front-end of his site.
A simple enough task, yes, but also one I knew would quickly become tedious – not only would I have to copy and paste the same information in many different places but if the client wanted to update his contact details they would have to be edited in various locations.
The solution? Global variables. Unfortunately, WordPress doesn’t provide a way to set up and use global variables by default, so I went about putting together a custom solution that would allow my client to easily input his details in one place so they could be disseminated and published across his site.
Creating a New Admin Setting
In order to make it super easy for my client to enter his contact details, I created a new setting in the backend that he could access: Settings > Contact Info.
This new screen allows him to enter his company information, including phone number, fax number and email address.
Here’s a peek at what we’ll be building:
In order to implement this solution on your own site, you need to add some code to your functions.php file. However, it’s always best to create a child theme rather than mess around making changes to functions.php. If you’re not sure how to create a child theme or need a refresher, check out our comprehensive guide How to Create a WordPress Child Theme.
Here’s the code, which I’ll go through it in more detail below.
The code is fairly self-explanatory with the comments, but here’s what it does in a nutshell:
The first function,
theme_settings_page, sets up the Contact Info screen in the backend of the site, while the next three functions pull in the user’s phone, fax and email information.
Next, the code tells WordPress what needs to be enqueued in the form area of the screen, specifically using the
Lastly, in order to add a sub-menu page to the Settings main menu, we use the
Displaying Contact Info on the Front-end
Now that the client can input his details in the backend, we need to actually display that information on the front-end of his site.
Add the following snippet to your site on the page where you want the contact information to display:
This snippet checks if the phone number is filled out and if it is then the number is displayed, otherwise the message “Support silence is golden” is shown instead.
It looks like this on the client’s website:
If the client later updates his information and forgets to enter his information, it would display like this instead:
Using global variables allows you to quickly and easily display the same set of information anywhere on your site without the need for manually entering data each time it changes.
This snippet is especially helpful if you work on sites for clients that own physical locations and need to display contact information, or have online details such as a phone number or email address they want listed in multiple places on their site.
Do you think this kind of customization would be useful on your site? Have you customized your WordPress site in a similar way before? Let us know your ideas for tweaking this snippet in the comments below.