0

I am adding a custom nav bar thanks to this awesome guide by Pressidium! I have tried contacting the author but they aren't responding.

Things started to go awry after editing the functions.php, like seeing the navigation in random parts of WordPress' dashboard, click to a page to edit within WordPress and the navigation would load first, but after a refresh the page would load as it should. I am unable to select media as well. After checking php compatibility I got this error: SyntaxError. Unexpected token < in JSON at position 0 (click for full error message)

I'm confused on how changing the classes of the navbar to better add CSS could affect the JSON, I'm at a loss of how to fix this. If it helps, the website is beechconstructionllc.com. Thanks!

EDIT: My php is version 7.4

Header.php file (had to add myself)

<header id="site-header" class="header-footer-group" 
 role="banner">
<?php 
     wp_nav_menu( 
         array( 
             'theme_location' => 'my-custom-menu'
          ) 
     ); 
 ?>

Functions.php file:

    //start of added code
    function my_custom_menu() {
        register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
    }
    add_action( 'init', 'my_custom_menu' );
    
    wp_nav_menu( 
        array( 
            'theme_location' => 'my-custom-menu',
            'menu_class' => 'my-custom-menu',
            'container' => 'nav',
        ) 
    );  
    //start of original functions.php file!!

<?php
/**
 * Twenty Twenty-Two functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_Two
 * @since Twenty Twenty-Two 1.0
 */


if ( ! function_exists( 'twentytwentytwo_support' ) ) :

    /**
     * Sets up theme defaults and registers support for various WordPress features.
     *
     * @since Twenty Twenty-Two 1.0
     *
     * @return void
     */
    function twentytwentytwo_support() {

        // Add support for block styles.
        add_theme_support( 'wp-block-styles' );

        // Enqueue editor styles.
        add_editor_style( 'style.css' );

    }

endif;

add_action( 'after_setup_theme', 'twentytwentytwo_support' );

if ( ! function_exists( 'twentytwentytwo_styles' ) ) :

    /**
     * Enqueue styles.
     *
     * @since Twenty Twenty-Two 1.0
     *
     * @return void
     */
    function twentytwentytwo_styles() {
        // Register theme stylesheet.
        $theme_version = wp_get_theme()->get( 'Version' );

        $version_string = is_string( $theme_version ) ? $theme_version : false;
        wp_register_style(
            'twentytwentytwo-style',
            get_template_directory_uri() . '/style.css',
            array(),
            $version_string
        );

        // Enqueue theme stylesheet.
        wp_enqueue_style( 'twentytwentytwo-style' );

    }

endif;

add_action( 'wp_enqueue_scripts', 'twentytwentytwo_styles' );

// Add block patterns
require get_template_directory() . '/inc/block-patterns.php';

After adding classes, this is what inspect element looks like for the navbar

<nav class="menu-mainmenu-container">
     <ul id="menu-mainmenu" class="my-custom-menu">
         <li id="menu-item-356" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-356"><a href="https://beechconstructionllc.com/portfolio/">portfolio</a>
         </li>
         <li id="menu-item-358" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-358"><a href="https://beechconstructionllc.com/about/">about</a>
         </li>
         <li id="menu-item-361" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-361"><a href="https://beechconstructionllc.com/careers/">careers</a>
         </li>
         <li id="menu-item-357" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-357"><a href="https://beechconstructionllc.com/contact/">Contact</a>
         </li>
     </ul>
 </nav>
1
  • The "added code" in your functions.php file has to go after the initial <?php tag. If it doesn't, then it's not going to be interpreted and will be dumped out as HTML. You should move it to a position after the initial comment (after the */ line).
    – Pat J
    Aug 30 at 18:50

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.