How to get ids of elemenent for menu in header?

Question

I'm editing a wordpress theme. (this: Onetone theme) I'm trying to make some pages like the home seeing the theme don't provide it (I've already contacted them). So in each page i would have some < section > with a specific id and a menu with the link for each of them.

I've already make a proof:

<?php
$sections = array('home','A','B','C','D');// home,A,B,C,D are the ids of the section added manually
foreach ($sections as $section) {
    echo '<li  class="onetone-menuitem"><a class="onetone-menu-link" id="onetone-menu-'.$section.'" href="#'.$section.'" >
 <span>'.$section.'</span></a></li>';
}?>

But as you can see,I was not able to get programmatically the ids of the sections. How can i do it? Thanks.

@GavinSimpson the problem is add programmatically in $sections the ids of the sections in the page. — Leonardo Rignanese, Feb 07 '15 at 17:48
That's not enough to go on. How do you create the sections in the first place? — Gavin Simpson, Feb 07 '15 at 17:54
The sections there already are in the content.php. This is in the header.php, in the menu. So when the page will load, the script has to read the id of sections in the page and generate a menu. I hope I explained myself. — Leonardo Rignanese, Feb 07 '15 at 17:57
That does help a bit thanks. However, in content.php, are the id's hard coded or generated somehow? If generate, can you show some code of where it is getting the id's from? — Gavin Simpson, Feb 07 '15 at 18:00
Well, if they are static, then you can just duplicate the section id's in your array in header.php. You could of course also use jQuery to do the menu you require after the page has loaded, or use DomDocument, but why bother with the complication? Is there a particular reason you want to get them programmatically? — Gavin Simpson, Feb 07 '15 at 18:51
@GavinSimpson thanks for the answers. I need this because i've one header witch will stay in all pages and each page has his different section. In this way for each page i will have different menu generated by the same code. do you undestend me? — Leonardo Rignanese, Feb 07 '15 at 19:02
I understand, and it's not so simple, yet it can be simple. The most obvious solution that comes to mind for me is to use jQuery to extract all the page's id's and then generate the menu. It won;t be difficult if you know jQuery, otherwise you have a bit or research to do :) — Gavin Simpson, Feb 08 '15 at 06:40

score 0 · Accepted Answer · answered Feb 08 '15 at 08:29

Using jQuery to extract the section id's, here is a basic working example to get you started. You canpaste this code in a php or html file and call it from your browser. The only thing you will need the change is the location of jquery.js.

<!doctype html>
<head>
<script type='text/javascript' src='http://localhost/lccs/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<style>
.menu-item
{
    display: inline-block;
    padding: 1em;
    background-color: #444;
}
</style>
<script language="javascript">
jQuery(document).ready(function($)
{
        $("section").each(function()
        {
            var menucode="<span class='menu-item'><a href='#"+this.id+"'>Item</a></span>";
            $("#menu-items").append(menucode);
            console.log(menucode);
        });
});
</script>

</head>
<body>
<main id="main" class="site-main" role="main">
<aside class="menu-aside">
<h4>Menu</h4>
<span id="menu-items"></span>
</aside>
<article class='student type-student status-publish hentry'>
</article>
</main>
<h1>Heading</h1>
<section id="seca-1"><h2>Section A</h2>
</section>
<section id="seca-2"><h2>Section B</h2>
</section>
<section id="seca-3"><h2>Section C</h2>
</section>
<section id="seca-4"><h2>Section D</h2>
</section>
</body>
</html>

How to get ids of elemenent for menu in header?

1 Answers1