Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Castos Mega Menu Builder with SVG Sprites
<?php
/**
* Castos Mega Menu Options page
* Purpose: store location of SVG Sprite and display preview of sprite symbols
* Retrieve sprite URL options with:
* $castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); // Array of All Options
* $svg_sprite_url_0 = $castos_mega_menu_options['svg_sprite_url_0']; // SVG Sprite URL
*/
class CastosMegaMenu {
private $castos_mega_menu_options;
public function __construct() {
add_action( 'admin_menu', array( $this, 'castos_mega_menu_add_plugin_page' ) );
add_action( 'admin_init', array( $this, 'castos_mega_menu_page_init' ) );
}
public function castos_mega_menu_add_plugin_page() {
add_theme_page(
'Castos Mega Menu', // page_title
'Castos Mega Menu', // menu_title
'manage_options', // capability
'castos-mega-menu', // menu_slug
array( $this, 'castos_mega_menu_create_admin_page' ) // function
);
}
public function castos_mega_menu_create_admin_page() {
$this->castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); ?>
<div class="wrap">
<h2>Castos Mega Menu</h2>
<p>This is a test options page</p>
<?php settings_errors(); ?>
<form method="post" action="options.php">
<?php
settings_fields( 'castos_mega_menu_option_group' );
do_settings_sections( 'castos-mega-menu-admin' );
submit_button();
?>
</form>
</div>
<?php
}
public function castos_mega_menu_page_init() {
register_setting(
'castos_mega_menu_option_group', // option_group
'castos_mega_menu_option_name', // option_name
array( $this, 'castos_mega_menu_sanitize' ) // sanitize_callback
);
add_settings_section(
'castos_mega_menu_setting_section', // id
'Settings', // title
array( $this, 'castos_mega_menu_section_info' ), // callback
'castos-mega-menu-admin' // page
);
add_settings_field(
'svg_sprite_url_0', // id
'SVG Sprite URL', // title
array( $this, 'svg_sprite_url_0_callback' ), // callback
'castos-mega-menu-admin', // page
'castos_mega_menu_setting_section' // section
);
}
public function castos_mega_menu_sanitize($input) {
$sanitary_values = array();
if ( isset( $input['svg_sprite_url_0'] ) ) {
$sanitary_values['svg_sprite_url_0'] = sanitize_text_field( $input['svg_sprite_url_0'] );
}
return $sanitary_values;
}
public function castos_mega_menu_section_info() {
$castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); // Array of All Options
$svg_sprite_url_0 = $castos_mega_menu_options['svg_sprite_url_0']; // SVG Sprite URL
if ($svg_sprite_url_0) {
$dom = new DomDocument();
$dom->load($svg_sprite_url_0);
$symbols = $dom->getElementsByTagName('symbol');
echo '<div class="icons-container">';
foreach ($symbols as $symbol) {
$symbol_ref = substr($symbol->getAttribute('id'), 5);
echo '<div class="icons-item"><svg width="40px" height="40px" class="icon"><use xlink:href="'.$svg_sprite_url_0.'#icon-'. $symbol_ref .'"></use></svg><span>', $symbol_ref , '</span></div>';
}
echo '</div>';
echo '<style>.icons-container {display: flex; flex-wrap: wrap;}.icons-item{flex-basis: 250px; display: flex; align-items: center; padding: 10px; background-color: #fff; margin: 0 10px 10px 0;}.icons-item svg{margin-right: 20px;}</style>';
}
}
public function svg_sprite_url_0_callback() {
printf(
'<input class="regular-text" type="text" name="castos_mega_menu_option_name[svg_sprite_url_0]" id="svg_sprite_url_0" value="%s">',
isset( $this->castos_mega_menu_options['svg_sprite_url_0'] ) ? esc_attr( $this->castos_mega_menu_options['svg_sprite_url_0']) : ''
);
}
}
if ( is_admin() ) {
$castos_mega_menu = new CastosMegaMenu();
}
/**
* Castos Mega Menu Builder
* Purpose: Add wp_nav_menu_item_custom_fields for Item Descrition, SVG Icon and CTA content
*/
// register custom fields and input form
function castos_menu_item_desc( $item_id, $item ) {
wp_nonce_field('castos_custom_menu_meta_nonce', '_castos_custom_menu_meta_nonce_name');
$menu_item_desc = get_post_meta( $item_id, '_castos_menu_item_desc', true );
$menu_item_svg = get_post_meta( $item_id, '_castos_menu_item_svg', true );
$menu_item_cta = get_post_meta( $item_id, '_castos_menu_item_cta', true );
?>
<input type="hidden" name="castos_custom_menu_meta_nonce" value="<?php echo wp_create_nonce('castos_custom_menu_meta_nonce'); ?>" />
<div style="clear: both;">
<span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br />
<input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" />
<div class="logged-input-holder">
<input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" id="menu-item-desc-<?php echo $item_id ;?>" value="<?php echo esc_attr( $menu_item_desc ); ?>" />
</div>
</div>
<div style="clear: both;">
<span class="svg"><?php _e( "Item SVG", 'menu-item-svg' ); ?></span><br />
<input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" />
<div class="logged-input-holder">
<input type="text" name="menu_item_svg[<?php echo $item_id ;?>]" id="menu-item-svg-<?php echo $item_id ;?>" value="<?php echo esc_attr( $menu_item_svg ); ?>" />
</div>
</div>
<div style="clear: both;">
<span class="cta"><?php _e( "Item CTA", 'menu-item-cta' ); ?></span><br />
<input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" />
<div class="logged-input-holder">
<input type="text" name="menu_item_cta[<?php echo $item_id ;?>]" id="menu-item-cta-<?php echo $item_id ;?>" value="<?php echo esc_attr( $menu_item_cta ); ?>" />
</div>
</div>
<?php
}
add_action( 'wp_nav_menu_item_custom_fields', 'castos_menu_item_desc', 10, 2 );
// Save custom field values
function castos_save_menu_item_desc( $menu_id, $menu_item_db_id ) {
if ( ! isset( $_POST['_castos_custom_menu_meta_nonce_name'] ) || ! wp_verify_nonce( $_POST['_castos_custom_menu_meta_nonce_name'], 'castos_custom_menu_meta_nonce' ) ) {
return $menu_id;
}
if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) {
$sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] );
update_post_meta( $menu_item_db_id, '_castos_menu_item_desc', $sanitized_data );
} else {
delete_post_meta( $menu_item_db_id, '_castos_menu_item_desc' );
}
if ( isset( $_POST['menu_item_svg'][$menu_item_db_id] ) ) {
$sanitized_data = sanitize_text_field( $_POST['menu_item_svg'][$menu_item_db_id] );
update_post_meta( $menu_item_db_id, '_castos_menu_item_svg', $sanitized_data );
} else {
delete_post_meta( $menu_item_db_id, '_castos_menu_item_svg' );
}
if ( isset( $_POST['menu_item_cta'][$menu_item_db_id] ) ) {
$sanitized_data = sanitize_text_field( $_POST['menu_item_cta'][$menu_item_db_id] );
update_post_meta( $menu_item_db_id, '_castos_menu_item_cta', $sanitized_data );
} else {
delete_post_meta( $menu_item_db_id, '_castos_menu_item_cta' );
}
}
add_action( 'wp_update_nav_menu_item', 'castos_save_menu_item_desc', 10, 2 );
// Conditionally display front end HTML
function castos_show_menu_item_desc( $title, $item ) {
$castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); // Array of All Options
$svg_sprite_url_0 = $castos_mega_menu_options['svg_sprite_url_0']; // SVG Sprite URL
if( is_object( $item ) && isset( $item->ID ) ) {
$menu_item_desc = get_post_meta( $item->ID, '_castos_menu_item_desc', true );
$menu_item_svg = get_post_meta( $item->ID, '_castos_menu_item_svg', true );
$menu_item_cta = get_post_meta( $item->ID, '_castos_menu_item_cta', true );
if ( ! empty( $menu_item_svg ) && empty( $menu_item_cta ) ) {
$title = '<svg width="40px" height="40px" class="icon"><use xlink:href="'.$svg_sprite_url_0.'#icon-'. $menu_item_svg .'"></use></svg><div class="title-wrap"><span class="menu-title">' . $title . '</span><p class="menu-item-desc">' . $menu_item_desc . '</p></div>';
} if ( ! empty( $menu_item_cta ) ) {
$title = '<div class="cta-wrap"><span class="menu-title">' . $title . '</span><p class="menu-item-desc">' . $menu_item_desc . '</p><span class="cta-button">' . $menu_item_cta . '</span></div>';
}
}
return $title;
}
add_filter( 'nav_menu_item_title', 'castos_show_menu_item_desc', 10, 2 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment