Add Dynamic PHP Code in WordPress Via jQuery HTML Replace?

Question

I'm stuck using a theme in WordPress for a client where the header is horrible in responsive view. I can work with desktop widths but anything below 768px needs to have an entirely different markup because of the clients demands -- any attempt to try to do this via CSS has led to even more UI disasters. My hope was to utilize jQuery's .html() functionality to swap out Bootstrap grid elements at < 768px. Here's a snippet example -- say I needed to move the logo from a far right position in desktop to the first element on the left in a header. I'm using the theme's declarations for the dynamic logo correctly:

if($(window).width() < 768) {
        $('.top-bar').html('<div class="col-md-3"><?php vg_ebuilder_display_logo_sticky(); ?><div class="logo-inside"><?php vg_ebuilder_display_top_logo(); ?></div></div>');
    }

But this returns commented out PHP:

<!--?php vg_ebuilder_display_logo_sticky(); ?-->

and

<!--?php vg_ebuilder_display_top_logo(); ?-->

So, maybe two questions here: is there a way to add dynamic PHP like this in WordPress via a jQuery .html() function on $(document).ready and, assuming it could, would it indeed be dynamic if loaded after the DOM?

Taplar · Accepted Answer · 2018-03-02 18:10:15Z

1

No. PHP runs on the server, not the client. The javascript would need to make a call to an endpoint that would perform the php logic, return a response, and that response put on the page. Inserting php on the client will not be invoked.

answered Mar 2, 2018 at 18:10

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gillian · Accepted Answer · 2018-03-02 18:36:20Z

I can't 'comment' a suggestion to you as my reputation isn't yet 50, so hopefully this is the right answer. I found this worked for me with a similar issue in Joomla (Q48891999).

In the div you want to change, add a unique class, e.g. "builder". Then, if you need to, write a new css class or classes starting with

@media (max-width: 767px) {
  .your_new_class {
   }
}

- but not using the name 'builder' for the new class - in your custom css file for the div you want to change.

Then use jquery .addClass to apply the css class to your div in your index.php. Something like this:

<script>
$( ".builder" ).addClass( "the_class_you_want_to_apply another_class" );
</script>

The spaces between the parentheses and the double quotes are deliberate, as used in the examples on the jquery website.

In my case, I added this to the bottom of my index.php just before the closing body tag.

You may need to have more than one of these scripts to apply to different elements.

That could be a workable solution, though maybe too tricky with the multiple fields that need re-positioning throughout the header -- there's a variety of dynamic PHP widgets at play (search, menu, etc.) that don't just need the Bootstrap class widths changed but the entire container reworked top to bottom. Though this does give me some other ideas -- thanks.

Collectives™ on Stack Overflow

Add Dynamic PHP Code in WordPress Via jQuery HTML Replace?

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related