I'm trying to make a new theme for QuickApps CMS. When I try to echo:
<?php echo $this->Block->region('user-menu'); ?>
To render the user-menu in the new theme layout, it do two things:
Print out a title for the menu named "User Menu" while in the
Default theme it does not print this title.
In addition it prints different HTML as follows
My New Theme output
<div id="qa-block-5" class="qa-block qa-block-unique qa-block-menu">
<div id="block_5" class="block block-Menu delta-user-menu ">
<h2> User Menu </h2>
<div class="content">
<ul>
<li id="menu-item-22" class="first-item menu-item-22"><span>My account</span> </li>
<li id="menu-item-23" class="last-item menu-item-23"><span>Logout</span> </li>
</ul>
</div>
</div>
</div>
The Default Theme ouput
<div id="user-menu">
<div id="qa-block-5" class="qa-block qa-block-unique qa-block-menu">
<ul>
<li id="menu-item-22" class="first-item menu-item-22"><span>My account</span> </li>
<li id="menu-item-23" class="last-item menu-item-23"><span>Logout</span> </li>
</ul>
</div> </div>
I tried to find any elements that handles this HTML but I could not find. What I need to know is how to change the output of the menu according to my new theme? i.e change its HTML structure including styles class names.
If you need to customize the output, your theme can implement the "theme_block" view element,
it will be used when rendering each block.
Here you can see "Default Theme" implementation:
https://github.com/QuickAppsCMS/QuickApps-CMS/blob/1.1/QuickApps/View/Themed/Default/Elements/theme_block.ctp
QuickApps uses a series of view elements for when rendering, if your theme do not implement any of this core's element are used by default. Here you can see a list of elements your theme may implement:
https://github.com/QuickAppsCMS/QuickApps-CMS-Docs/blob/1.x/eng/designers/themes.md#rendering-elements
Best regards!
/Chris
PS: BTW, there are big changes coming in v2.0 so stay tuned. For example blocks & regions are now objects, you can now do nifty things, for instance:
$this->region('main-menu')
->merge($this->region('other-region'))
->blockLimit(5);
Related
I have a PHP function which contains the footer applied to each of my web pages. For the majority of the pages it is displayed as it should. But on some pages it isn't and it seems to be caused by what I can only describe as 'phantom elements' as they aren't within my HTML/PHP code but are shown in Elements of the browser Development Tools. See the below screenshot of the code:
Screenshot of code issue
Basically it adds an empty anchor element which contains no text but CSS is applied to it giving it the padding of the other tags, which ultimately pushes all of the other list and anchor elements to the right of the empty anchor.
The PHP function is:
function enterFooter (){
$pageFoot = <<<FOOT
<footer class="web-foot">
<div class="link-container">
<ul>
<li>
Homepage
</li>
<li>
Sitemap
</li>
<li>
Company
</li>
<li>
Home
</li>
</ul>
</div>
</footer>
FOOT;
echo $pageFooter;
Any ideas what could be causing this problem?
I'm new to wordpress.
Is it possible to use original HTML for navigation menu and edit its titles and URLs in wordpress admin?
My navigation HTML looks like this.
<nav>
<ul id="menu">
<li><a>Menu1</a>
<div class="slideToggleThis">
<ul>
<li><a>Menu1-1</a>
<ul>
<li>Menu1-1-1</li>
<li>Menu1-1-2</li>
<li>Menu1-1-3</li>
</ul>
</li>
<li><a>Menu1-2</a>
<ul>
<li>Menu1-2-1</li>
<li>Menu1-2-2</li>
<li>Menu1-2-3</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
<ul id="hamburger">
<li><a id="hamburgerFont"></a>
<ul>
<li><a>MenuS</a>
<ul>
<li>MenuA</li>
<li>MenuB</li>
<li>MenuC</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
As you can see from this, my nav has div between ul and li. The div is necessary because the nav is arranged with Flexbox, thus slideToggle from JQuery doesn't work properly without it (slideToggle changes affected elements' display to block which is not good for display: flex;).
As long as I know, HTML code created by "?php wp_nav_menu(); ?" is simple combination of ul and li which is different from mine.
Are there any solution for me to edit my original HTML navigation menu in wordpress admin? or should I manually change the php files every time I change the contents in the menu?
Thank you for reading.
There is a way of changing the structure of the WordPress menu. I'm not that good in explaining the exact code but this url may help you:
https://github.com/roikles/Wordpress-Bem-Menu
He creates a new navigation setup, based on BEM method, to create a new structure.
By calling bem_menu( you can add the navigation (read docs for more info). Here you can adjust your settings.
My colleague and I are working on a WordPress-Plugin that generated posts using a custom post type. It all work's fine until You look at the posts. The generated pages look good and use the Themes single.php template. The only problem is, that the menu, that works on all other pages of the site is empty on the pages generated by the plugin.
By empty I mean that the structure including links is there, just the text inside the <a> tags.
The generated menu on a post generated by the plugin looks like this
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<li class="page_item page-item-1763">
</li>
<li class="page_item page-item-1761">
</li>
[...]
</ul>
</div>
</nav>
For all other pages, the menu looks like this:
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<li class="page_item page-item-1763">
About
</li>
<li class="page_item page-item-1761">
Galerie
</li>
[...]
</ul>
</div>
</nav>
As You can see, the only difference is that there is no text between the <a> and </a> tags, which makes the menu unusable.
We really have no idea of how the plugin / custom-post-type creates this issue, as we tried this with different themes, and they all behave the same - so it is not an issue with the theme.
Any comment or hint that points in the right direction is greatly appreciated.
Okay, so I'm developing a site in wordpress and I have two file templates "Default Template" and "Shop" in both templates I have;
<?php include('breadcrumbs.php'); ?>
and inside the 'breadcrumbs.php' file I the following;
<div class="breadcrumbs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb">
<?php
if (function_exists('show_full_breadcrumb')) {
show_full_breadcrumb();
}
?>
</ol>
</div>
</div>
</div>
</div>
Now these breadcrumbs display properly if it is in the 'default template' like this;
But on the shop page display like this and I have no idea why as they're both including the same file;
now I'm not sure if this would affect much of it but I am also using WooCommerce.
Hopefully someone can help! thanks in advance!
It's definitely a css issue. Something is overriding the styling on that shop page. Use firebug to diagnose the breadcrumbs. Or provide a link so I can look at it. But Firebug will show you the ul styling right on the breadcrumbs and you can A/B between the default and the shop template. Should be an easy fix with the CSS
Hope this helps.
I have a navbar with sublists. I use this navbar for a CSS navbar at the top of my web page, with links for the main pages and drop-down lists for the pages in the sub-lists. I would like to use the same structure to create a navbar at the side of my page for sublists.
All of my HTML pages have the following line near the top of the <BODY> that creates the navbar:
<?php include('navbar.php'); ?>
CSS styling of this navbar is taken care of elsewhere.
Suppose my navbar.php file has the following:
<nav id="mainnavbar>
<ul id="index">
<li>Home</li>
<li>Personal
<ul id="personal">
<li>About Me</li>
<li>Contact Info</li>
</ul>
</li>
<li>Professional
<ul id="professional">
<li>Activities</li>
<li>Resume</li>
</ul>
</li>
</ul>
</nav>
The horizontal navbar at the top of my page would list "Home | Personal | Professional", and there would be dropdown menus on "Personal" and "Professional". This navbar is easily included on ALL pages for a uniform experience. Not too hard.
If a user actually navigates to one of the main (or "parent") pages (e.g. "Home", "Personal", or "Professional"), however, I want there to be a second, vertical navbar on the side of that page with links to that page's "children."
For example, if the user goes to the "Personal" page, there should be a side-navbar with links to "About Me" and "Contact Info". If instead the user navigates to "Professional", that sidebar should instead display links to "Activities" and "Resume". If the user decides to go back to the "Home" page, the sidebar should display "Personal" and "Professional". (Although it would be 100% fine if it also displayed "Home" -- perhaps it would be easier that way?)
While I could hard-code a new <nav> for each page, I already have a unordered list structure and would like to make use of it. Any ideas how this could be done, or if there's a better way to do it?
Perhaps I would want to dynamically generate (via the magic of PHP) a second instance of <nav> that is a sort of partial copy of <nav id="mainnavbar">, listed above, but including one of the nested unordered lists, rather than everything. Then I could position and stylize each navbar separately.
(Note that only the Home, Personal and Professional pages should have a sidebar navigation menu because only they have "child" pages. The "child" pages should not have a sub-menu. )
In essence, I should have the following:
For index.html, I should have the following dynamically generated based on navbar.php:
<nav id="subnavbar">
<ul id="index">
<li>Home</li>
<li>Personal </li
<li>Professional</li>
</ul>
</nav>
For personal.html, I should have the following dynamically generated based on navbar.php:
<nav id="subnavbar">
<ul id="professional">
<li>Activities</li>
<li>Resume</li>
</ul>
</nav>
For professional.html, I should have the following dynamically generated based on navbar.php:
<nav id="subnavbar">
<ul id="professional">
<li>Activities</li>
<li>Resume</li>
</ul>
</nav>
For all other pages, there should be no sidebar navigation. (Or perhaps I should have some default navbar as a placeholder??)
I'm not sure if having the same id for an unordered list in two different <nav> sections would be problematic, however.
Thanks again for your help!
You can use PHP to determine what page you are on, and print out different HTML for the different pages. I put together the simplest version of what you are asking for. Use the same principle to expand on this. You can use the $_SERVER superglobal to find out the current URL.
<?php
// See if current URL ends with "personal.html"
$personal = preg_match('/personal\.html$/',$_SERVER['REQUEST_URI']);
?>
<nav>
<ul>
<li>Home</li>
<li>Personal
<?php if (!$personal) print '<ul>'; ?>
<li>About Me</li>
<li>Contact Info</li>
<?php if (!$personal) print '</ul>'; ?>
</li>
<li>Professional
<ul>
<li>Activities</li>
<li>Resume</li>
</ul>
</li>
</ul>
</nav>
All I am doing here is removing the <ul> tags for the personal page, which will put the two nested <li> inline with the rest of the navbar elements. You need to expand on this to fit the design you need.