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
Related
I'm creating a Wordpress template from scratch and I am already in the process of adding sidebars. But I'm having a few problems with the sidebar positioning/placements.
What I want vs What I have
I'm not sure if I'm doing something wrong with the sidebar.php or with the container blocks.
But here's my css code:
/* Sidebar modules for boxing content */
.sdbrcont {
float: left;
background-color: black;
}
My sidebar.php code:
<div class="sdbrcont">
<?php if ( is_active_sidebar( 'left_sdbr' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'left_sdbr' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>
</div>
and if the problem is on my index.php, here's the code:
<div class="row">
<?php get_sidebar( 'left-sdbr' ); ?>
<div id="contentcont">
<div class="blog-main">
<div class="blogtitle">
<p>PAKU SQUAD
<span class="subheader1">
BLOG
</span>
</p>
<hr>
</div>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;?>
<nav>
<ul class="pager">
<li> <?php next_posts_link( 'Older Posts >>>' ); ?> </li>
<li> <?php previous_posts_link( '<<< Newer Posts' ); ?></li>
</ul>
</nav>
<?php
endif;
?>
</div> <!-- /.blog-main -->
</div>
</div> <!-- /.row -->
This is my firt time creating a wordpress template and I would really appreciate all the help I can get. Thank you in advance.
You need to pay attention to Layout grid system in bootstrap: http://getbootstrap.com/docs/4.0/layout/overview/
Because you need to determine the width of the container, else will be all the body.
<div class="container">
<div class="row">
<div class="col">
Sidebar
<div>
<div class="col">
Content
<div>
</div>
</div>
my problem is that i am using my own custom single-product.php page and its working as i am wanting because i have used loop to show single product contents according to mine needs ...
but no the only issue i an facing is that i could not get "add to cart" button code any where there ? and now my add to cart button is missing that made me totally unable to add product to cart ...
here is mine complete code <div class="shop-info">
<?php query_posts( array( 'post_type' => product, 'posts_per_page' => 1) ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2>
<?php the_title(); ?>
</h2>
<span class="check"></span>
<span class="stock">IN STOCK</span>
<span class="right-code">
<span class="code">CODE: </span>
<span class="number"><?php echo $product->get_sku(); ?></span>
</span>
<img src="<?php bloginfo('template_url'); ?>/images/shop-line.png" alt=""/>
<span class="price">$<?php $product = new WC_Product( get_the_ID() );
echo $price = $product->price; ?></span>
<span class="total">QUANTITY: </span>
<span class="select">
00
<span class="arrow"></span>
</span>
<img src="<?php bloginfo('template_url'); ?>/images/shop-line.png" alt=""/>
<div class="product-single-content">
<p class="product-detail">
<?php the_content(); ?>
</p>
</div>
<div class="add-buttons">
<a class="add-to-cart" href="<?php echo $product->single_add_to_cart_text(); ?>">ADD TO BASKET/ BORROW</a>
<a class="add-to-cart pink" href="">ADD TO WISH LIST</a>
</div>
<div class="social-links">
<ul class="social-networks">
<li>facebook</li>
<li><a class="twitter" href="#">twitter</a></li>
<li><a class="play" href="#">play</a></li>
</ul>
</div>
<?php endwhile; endif; ?>
</div>
in code above and in div class button's section my own buttons as anchors named as "ADD TO BASKET/BORROW" placed and i want once that anchor is clicked this item should be added to cart ... any one there to help me out of this please ... ??? :(
Replace
<a class="add-to-cart" href="<?php echo $product->single_add_to_cart_text(); ?>">ADD TO BASKET/ BORROW</a>
with
<?php do_action('woocommerce_simple_add_to_cart'); ?>
And if you want to change add to cart text then add below code to your theme's functions.php :
add_filter( 'woocommerce_product_single_add_to_cart_text', 'your_custom_cart_button_text' );
function your_custom_cart_button_text(){
return __( 'ADD TO BASKET/ BORROW', 'woocommerce' );
}
NOTE: It won't add for the variable products.
I got tasked with fixing problems on my company's Wordpress instance. Since I'm novice when it comes to Wordpress and PHP I am sure that I am missing something trivial; problem I am having is that pages look different in preview and when viewed directly. For example, here is what part of HTML that gets rendered in live preview (for site header):
<header role="banner" class="clearfix" id="site-header">
<div class="container">
<!-- #logo -->
<div id="logo">
<h1>
My Site
</h1>
</div>
<!-- /#logo -->
<!-- #primary-nav -->
<nav class="clearfix" role="navigation" id="primary-nav">
</nav>
<!-- #primary-nav -->
</div>
</header>
However, when I visit site directly (go to http://example.com), I get following HTML in that part:
<div class="container">
<div id="logo">
<h1>
My Site
</h1>
</div>
</div>
I'm getting similar behavior when trying different themes. Thus, I'm suspecting something may be wrong with installation of Wordpress... however, I can't just re-install everything - I've inherited this Wordpress instance and must stick with it.
I have no problem with modifying php files and HTML - would just appreciate if someone more experienced with Wordpress would tell me where I should start looking. php files? CDN plugins?
EDIT:
Here is header.php from theme:
<!-- #header -->
<header id="site-header" class="clearfix" role="banner">
<div class="container">
<!-- #logo -->
<div id="logo">
<?php if (is_front_page()) { ?><h1><?php } ?>
<a title="<?php bloginfo( 'name' ); ?>" href="<?php echo home_url(); ?>">
<?php if (of_get_option('st_logo')) { ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo of_get_option('st_logo'); ?>">
<?php } else { ?>
<?php bloginfo( 'name' ); ?>
<?php } ?>
</a>
<?php if (is_front_page()) { ?></h1><?php } ?>
</div>
<!-- /#logo -->
<!-- #primary-nav -->
<nav id="primary-nav" role="navigation" class="clearfix">
<?php if ( has_nav_menu( 'primary-nav' ) ) { ?>
<?php wp_nav_menu( array('theme_location' => 'primary-nav', 'container' => false, 'menu_class' => 'nav sf-menu clearfix' )); ?>
<?php } ?>
</nav>
<!-- #primary-nav -->
</div>
</header>
<!-- /#header -->
I had this issue and I resolved it by changing the settings that were not displaying properly to something else (such as un-checking a checked box), publishing it, and then changing it back and publishing again. I'm guessing there was some mis-match somewhere between something cache and something database and this was a quick way to force them to match up again.
Just had a similar issue but rather I had the desired result in the customize preview but not in the actual site. I tried a variety of things in the themes code but sadly I think it just came down to a hard refresh of my customizer and page tabs (ctrl+F5 in chrome) then tweaking the slider and publishing.
I want to remove the green search box from the header but I don't know which file and lines in the Editor I must remove.
Regards.
You should not be editing default themes!
Create a child theme http://codex.wordpress.org/Child_Themes
The example actually shows using TwentyFourteen
Then copy the header.php to your child themes folder and edit it.
This way updates for TwentyFourteen will not over-write your changes.
When updates do come, compare the TwentyFourteen header.php with your header.php and make the updates to it.
OR better yet,
Create the child theme and add this to your style.css after the parent themes import
.search-toggle, #search-container {display: none;}
Then you do not need to modify or copy the header.php file at all.
You need to edit the header.php file of your WordPress theme that can be found at [your_WP_folder]/wp-content/themes/twentyfourteen/header.php.
Look for the <header> section and copy and paste the code below instead of the original.
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<!-- Hide Search button
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
-->
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
</div>
<!-- Hide Search Form (optional)
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
-->
</header><!-- #masthead -->
Goto your_project/wp-content/themes/twentyfourteen/header.php file and open it.
Search for the word search-toggle and search-container (This one is optional).
.search-toggle
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
#search-container
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
Remove both html block of codes or you can wrap them in a comment for later use like this:
<!--
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
-->
Topdown is correct. Creating a child theme is very important.
But an easier way to remove search bar in twenty fourteen theme is to put .search-toggle { display: none; } in your child css file.
Here's a bit more information on customizing twenty fourteen theme in WordPress and how to create child theme for twenty fourteen theme.
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>