place content after id using functions.php - php

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.

Answer 2

really thank you for your reply, what I want to achive is to show after the last menu element in the only mobile version a search box, by default this is showed when you click an icon on top right, but I have a very strange wide logo and the languages flags that take up all the space , so I want to put the search box in a fullscreen mobile menu under the last element. I'm trying to understand your code and I'm just wondering if there is a way to put code after a specific div id in the header.php file but you are telling me to use the wp_get_nav_menu_items that is a filter for the navigation menu not for a class or id, I think that is little different from what I was asking for..I'm asking this also for other implementations
example