I've added a new sidebar to my theme. It works, but a strange div with a height is appearing above any widgets I add to it:
<div id="blogsidebar">
<ul>
<div style="height: 280px;"></div> <---???
<li>WIDGET HERE</li>
</u>
</div>
My sidebar.php code is:
<div id="blogsidebar">
<ul>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('blog-sidebar') ) :
endif; ?>
</ul>
</div>
I have checked for any JQuery thats adding this and found none. Would anyone know why this is occurring?
Related
I am trying to add some animation to the mobile navigation to drop down slowly rather than have the page jumping. I am using the foundationpress theme. I can't seem to make it work with data-animate. This is my code snippet:
<div class="title-bar" data-responsive-toggle="site-navigation">
<button class="menu-icon" data-toggle="panel" type="button" data-toggle="mobile-menu"></button>
<div class="title-bar-title">
<div class="mini-logo">
<img class="mini-logo-img" src="/wp-content/uploads/2016/11/coc-logo.png" alt="Mountain View" style="width:4rem;height:auto;">
</div>
<!--<?php bloginfo( 'name' ); ?>-->
</div>
</div>
<!--<nav id="site-navigation" class="main-navigation nav-area" role="navigation" style="width:100%" >-->
<div class="top-bar-left">
<ul class="menu">
<li class="co-logo-top"></li>
<!--<li class="home"><?php bloginfo( 'name' ); ?></li>-->
</ul>
</div>
<div class="top-bar-right" >
<?php foundationpress_top_bar_r(); ?>
<?php if ( ! get_theme_mod( 'wpt_mobile_menu_layout' ) || get_theme_mod( 'wpt_mobile_menu_layout' ) === 'topbar' ) : ?>
<?php get_template_part( 'template-parts/mobile-top-bar' ); ?>
<?php endif; ?>
</div>
</nav>
I'm not seeing the actual '#mobile-menu' component in your code snippet, so not 100% sure what's happening here, but the thing to be aware of is that you need to have the data-animate attribute on the same element as you have your data-toggler attribute (which in this case is the thing being toggled, or '#mobile-menu'). See the example here: http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation
have you tried triggering it with jquery/js? see this thread: https://github.com/olefredrik/FoundationPress/issues/772.
also check that you have added the data-toggler attribute to the element
I'm using bootstrap 2 to build a wordpress theme with a collapsable menu, and everything works fine, however the open item doesn't close when I click a new item in the menu. any idea?
The php can be disregarded :) Thanks.
PS: When I tested with pure html it worked just fine
<div class="accordion-group">
<div class="accordion-heading"><?=$catItem->name;?></div>
<div id="<?=$catItem->slug;?>" class="accordion-body collapse">
<div class="accordion-inner">
<div id="<?=$generalActiveMenu;?>1" class="accordion">
<? $subCategory = new $Category();
$subCategory->getCategoryList($catItem->term_id); /* get sub category of each product */
foreach($subCategory->catList as $key => $subCatItem) {
?><div class="accordion-group">
<div class="accordion-heading">
<?=$subCatItem->name;?>
</div>
<div id="<?=$subCatItem->slug;?>" class="accordion-body collapse">
<? if(get_posts('category_name='.$subCatItem->slug)) {
?><div class="accordion-inner">
<ul class="nav nav-list">
<? $Post->postCat = $subCatItem->term_id;
$Post->getPostList();
foreach ($Post->postList as $key => $postItem) {
?><li id="<?=$postItem->post_name;?>"><?=$postItem->post_title;?></li><?
} ?>
</ul>
</div><?
} ?>
</div>
</div><?
}
?>
</div>
</div>
</div>
</div>
I may be wrong but you could try:
$('#myAccordianTab').collapse({
toggle: true
})
Take a look at this link for more info:
http://getbootstrap.com/2.3.2/javascript.html#collapse
This should help you build up correctly and and explains the toggle(or collapsing) function
I'm writing a profile page with TwiBoo (2.3.2) composed of a row, a span7 for the person projects, then a span5 for buttons:
<div class="row-fluid">
<div class="span7 profile-left">
<h4><?= $this->lang->line('profile_your_pjts') ?></h4><br>
<!-- THUMB PROGETTI -->
<ul class="thumbnails">
<?php foreach($list_pjt as $progetto): ?>
<li class="span4 pjt-thumb">
<div class="thumbnail">
<!-- PROJECT DATA FROM PHP/MYSQL -->
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="span5">
<h4>BUTTONS</h4>
<!-- SUBSCRIPTION DATA -->
<!-- BUTTONS -->
</div>
</div>
This is the result:
The problem comes when I add more thumbnails and goes to a new line, where instead of 3 per line I only get 2 from second line on:
I tried fixing the left-margin with plain css but just moves ALL the thumbs left keeping the same problem. Any idea on why?
I think wrapping your thumbnail divs (every 3 of them) in a row will make the trick.
First of all, the disclaimer: I am an absolute newbie.
I am modifying this theme, and, so far, I've come up with this.
My problem is the scrolling effect (amongst other things): when one clicks on one of the links in the circles, the scrolling effect will stop too 'early', as if the anchor were set too 'high' in relation to the text, leaving lots of white space above it.
I could try to set another anchor, perhaps a single character of the same colour of the background next to the h1 of every section, but I fear I might lose the scrolling effect. Also, I don't really know how to do that in WP.
So, in substance, my question is: how do I set the page to scroll so that the heading of each page is closer to the top of the screen?
Not sure if this of any use, but the following is the content of the template-home.php file, relating to navigation:
<div class="row">
<nav class="<?php if (get_post_meta($post->ID, 'fw_label_four', true)) { ?> offset2 <?php } else {?>offset3 <?php } ?> span8" id="nav-home">
<ul class="row">
<li class="span2">
<a class="circle-menu circle-black" href="#page-2"><span class="label-link"><?php echo get_post_meta($post->ID, 'fw_label_one', true);?></span></a>
<span class="arrow"></span>
</li>
<li class="span2">
<a class="circle-menu" href="#page-3"><span class="label-link"><?php echo get_post_meta($post->ID, 'fw_label_two', true);?></span></a>
<span class="arrow"></span>
</li>
<li class="span2">
<a class="circle-menu circle-black" href="#page-4"><span class="label-link"><?php echo get_post_meta($post->ID, 'fw_label_three', true);?></span></a>
<span class="arrow"></span>
</li>
<?php if (get_post_meta($post->ID, 'fw_label_four', true)) { ?>
<li class="span2">
<a class="circle-menu" href="#page-5"><span class="label-link"><?php echo get_post_meta($post->ID, 'fw_label_four', true);?></span></a>
<span class="arrow"></span>
</li>
<?php } ?>
</ul>
</nav>
</div>
I was reading Wordpress's coding standards
The only confusing part for me is the vertical spacing between HTML code for instance:
Default Wordpress Theme 3.03:
sidebar.php:
<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?>
</li>
<li id="archives" class="widget-container">
<h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
</li>
(Here's space between the two <li> tags)
header.php
<div id="masthead">
<div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
(Here, there's no space between div tags)
header.php (line 79...):
</div><!-- #branding -->
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><?php _e( 'Skip to content', 'twentyten' ); ?></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
(Here, there's is space between those 3 <div> tags
What's the coding standard of vertical spacing (I don't think it is random)?
Not sure i really follow you, but some examples..
Well formatted HTML
Indentation used, no excessive whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Poorly formatted HTML - Example 1
No indentation
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Example 2
Useless whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
This isn't really specific to WordPress, any good teacher or tutorial will encourage well formatted coding, and there's little excuse when you're using a good editor(i mean seriously, which do you find most readable and easier to understand?).
More..
Well formatted PHP
Indentation used appropriately
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Poorly formatted
No indentation, harder to read
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Formatting your code makes it easier to read, understand, or update/maintain(it's not something that will make a whole lot of sense until you start dealing with code on a regular basis). Then again, i'm not the best at explaining these things, so i'd suggest refering to information already available for the "why".. (i know my reasons)..
Mixed PHP and HTML example
Mock template loop, only for illustration
<div class="wrapper">
<div class="header">
<h1>My Website Heading</h1>
</div>
<div class="content">
<?php if( have_posts() ) : ?>
<div class="wrapsallposts">
<?php while( have_posts() ) : the_post(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<div class="postcontent"><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>