I am going to add a footer in the sidebar that generated using dynamic_sidebar function in Wordpress. As you know, dynamic_sidebar generate a sidebar with following structure:
<li class="sidebox">
<h3>The Header</h3>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="sidebox">
<h3>The Header</h3>
<ul>
<li></li>
<li></li>
</ul>
</li>
But I want to convert it to:
<li class="sidebox">
<h3>The Header</h3>
<ul>
<li></li>
<li></li>
</ul>
<div class="footer"></div>
</li>
<li class="sidebox">
<h3>The Header</h3>
<ul>
<li></li>
<li></li>
</ul>
<div class="footer"></div>
</li>
How I can implement it?
not sure how you would go about this in PHP, but if your JavaScript is fine, then you can do append child to the sidebox li, assuming that 1- footer contains the same content, OR 2- you have a differentiator (typically an id with incrementing number) to identify each individual block.
Related
I am learning to build a custom Wordpress Theme from scratch. I would like to display opening times in the footer. I am trying to use this plugin but i can not find any documentation on it! I just want users to add their opening and close times using this and then output the opening/close times in the footer html. Does anyone have any experience using this plugin / know a better way i can achieve this?
HTML for foot.php
<div class="w-col w-col-6 w-col-stack">
<h3 class="heading-6">OPENING TIMES</h3>
<div class="open-times-wrapper">
<ul class="unordered-list">
<li class="open-li">MONDAY</li>
<li class="closeinfo open-li">USER INPUT GOES HERE!</li>
</ul>
<ul class="unordered-list">
<li class="open-li">TUESDAY</li>
<li class="closeinfo open-li">10:30am - 00:00pm</li>
</ul>
<ul class="unordered-list">
<li class="open-li">WEDNESDAY</li>
<li class="closeinfo open-li">10:30am - 00:00pm</li>
</ul>
<ul class="unordered-list">
<li class="open-li">THURSDAY</li>
<li class="closeinfo open-li">10:30am - 00:00pm</li>
</ul>
<ul class="unordered-list">
<li class="open-li">FRIDAY</li>
<li class="closeinfo open-li">10:30am - 00:00pm</li>
</ul>
<ul class="unordered-list">
<li class="open-li">SATURDAY</li>
<li class="closeinfo open-li">10:30am - 00:00pm</li>
</ul>
<ul class="unordered-list">
<li class="open-li">SUNDAY</li>
<li class="closeinfo open-li">10:30am - 00:00pm</li>
</ul>
</div>
</div>
Read the plugin description. All the documentation is on their Github: https://github.com/janizde/WP-Opening-Hours
i'm new in wordpress and i'd like to replace the footer with a pure html code.
i mean, i till want the "container" generated by wp, but inside i want to use pure html code.
i tried changing the content of "partials/footer-layout.php" to this code, and i'm able to see the code, but not to click the links...
any ideas?
<?php
/**
* #package Make
*/
// Footer Options
$footer_layout = (int) get_theme_mod( 'footer-layout', ttfmake_get_default( 'footer-layout' ) );
?>
<footer id="site-footer" class="site-footer footer-layout-<?php echo esc_attr( $footer_layout ); ?>" role="contentinfo">
<div class="footer-text">
<!-- CUSTOM FOOTER CODE STARTS HERE -->
<div class="footer-custom-container">
<div class="footer-column-one">
<h6>Title</h6>
<ul>
About us
<li>Contact us</li>
<li> </li>
<li>Careers</li>
</ul>
</div>
<div class="footer-column-two">
<h6>first column</h6>
<ul>
<li>Support</li>
<li>FAQ</li>
<li>User guides</li>
<li>Download app</li>
</ul></div>
<div class="footer-column-three">
<h6>Social & media</h6>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li> </li>
<li>Press</li>
</ul></div>
<div class="footer-column-four">
<h6> </h6>
<ul>
<li> </li>
</ul></div>
<div class="footer-column-five">
<h6>Title</h6>
<ul>
<li>For business</li>
<li>For installers</li>
<li>Terms & conditions</li>
<li>Privacy policy</li>
</ul></div>
<div class="footer-column-six">
<h6>first column</h6>
<ul>
<li>Store</li>
<li>Login</li>
</ul></div>
</div>
<!-- CUSTOM FOOTER CODE ENDS HERE -->
</div>
</footer>
Your HTML code isn't XHTML-compliant. There's a missing <li>...</li>.
Some possible solutions:
1- try to add links to the anchor tags and check if it works.
2- check if there's a HTML element which overlaps the anchor tags. Use firebug or any other developer tool to check if there's an overlapping element.
3- check if there's a Javascript event which is called once you click on the anchor. Use a Javascript debugger (Firebug etc.).
Here's the updated code:
<?php
/**
* #package Make
*/
// Footer Options
$footer_layout = (int) get_theme_mod( 'footer-layout', ttfmake_get_default( 'footer-layout' ) );
?>
<footer id="site-footer" class="site-footer footer-layout-<?php echo esc_attr( $footer_layout ); ?>" role="contentinfo">
<div class="footer-text">
<!-- CUSTOM FOOTER CODE STARTS HERE -->
<div class="footer-custom-container">
<div class="footer-column-one">
<h6>Title</h6>
<ul>
<li>About us</li>
<li>Contact us</li>
<li> </li>
<li>Careers</li>
</ul>
</div>
<div class="footer-column-two">
<h6>first column</h6>
<ul>
<li>Support</li>
<li>FAQ</li>
<li>User guides</li>
<li>Download app</li>
</ul>
</div>
<div class="footer-column-three">
<h6>Social & media</h6>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li> </li>
<li>Press</li>
</ul>
</div>
<div class="footer-column-four">
<h6> </h6>
<ul>
<li> </li>
</ul>
</div>
<div class="footer-column-five">
<h6>Title</h6>
<ul>
<li>For business</li>
<li>For installers</li>
<li>Terms & conditions</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="footer-column-six">
<h6>first column</h6>
<ul>
<li>Store</li>
<li>Login</li>
</ul>
</div>
</div>
<!-- CUSTOM FOOTER CODE ENDS HERE -->
</div>
</footer>
Often when you can't click a link, it is a case that a layer is positioned on top of it.
Use a code inspector such as Firebug, and see if there are any 'invisible layers' above that area.
There is also the chance that css has cursor:none applied so it doesn't look like you can click it, but it can. Try replacing your # links with real links.
Also, About us needs li tags around it, but I doubt that is the issue.
I am creating a theme in WordPress. I want to add a class to a <li> element if the user is on that page.
I have managed to create a dynamic navigation, using following code in my header.php:
<div class="nav">
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu' ) ); ?>
</div>
Which in HTML, translates to:
<div class="nav">
<ul>
<li> Home </li>
<li> Products </li>
<li> About </li>
</ul>
</div>
I am hoping to dynamically alter this. If the user is on www.website.com/about, the navigation will change to:
<div class="nav">
<ul>
<li> Home </li>
<li> Products </li>
<li class="underline"> About </li>
</ul>
</div>
According to the docs, the current page item should already have a class .current-menu-item. you can use that to style the item with underline. Do you not see this class?
http://codex.wordpress.org/Function_Reference/wp_nav_menu#Current-Page_Menu_Items
<ul id="menu-primary">
<li></li>
<li></li>
<li></li>
<span></span> /* Add after the list items; before the closing </ul> tag */
</ul>
How to add <span> tags after the list items, to the WP-menu with id="menu-primary"?
EDIT
<ul id="menu-primary">
<li></li>
<li></li>
<li></li><li class="fix"></li> /* Add <li class="fix"></li> adjacent after the list items exactly as shown. */
</ul>
Why don't you create a class for the li ?
<ul id="menu-primary">
<li class ="class"></li>
<li class ="class"></li>
<li class ="class"></li>
/* Add after the list items; before the closing </ul> tag */
</ul>
I'm using the include function as a way to prevent me having to update my top menu on every one of my pages when I make a change. Here is the snippet using include function on my site:-
<div id ="header">
<div id="logo"></div>
<nav>
<?php include 'menu.php' ?>
</nav>
</header>
And here is what the menu.php file holds
<div id="menu_container">
<ul class="sf-menu" id="nav">
<li>Home</li>
<li>About Us</li>
<li>Leagues
<ul>
<li>Brighton
<ul>
<li>Singles
<ul>
<li>Results</li>
<li>Tables</li>
</ul>
</li>
<li>Doubles
<ul>
<li>Results</li>
<li>Tables</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Rules</li>
<li>Hall of Fame
<ul>
<li>Brighton
<ul>
<li>Singles</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
However my problem is that the menu items that include nested items, that will drop down and offer more options when you hover over them, aren't working this way. But they do work correctly when I copy the code in directly.
Here at the pages where the code is copied in directly and works and where I'm using include and it doesn't work:-
Working dtlsports.co.uk/badmintonSinglestables.php
Not working dtlsports.co.uk/badmintonSinglestablesA.php
As you can see, the navigation menu on the first page works, but it doesn't drop down properly on the second page
Is there anything anyone can suggest? Thanks!
The problem is that on the non working page you are not including al js scripts that you have on the working page. For example:
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
$('.top').click(function() {$('html, body').animate({scrollTop:0}, 'fast'); return false;});
});
</script>