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?
Related
How do I format a link that will go to an anchor within a PHP document?
For example:
http://chambervu.com/lososos/index.php#p=10 - does not display the intended result, however if I go to http://chambervu.com/lososos/index.php then once that page is displayed if I append "#p=10" then everything displays as intended. How would I form the link to display page 10 directly?
The "pages" in my index file are setup like this:
<li class="page" data-name="5">
<div class="blah....blah"
</div>
</li>
</div>
</li>
<li class="page" data-name="6">
<div class="blah..blah"
</div>
</li>
Fragments point to an ID on the page, when you visit an HTML page with a fragment in the URL, the browser tries to find an element with a matching ID and scroll to it.
The javascript you have running on the page takes the fragment when it changes (after the page has loaded) and parses it to determine which page to show.
Linking directly to that page like you want would require some editting of the javascript at the very least.
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.
I'm migrating my HTML / CSS website to WordPress (creating a theme). I'm using the code shown below to turn wordpress 'pages' into navigation li links.
The code works, But the Word press nav styling is slightly different to the HTML site.
The code should work the same in both cases, but I suspect WP is not applying either an id or class
Can anyone help me understand why these code snippets give different styling results (The same css sheet is used for both the wordpress and the non wordpress site)
WP nav code (found in header.php)
<nav>
<ul id="navigation" class="slimmenu">
<?php wp_nav_menu(); ?>
</ul>
</nav>
HTML site nav code
<nav>
<ul id="navigation" class="slimmenu">
<li>Home</li>
<li>Bikes</li>
<li>Parts</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</nav>
many thanks,
You should not have wp_nav_menu() inside a <ul> element.
This function creates HTML which includes a wrapper (div) and it's own <ul> element. so your HTML is going to be invalid and your CSS is unlikely to work.
Just use:
<nav>
<?php wp_nav_menu( array( 'menu_id' => 'navigation', 'menu_class' => 'slimmenu') ); ?>
</nav>
If your CSS selectors are not overly specific, they may still work with the HTML generated by WordPress.
I work with SPIP and a plugin who called tagsphere who works fine with the tags in SPIP. I have a tag groupe where i put only one article for a tag.
Now when i click on a tag in tagsphere he send me before to a menu where i can see all articles who are linked with this tag. But i want that he send me directly to the article without to see the tag menu before.
Here the code from the model of thagsphere:
<div id="tagsphere-#ENV{id_article}">
<ul>
<BOUCLE_mot(MOTS){id_groupe ?}>
<li>[(#TITRE)]</li>
</BOUCLE_mot>
</ul>
</div>
Anybody an idea?
If you want to skip the tag page, you have to link directly to the article. The <B_article> block prevents display the tag if no article is linked.
<div id="tagsphere-#ENV{id_article}">
<ul>
<BOUCLE_mot(MOTS){id_groupe ?}>
<B_article>
<li>
<a<BOUCLE_article(ARTICLES){id_mot = #ID_MOT}{0, 1}> href="#URL_ARTICLE"</BOUCLE_article>>
#TITRE
</a>
</li>
</B_article>
</BOUCLE_mot>
</ul>
</div>
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.