Custom Menus in WP

If you’re looking to enhance your WordPress theme with customizable social media links, you’re in the right place! In this guide, we’ll walk through the process of adding social media link options to your theme’s Customizer using PHP and the WordPress Customizer API. This feature allows users to easily enter their social media URLs directly from the WordPress Customizer interface, without having to edit theme files manually.

1. Understanding the Customizer API

The WordPress Customizer API allows developers to add custom settings and controls to the theme customizer. This is a powerful tool that lets users preview changes to their site in real-time before publishing them.

2. Creating a Customizer Class

We’ll start by creating a Customizer class that registers our custom settings and controls. Here’s the complete code:

<?php
/**
 * Customizer settings for this theme.
 *
 * @package ScreenTime
 */

namespace Rtth\Theme;

use Helpers\Singleton_Trait;
use WP_Customize_Manager;

/**
 * Customizer Settings.
 */
class Customizer {

	use Singleton_Trait;

	/**
	 * Constructor. Instantiate the object.
	 */
	public function __construct() {
		add_action( 'customize_register', array( $this, 'register' ) );
	}

	/**
	 * Register customizer options.
	 *
	 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
	 *
	 * @return void
	 */
	public function register( WP_Customize_Manager $wp_customize ): void {

		/**
		 * Add social media links section to customizer
		 */
		$wp_customize->add_section(
			'rtth_social_settings',
			array(
				'title'       => esc_html__( 'Social Links Settings', 'screen-time' ),
				'priority'    => 120,
				'description' => __( 'Add your social media links here.', 'screen-time' ),
			)
		);

		$social_links = array(
			'facebook_url'  => __( 'Facebook URL', 'screen-time' ),
			'twitter_url'   => __( 'Twitter URL', 'screen-time' ),
			'youtube_url'   => __( 'YouTube URL', 'screen-time' ),
			'instagram_url' => __( 'Instagram URL', 'screen-time' ),
			'rss_url'       => __( 'RSS URL', 'screen-time' ),
		);

		foreach ( $social_links as $setting => $label ) {
			$wp_customize->add_setting(
				$setting,
				array(
					'capability'        => 'edit_theme_options',
					'default'           => '',
					'transport'         => 'postMessage',
					'sanitize_callback' => 'sanitize_url',
				)
			);

			$wp_customize->add_control(
				$setting,
				array(
					'type'    => 'url',
					'section' => 'rtth_social_settings',
					'label'   => $label,
				)
			);
		}
	}
}

3. Adding Social Media Settings

In the register method, we create a new section titled “Social Links Settings.” This section will house all our social media URL options. We then define the social media URLs we want to include and loop through them to add settings and controls.

4. Adding Controls to the Customizer

For each social media link, we add a setting and control to the customizer. The add_setting method defines the setting’s attributes, including its default value, transport method, and sanitization callback. The add_control method adds the corresponding control to the customizer, allowing users to input their social media URLs.

5. Using the Social Media Links in Your Theme

To display these social media links in your theme, you’ll need to fetch the customizer settings in your theme files. Here’s an example of how to retrieve and output these URLs in your theme’s template files:

<?php
$facebook_url  = get_theme_mod( 'facebook_url' );
$twitter_url   = get_theme_mod( 'twitter_url' );
$youtube_url   = get_theme_mod( 'youtube_url' );
$instagram_url = get_theme_mod( 'instagram_url' );
$rss_url       = get_theme_mod( 'rss_url' );

// Output the links as needed, for example:
echo '<ul class="social-links">';
if ( $facebook_url ) {
    echo '<li><a href="' . esc_url( $facebook_url ) . '">Facebook</a></li>';
}
if ( $twitter_url ) {
    echo '<li><a href="' . esc_url( $twitter_url ) . '">Twitter</a></li>';
}
if ( $youtube_url ) {
    echo '<li><a href="' . esc_url( $youtube_url ) . '">YouTube</a></li>';
}
if ( $instagram_url ) {
    echo '<li><a href="' . esc_url( $instagram_url ) . '">Instagram</a></li>';
}
if ( $rss_url ) {
    echo '<li><a href="' . esc_url( $rss_url ) . '">RSS</a></li>';
}
echo '</ul>';
?>

By following these steps, you can easily integrate social media link settings into your WordPress theme’s Customizer. This enhances user experience by allowing site administrators to manage their social media links conveniently through the WordPress Customizer interface. Happy customizing!