使用functions.php在id之后放置内容

Question

I'm developing a site for my company using wordpress+divi theme, this is hard customized due some booking system implementantations and personalized css, so I have made a child theme to avoid problems. Now the question: Is there a way using my functions.php child file, to add a hook filter that can place content after a particular ID like

<li id="first-menu-item">home</li>
//my custom content through functions.php goes here
<li id="second-menu-item">portfolio</li>
<li id="third-menu-item">contacts</li>

I know that this is possible using jquery in this way

<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery ( '#first-menu.item' ) .after( '<li>my custom content</li>' );
});
</script>

and this works but I think that this is not the right way cause what I want to place after that specific ID is note only html code but a wordpress search function and I think that It's wrong to think that I can place php tags inside a jquery.. so I have to add this

<?php get_search_form(); ?>

directly in my header.php but I want to avoid this cause the divi's develepors maybe can update the header.php file and I have to edit again my child header.php so I have to do this through my child function.php...I found that wordpress have different filter hook for making this like "wp_nav_menu_items" but what if I want to put code after a specific line/div/id/class?

Answer 1

This can be done using a custom helper function and adding filter on "wp_get_nav_menu_items". Following is the custom helper function you can use.

function _custom_nav_menu_item( $title, $url, $order, $parent = 0 ){
  $item = new stdClass();
  $item->ID = 1000000 + $order + parent;
  $item->db_id = $item->ID;
  $item->title = $title;
  $item->url = $url;
  $item->menu_order = $order;
  $item->menu_item_parent = $parent;
  $item->type = '';
  $item->object = '';
  $item->object_id = '';
  $item->classes = array();
  $item->target = '';
  $item->attr_title = '';
  $item->description = '';
  $item->xfn = '';
  $item->status = '';
  return $item;
}

And following is how you can add filter.

add_filter( 'wp_get_nav_menu_items', 'your_custom_function', 20, 2 );
function your_custom_function( $items, $menu ){
  //your logic and code for customization
  return $items;
}

You will have define your own logic to identify right location. I have successfully used this with Divi theme.

Hope this will give you at least a starting point. Well, I wonder though, why you would want to add search form in nav menus!

===== Update =====

You can customize wrapper of your menu to add something else. Please check this thread. This will be useful for you.

Also, to enable this functionality only for mobile version, you can use another plugin which detects mobile devices, mobble.

I have used this plugin many times on many websites and its results are quite reliable. You can conditionally enable the custom functionality using "is_mobile()" function from this plugin so you do not have to depend on css to hide the same on desktop devices.