I am trying to do a preg_match on a menu. But the php seems to keep skipping what should be the first match. I can't find the reason.
<div id="subnav">
<div class="wrap">
<ul id="menu-patternstutorials" class="nav superfish">
<li id="menu-item-11512" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home current-menu-ancestor menu-item-11512">
Patterns Tutorials
<ul class="sub-menu">
<li id="menu-item-11506" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-ancestor current-menu-parent menu-item-11506 star-li-bg">
<a title=" TEST" href="http://localhost/Sites/craftpassion/category/needle-craft/sewing">Sewing</a>
<ul class="sub-menu">
<li id="menu-item-11508" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home current-menu-ancestor current-menu-parent menu-item-11508">
Basic Techniques
<ul class="sub-menu">
The PHP
$pattern = '#<ul[^`]*?>[\s]*?<li [^`]*?>[\s]*?<a[^`]*?>([^`]*?)</a>[\s]*?<ul[^`]*?>#i';
preg_match($pattern, $menu, $matches);
I was expecting:
<ul id="menu-patternstutorials" class="nav superfish">
<li id="menu-item-11512" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home current-menu-ancestor menu-item-11512">
Patterns Tutorials
<ul class="sub-menu">
But keep getting:
<ul class="sub-menu">
<li id="menu-item-11506" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-ancestor current-menu-parent menu-item-11506 star-li-bg">
<a title=" TEST" href="http://localhost/Sites/craftpassion/category/needle-craft/sewing">Sewing</a>
<ul class="sub-menu">
Why is it not matching the first expected?
HTML != regular language. See:
RegEx match open tags except XHTML self-contained tags
Do not parse (X)HTML using regular expressions. It is not possible to do that (properly), since you are not dealing with a regular language (which is what regular expressions are able to handle). Use a DOM or SAX parser instead.
Related
I am trying to create a custom markup for my WordPress menu, when I add a menu in WordPress, the HTML that shows is as follows:
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-13">
Home
</li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
Another Sample
</li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15">
Sample Page
<ul class="sub-menu">
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-22">
Hello world!
</li>
</ul>
</li>
</ul>
</div>
I'm trying to change the code so that it will display using the anchor and div tags instead of ul and li. This is to work with the Bulma framework.
Normal link code:
<a class="navbar-item" href="#">Home</a>
Dropdown link code:
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Sample Page</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="#">Sample Link</a>
</div>
</div>
Another reason I am trying to do this is to remove all of the unnecessary class and id attributes that WordPress automatically adds.
Is this possible with WordPress by using a walker?
Yes it is, you can use
https://github.com/wp-bootstrap/wp-bootstrap-navwalker (most common)
You can also check
1) https://github.com/wp-bootstrap/wp-bootstrap-navlist-walker
2) https://github.com/jprieton/wp-bootstrap4-navwalker
3) https://github.com/dupkey/bs4navwalker
I am making a wordpress theme using _s as a basis. I am trying to style the menu. So far I don't have any particular CSS on the menu. I have looked at the (responsive) menu for the Twenty Sixteen theme, and I want to have the same the of menu, but only the "responsive" menu for smaller screens. On my site, the menu does not have to be responsive though. The menu (on smaller screens) looks like this, which is what I want:
Twenty Sixteen theme demo: https://twentysixteendemo.wordpress.com/ (You have to resize to a small screen to see the menu I am talking about)
I want that type of menu largely because it has the ability for a "expand/drop-down button" that can show sub-content in the menu.
So my question is: how can I style my menu so that it looks like the Twenty Sixteen theme's (mobile/tablet) menu including the button that expands the menu sub-categories?
I have searched the web for days without finding info on this. It seems every article that merely address the issue are just copy-paste of other badly explained articles.
This is the rendered HTML I have for my menu right now:
<ul id="primary-menu" class="main-menu"><li class="has-children menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1706">Group 1
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1707">Sub Group 1
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1708">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1709">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1710">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1711">Sub Group 2
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1712">Sub Group Level 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1713">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1714">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1715">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1730">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1731">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1718">Group 2
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1719">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1720">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1721">Group 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1722">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1723">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1724">Group 4
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1725">Sub Group 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1726">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1727">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1728">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1729">Image</li>
</ul>
</li>
</ul>
This is the menu in my header.php
<div class="menu-container">
<nav id="site-navigation" class="main-navigation" role="navigation">
<?php wp_nav_menu(array(
'theme_location' => 'primary',
'sort_column' => 'menu_order',
'menu' => 'Categories',
'container_class' => 'main-menu',
'menu_id' => 'primary-menu',
'menu_class' => 'main-menu'
) ); ?>
</nav><!-- #site-navigation -->
</div><!-- #menu-container -->
What my menu looks like now:
You can achieve this with javascript (jquery) or only with css.
Css example: https://codyhouse.co/gem/css-multi-level-accordion-menu/
jquery example: https://perishablepress.com/jquery-accordion-menu-tutorial/
hope this helps
Can someone please help me? I have this php regex function:
preg_replace_callback('/(<li[^>]+class=")([^"]+)("?[^>]+>[^>]+>)([^<]+)<\/a>/')
and I want it to match this string (which is a BootStrap Navbar Group Item):
<li id="menu-item-63" class="fa-home menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-63 dropdown open"><a title="Menu" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Menu <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a title="Multiple Paragraph Page" href="http://localhost:8888/point/?page_id=33">Multiple Paragraph Page</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a title="Grandchild Page" href="http://localhost:8888/point/?page_id=40">Grandchild Page</a></li>
<li role="presentation" class="divider"></li>
<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a title="Child Page" href="http://localhost:8888/point/?page_id=39">Child Page</a></li>
</ul>
</li>
The function currently works for non group items, like this. But I want it to also include the first LI item above. What the rest of the script then does is, it adds the FontAwesome classes and modifies the Link Text like below:
<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
<a title="Headers Page" href="http://localhost:8888/point/?page_id=38">
<i class="fa-home fa"></i>
<span class="fontawesome-text"> Headers Page</span>
</a>
</li>
Any help would be much appreciated!
also, here is the complete code from where I got the regex function from: http://pastebin.com/nQttGRnr
I gave up on trying to utilize this script. I figured my problem was that I tried to use the WP Nav Menu Settings Classes, whereas Title Attribute worked without problems!
I have a navigation menu which uses Wordpress' wp_nav_menu() function to first render the parent categories and all child categories to that category in a drop down sub menu. The markup looks as follows:
<li id="menu-item-256" class="category-electronics menu-item menu-item-type-taxonomy menu-item-object-category">
<a class="expander-btn" href="#">
<div class="drop-down">
<div class="arrow left"></div>
<ul class="sub-menu">
<li id="menu-item-272" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-271" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-270" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-269" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-268" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-267" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-266" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-265" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-264" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-263" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-262" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-261" class="menu-item menu-item-type-taxonomy menu-item-object-category">
</ul>
</div>
</li>
I would like to be able to split the child categories up in columns (with 5 or 6 links in each column), but don't really know how to go about to accomplish this. I've spent almost 30 hours on this now to no avail, so any ideas would be much appreciated. Thanks in advance!
You can always use a http://codex.wordpress.org/Function_Reference/wp_nav_menu#Using_a_Custom_Walker_Function to format a decent HTML markup for columns as many as you want.
There is also another solution possible by using only CSS. Just put width on the <ul> and width of the <li>(the <ul> should be twice as wide as the <li>) and float the <li> elements inside.
First <li> in the first column
Second <li> in the second column
Third <li> in the first column
etc.
Code used in functions.php to create WordPress [Dropdown enabled] Twitter Bootstrap
Menu: http://pastebin.com/HCxCcBmG
Code used in header.php: http://pastebin.com/7eTHTjij
Here's what gets generated for the dropdown menu code:
<ul class="dropdown-menu">
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">
site design
</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
app design
</li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">
windows
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">
mac
</li>
</ul>
How do I remove the additional anchor tag/link genereated in the first dropdown menu link? Like this:
<ul class="dropdown-menu">
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">
site design
</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
app design
</li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">
windows
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">
mac
</li>
</ul>