Replace element and all child elements

Hi! I'm new to Beans. So far it looks great, but some customizations I'm attempting are proving difficult. I've read much of the documentation, but still no luck. A confounding factor might be that I'm no expert at PHP or Wordpress code (I'm much more a front-end guy), though I've done some modification to other themes in the past.

My problem...

Beans is going to act as the blog portion of a static marketing site. To modify beans to perform this role, I need to modify the header and footer of the beans child theme to EXACTLY match the corresponding elements in the marketing site. I haven't been able to figure out how to do this effectively or cleanly.

Let's break it down into a sub-problem...

I'd like to take replace the entire header element (data-markup-id=beans_header) with the code from the marketing site. I need to replace the header and ALL child elements. How do I do this? Moreover how do I do this in a logical and efficient manner?

What I've tried....

I tired removing items from the header like this:

beans_remove_markup( 'beans_fixed_wrap_header' );
beans_remove_markup( 'beans_header');
beans_remove_markup( 'beans_site_branding' );
beans_remove_markup( 'beans_primary_menu' );
beans_remove_markup( 'beans_site_title_link' );
beans_remove_markup( 'beans_site_title_tag' );
//etc...

And then adding my custom code like this...

add_action( 'beans_main_prepend_markup', 'add_custom_header' );

Let's vastly simplify it and say I want to replace the header with...

<header class="custom-header"><div class="yo">yo yo yo!</div></header>

Of course I don't, but just for the sake of argument let's reference that.

Now this kind of works. I can prepend my markup, but removing the markup in the above manner seems unwiedly. Also everytime I remove an item its children are left, leading to a very long list of items I need to remove. Seems very messy.

Furthermore it totally removes all ability to modify any of the header content through the Wordpress Admin. I can't change a logo, or the navigation. It's not 100% necessary that I accomplish this, but it would be very very nice.

Another Route?

Now, it looks like there's another route to achieving what I want that may be better organized and preserve some Wordpress Admin modification ability. It involves changing something in this series of files:

/lib/render/template-parts.php
// Step 1. Defines and orders the elements to be rendered on the page

/lib/templates/structure/header-partial.php
// Step 2. Defines the markup for the header page element (I think)

/lib/templates/fragments/header.php
// Step 3. Further defines the markup (I think)

I think most of the markup is ultimately derived from header.php , while header-partial.php is in charge of the bare-bones of the markup. I'm not exactly sure how it all relates though. So I'm at a loss for how to modify this series let alone how to organize it.

What would really help are 1. examples of how you'd make this modification (completely replace the header) and 2. some help with how I could best conceptualize the relationships between the relevant files. If I work backwords from "Here's an element on the page I'd like to replace and/or modify" what should I subsequently look for in the files?

Thank you for any insights you can offer!

The following will completely remove beans_header and replace it with markup of your choosing.

beans_modify_action( 'beans_header_partial_template', 'beans_site_prepend_markup', 'add_custom_header' );

function add_custom_header() {

 // construct your header here
 $your_new_header = '<header class="custom-header"><div class="yo">yo yo yo!</div></header>';

    echo $your_new_header;

}

You could use the hook beans_main_prepend_markup instead of beans_site_prepend_markup as you suggested, but then the header would actually be located at the top of the content section.

For the footer, so as above except use beans_modify_action( 'beans_footer_partial_template', 'beans_site_append_markup', 'add_custom_footer' );.

Awesome! This worked great. 🙂

Now I'm trying to puzzle out how to add a link for the SVG logo that will go in the custom header html. The past methods I've used to add images to wordpress php files don't seem to be working. The path I'm using is

child-theme-name/assets/logo.svg

It seems like php (to insert the image link) placed into the following code won't execute.

'<header class="custom-header"><a href=""><img src=""></a><div class="yo">yo yo yo!</div></header>'
``` Is it a simple matter of escaping properly, or is something else more elaborate required?

Thank you! 

There's no PHP in your example (and the last part of your post got caught in the code snippet!). Can you share the code which you mentioned isn't working?

If your logo is located in your child theme folder, I don't see why it wouldn't work to create a variable $my_logo = get_template_directory_uri() . '/assets/logo.svg'; then call it like <img src="<?php echo $my_logo; ?>">.

You mentioned that most of your site is static and separate from the portion you're building on Beans. How exactly do you have this set up?