portia79

Thank you for your reply. I’ll read on your suggestions.

I was busy elsewhere and picked it up yesterday. I’m having problems adding a panel/section to the customizer file of the underscores starter theme. I’ve read the customizer section of the official documentation but cannot get anything to work or appear in the customizer dashboard.

My addition is this bit:

 $wp_customize->add_panel( 'front', array(
        'title' => __( 'Front', 'Solar' ),
        'description' => 'my description', // Include html tags such as <p>.
        'priority' => 160, // Mixed with top-level-section hierarchy.
    ) );
    $wp_customize->add_section( 'front_section' , array(
        'title' => __('Footer_section', 'Solar'),
        'panel' => 'front',
    ) );

A whole customizer file is as follows:

<?php
/**
 * Solar Theme Customizer
 *
 * @package Solar
 */

/**
 * Add postMessage support for site title and description for the Theme Customizer.
 *
 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
 */
function Solar_customize_register( $wp_customize ) {
	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

    $wp_customize->add_panel( 'front', array(
        'title' => __( 'Front', 'Solar' ),
        'description' => 'my description', // Include html tags such as <p>.
        'priority' => 160, // Mixed with top-level-section hierarchy.
    ) );
    $wp_customize->add_section( 'front_section' , array(
        'title' => __('Footer_section', 'Solar'),
        'panel' => 'front',
    ) );

	if ( isset( $wp_customize->selective_refresh ) ) {
		$wp_customize->selective_refresh->add_partial(
			'blogname',
			array(
				'selector'        => '.site-title a',
				'render_callback' => 'Solar_customize_partial_blogname',
			)
		);
		$wp_customize->selective_refresh->add_partial(
			'blogdescription',
			array(
				'selector'        => '.site-description',
				'render_callback' => 'Solar_customize_partial_blogdescription',
			)
		);
	}
}
add_action( 'customize_register', 'Solar_customize_register' );

/**
 * Render the site title for the selective refresh partial.
 *
 * @return void
 */
function Solar_customize_partial_blogname() {
	bloginfo( 'name' );
}

/**
 * Render the site tagline for the selective refresh partial.
 *
 * @return void
 */
function Solar_customize_partial_blogdescription() {
	bloginfo( 'description' );
}

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function Solar_customize_preview_js() {
	wp_enqueue_script( 'Solar-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), _S_VERSION, true );
}
add_action( 'customize_preview_init', 'Solar_customize_preview_js' );

I just want to add a new panel/section with a text input field.

OK. Thanks. Will set up a customiser section.

Thanks for the reply. However, Smashing Magazine, for example, moved from traditional wordpress to headless wordpress with jamstack on netlify so it looks like it’s possible (and relatively big websites do it) just wondering how widespread is it and how exactly it works with WordPress.
https://www.smashingmagazine.com/2020/02/headless-wordpress-site-jamstack/

Got it. The control name didn’t match the setting!

I’ve changed: textarea_text_id to custom_text_id.

Now how do I access the value of that text box from my template?

OK. Thanks.

Thanks for your reply. Yeah, ideally, I’d want to avoid using another term. I was thinking that perhaps there is some way of doing a URL/slug rewrite so that for wordpress engine they are distinct (news and news-cat) but for the viewer seeing the url in a browser they all have /news/ in the url. Is that at all possible?

OK. Makes sense. Thank you.

Thanks. I can’t seem to be able to edit the original post. The base theme is underscores. Would you be able to move this thread to the relevant section, please?

OK. I managed to resolve the error by replacing “$” with “jQuery”.
Still, is it the recommended way of loading this jQuery snippet on that particular template?

Hey. Thanks. It actually worked with null.

I know that popular things are not always good things but isn’t it true that in recent years a lot of websites have been created as one page apps?

Ok. Thank you for the clarification.

Thanks for that. As you pointed out, the underscores menu is actually responsive but once you reach a certain breakpoint, instead of a hamburger, it shows a bare button (Mobile Menu) and when you click on it, it displays nav options horizontally underneath the button. So it’s all about styling then. The jquery functionality seems to be done via navigation.js that understrap loads.

At the moment the markup on the menu is:

<nav id="site-navigation" class="main-navigation">
   <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'my-slug' ); ?></button>
	<?php
	wp_nav_menu( array(
	'theme_location' => 'menu-1',
	'menu_id'        => 'primary-menu',
	) );
?>

</nav><!-- #site-navigation -->

And the css:

.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
    left: 100%;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
    left: auto;
}

.main-navigation li {
    float: left;
    position: relative;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

/* Small menu. */

.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {
    .menu-toggle {
        display: none;
    }
    .main-navigation ul {
        display: block;
    }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}

Is there an easy way of changing it to work with a hamburger icon? I tried your button version but it didn’t work. By the way, why do you need the span element in the button?

Thank you.

Thanks. I guess I’ll use ACF. Yeah, it does do what I’m after. Perhaps at some point a similarly flexible tool will be included with wordpress.