wordpress custom menu create for specific page and footer menu
//functions.php code
// Register additional menus for header and footer
add_action( 'init', 'register_additional_menus' );
function register_additional_menus() {
register_nav_menus(
array(
'header_menu' => __( 'Header Menu', 'us' ),
'footer_menu' => __( 'Footer Menu', 'us' ),
'footer_column_1' => __( 'Footer Column 1', 'us' ),
'footer_column_2' => __( 'Footer Column 2', 'us' ),
'footer_column_3' => __( 'Footer Column 3', 'us' ),
'footer_column_4' => __( 'Footer Column 4', 'us' ),
)
);
}
// Add Footer Customizer Options
function custom_footer_customizer( $wp_customize ) {
// Add Footer Logo Section
$wp_customize->add_section( 'footer_logo_section', array(
'title' => __( 'Footer Logo', 'your-theme-textdomain' ),
'priority' => 30,
));
$wp_customize->add_setting( 'footer_logo' );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'footer_logo', array(
'label' => __( 'Upload Footer Logo', 'your-theme-textdomain' ),
'section' => 'footer_logo_section',
'settings' => 'footer_logo',
)));
// Add Social Media Links Section
$wp_customize->add_section( 'footer_social_section', array(
'title' => __( 'Footer Social Media', 'your-theme-textdomain' ),
'priority' => 31,
));
$wp_customize->add_setting( 'footer_facebook' );
$wp_customize->add_control( 'footer_facebook', array(
'label' => __( 'Facebook URL', 'your-theme-textdomain' ),
'section' => 'footer_social_section',
'type' => 'url',
));
$wp_customize->add_setting( 'footer_twitter' );
$wp_customize->add_control( 'footer_twitter', array(
'label' => __( 'Twitter URL', 'your-theme-textdomain' ),
'section' => 'footer_social_section',
'type' => 'url',
));
// Add more social media controls as needed
}
add_action( 'customize_register', 'custom_footer_customizer' );
//footer.php code: only display this menu for custion page,
<?php defined( 'ABSPATH' ) OR die( 'This script cannot be accessed directly.' ); ?>
<?php
// Check if we are on the specific page where the custom footer should be displayed
if ( is_page( 'about' ) ) : // Change 'about' to the slug of your specific page
?>
<!-- Custom Footer -->
<footer class="l-footer">
<div class="footer-container" style="display: flex; justify-content: space-between;"> <!-- Use flexbox for layout -->
<!-- First Column: Logo, Menu, and Social Media -->
<div class="footer-column" style="flex: 1; padding: 10px;">
<h5 style="font-weight:bold;">Get to know us</h5>
<!-- Footer Logo -->
<div class="footer-logo">
<?php if ( get_theme_mod( 'footer_logo' ) ) : ?>
<img src="<?php echo esc_url( get_theme_mod( 'footer_logo' ) ); ?>" alt="<?php bloginfo( 'name' ); ?> Logo">
<?php endif; ?>
</div>
<!-- Footer Menu Column 1 -->
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_1',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
<!-- Social Media Links -->
<div class="footer-social">
<?php if ( get_theme_mod( 'footer_facebook' ) ) : ?>
<a href="<?php echo esc_url( get_theme_mod( 'footer_facebook' ) ); ?>" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
<?php endif; ?>
<?php if ( get_theme_mod( 'footer_twitter' ) ) : ?>
<a href="<?php echo esc_url( get_theme_mod( 'footer_twitter' ) ); ?>" target="_blank">
<i class="fab fa-twitter"></i>
</a>
<?php endif; ?>
<!-- Add more social media links as needed -->
</div>
</div>
<!-- Second Column: Menu -->
<div class="footer-column" style="flex: 1; padding: 10px;">
<h5 style="font-weight:bold;">Services</h5>
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_2',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
</div>
<!-- Third Column: Menu -->
<div class="footer-column" style="flex: 1; padding: 10px;">
<h5 style="font-weight:bold;">Our Product</h5>
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_3',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
</div>
<!-- Fourth Column: Menu -->
<div class="footer-column" style="flex: 1; padding: 10px; margin-left:10px !important;">
<h5 style="font-weight:bold;">Get in Touch</h5>
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_4',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
</div>
</div>
</footer>
<?php else : // If not on the specific page, display the existing footer ?>
<!-- Existing Footer -->
<footer class="l-footer">
<section class="l-section color_footer-top">
<div class="l-section-h i-cf align_center">
<span><?php bloginfo( 'name' ); ?></span>
</div>
</section>
</footer>
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>
//header.php code:
<?php defined( 'ABSPATH' ) OR die( 'This script cannot be accessed directly.' );
/**
* The template for displaying website header
*
* Do not overload this file directly. Instead have a look at templates/header.php file in us-core plugin folder:
* you should find all the needed hooks there.
*/
if ( function_exists( 'us_load_template' ) ) {
us_load_template( 'templates/header' );
} else {
?>
<!DOCTYPE HTML>
<html class="no-touch" <?php language_attributes( 'html' ) ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class( 'l-body header_hor state_default NO_US_CORE' ); ?>>
<?php wp_body_open(); ?>
<div class="l-canvas">
<header class="l-header pos_static">
<div class="l-subheader at_middle">
<div class="l-subheader-h">
<div class="l-subheader-cell at_left">
<div class="w-text">
<a class="w-text-h" href="/">
<span class="w-text-value"><?php bloginfo( 'name' ); ?></span>
</a>
</div>
</div>
<div class="l-subheader-cell at_center"></div>
<div class="l-subheader-cell at_right">
<nav class="w-nav height_full dropdown_opacity type_desktop">
<ul class="w-nav-list level_1">
<?php
// Check the current page and set menu accordingly
if ( is_page( 'about' ) ) {
wp_nav_menu(
array(
'theme_location' => 'header_menu', // Header Menu for About Page
'menu' => 'About Header Menu', // Menu name assigned in WP Admin
'container' => FALSE,
'walker' => new US_Walker_Nav_Menu(),
'items_wrap' => '%3$s',
'fallback_cb' => FALSE,
)
);
} elseif ( is_home() ) {
wp_nav_menu(
array(
'theme_location' => 'header_menu', // Header Menu for Home Page
'menu' => 'Home Header Menu', // Menu name assigned in WP Admin
'container' => FALSE,
'walker' => new US_Walker_Nav_Menu(),
'items_wrap' => '%3$s',
'fallback_cb' => FALSE,
)
);
} else {
wp_nav_menu(
array(
'theme_location' => 'us_main_menu', // Default Menu
'container' => FALSE,
'walker' => new US_Walker_Nav_Menu(),
'items_wrap' => '%3$s',
'fallback_cb' => FALSE,
)
);
}
?>
</ul>
</nav>
</div>
</div>
</div>
</header>
<?php
}
//footer.php code, except home page display,
<?php defined( 'ABSPATH' ) OR die( 'This script cannot be accessed directly.' ); ?>
<?php
// Check if we are NOT on the home page
if ( ! is_front_page() ) : ?>
<!-- Custom Footer for All Other Pages Except Home -->
<footer class="l-footer">
<div class="footer-container" style="display: flex; justify-content: space-between;"> <!-- Use flexbox for layout -->
<!-- First Column: Logo, Menu, and Social Media -->
<div class="footer-column" style="flex: 1; padding: 10px;">
<h5 style="font-weight:bold;">Get to know us</h5>
<!-- Footer Logo -->
<div class="footer-logo">
<?php if ( get_theme_mod( 'footer_logo' ) ) : ?>
<img src="<?php echo esc_url( get_theme_mod( 'footer_logo' ) ); ?>" alt="<?php bloginfo( 'name' ); ?> Logo">
<?php endif; ?>
</div>
<!-- Footer Menu Column 1 -->
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_1',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
<!-- Social Media Links -->
<div class="footer-social">
<?php if ( get_theme_mod( 'footer_facebook' ) ) : ?>
<a href="<?php echo esc_url( get_theme_mod( 'footer_facebook' ) ); ?>" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
<?php endif; ?>
<?php if ( get_theme_mod( 'footer_twitter' ) ) : ?>
<a href="<?php echo esc_url( get_theme_mod( 'footer_twitter' ) ); ?>" target="_blank">
<i class="fab fa-twitter"></i>
</a>
<?php endif; ?>
<!-- Add more social media links as needed -->
</div>
</div>
<!-- Second Column: Menu -->
<div class="footer-column" style="flex: 1; padding: 10px;">
<h5 style="font-weight:bold;">Services</h5>
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_2',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
</div>
<!-- Third Column: Menu -->
<div class="footer-column" style="flex: 1; padding: 10px;">
<h5 style="font-weight:bold;">Our Product</h5>
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_3',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
</div>
<!-- Fourth Column: Menu -->
<div class="footer-column" style="flex: 1; padding: 10px; margin-left:10px !important;">
<h5 style="font-weight:bold;">Get in Touch</h5>
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_4',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
</div>
</div>
</footer>
<?php else : ?>
<!-- Existing Footer for Home Page -->
<?php
if ( function_exists( 'us_load_template' ) ) {
us_load_template( 'templates/footer' );
} else {
?>
</div>
<footer class="l-footer">
<section class="l-section color_footer-top">
<div class="l-section-h i-cf align_center">
<span><?php bloginfo( 'name' ); ?></span>
</div>
</section>
</footer>
<?php wp_footer(); ?>
</body>
</html>
<?php
}
?>
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>
//footer.php custom menu display except some of page,
<?php defined( 'ABSPATH' ) OR die( 'This script cannot be accessed directly.' ); ?>
<?php
// Define an array of page slugs or IDs where you want to exclude the custom footer
$exclude_pages = array('home-new', 'contact', 'another-page-slug'); // Replace with your page slugs or IDs
// Check if we are NOT on the specific pages where the custom footer should be excluded
if ( ! is_page( $exclude_pages ) ) : ?>
<!-- Custom Footer for All Other Pages -->
<footer class="l-footer">
<div class="footer-container" style="display: flex; justify-content: space-between;"> <!-- Use flexbox for layout -->
<!-- First Column: Logo, Menu, and Social Media -->
<div class="footer-column" style="flex: 1; padding: 10px;">
<h5 style="font-weight:bold;">Get to know us</h5>
<!-- Footer Logo -->
<div class="footer-logo">
<?php if ( get_theme_mod( 'footer_logo' ) ) : ?>
<img src="<?php echo esc_url( get_theme_mod( 'footer_logo' ) ); ?>" alt="<?php bloginfo( 'name' ); ?> Logo">
<?php endif; ?>
</div>
<!-- Footer Menu Column 1 -->
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_1',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
<!-- Social Media Links -->
<div class="footer-social">
<?php if ( get_theme_mod( 'footer_facebook' ) ) : ?>
<a href="<?php echo esc_url( get_theme_mod( 'footer_facebook' ) ); ?>" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
<?php endif; ?>
<?php if ( get_theme_mod( 'footer_twitter' ) ) : ?>
<a href="<?php echo esc_url( get_theme_mod( 'footer_twitter' ) ); ?>" target="_blank">
<i class="fab fa-twitter"></i>
</a>
<?php endif; ?>
<!-- Add more social media links as needed -->
</div>
</div>
<!-- Second Column: Menu -->
<div class="footer-column" style="flex: 1; padding: 10px;">
<h5 style="font-weight:bold;">Services</h5>
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_2',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
</div>
<!-- Third Column: Menu -->
<div class="footer-column" style="flex: 1; padding: 10px;">
<h5 style="font-weight:bold;">Our Product</h5>
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_3',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
</div>
<!-- Fourth Column: Menu -->
<div class="footer-column" style="flex: 1; padding: 10px; margin-left:10px !important;">
<h5 style="font-weight:bold;">Get in Touch</h5>
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_column_4',
'container' => false,
'items_wrap' => '<ul class="footer-menu">%3$s</ul>',
'fallback_cb' => false,
)
);
?>
</nav>
</div>
</div>
</footer>
<?php else : ?>
<!-- Existing Footer for Excluded Pages -->
<?php
if ( function_exists( 'us_load_template' ) ) {
us_load_template( 'templates/footer' );
} else {
?>
</div>
<footer class="l-footer">
<section class="l-section color_footer-top">
<div class="l-section-h i-cf align_center">
<span><?php bloginfo( 'name' ); ?></span>
</div>
</section>
</footer>
<?php wp_footer(); ?>
</body>
</html>
<?php
}
?>
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>
No comments