I have problem with tabs on foundation on a wordpress theme ...The original code have 4 horizontally tabs and I need to add a fifth element ... but when i add the fifth... the fifth element align vertically under the first tab...
This is the original code:
<div class="content row info active" id="panel2">
<?php query_posts('p=35'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="large-12 columns thu">
<dl class="row content tabs small-6 large-centered columns" data-tab>
<dd><span class="link">Cabernet Sauvignon</span></dd>
<dd><span class="link">Merlot</span></dd>
<dd><span class="link">Chardonnay</span></dd>
<dd><span class="link">Sauvignon Blanc</span></dd></dl>
<?php the_post_thumbnail('full'); ?>
</div>
<div class="large-6 columns txt">
<?php the_content(); ?>
</div>
</div>
<?php endwhile;?>
And this is my change:
<div class="content row info active" id="panel2">
<?php query_posts('p=35'); ?>
<?php while (have_posts()) : the_post(); ?>
<dl class="row content tabs small-6 large-centered columns" data-tab>
<dd><span class="link">Cabernet Sauvignon</span></dd>
<dd><span class="link">Merlot</span></dd>
<dd><span class="link">Chardonnay</span></dd>
<dd><span class="link">Sauvignon Blanc</span></dd>
<dd><span class="link">Carmenere</span></dd></dl>
<?php the_post_thumbnail('full'); ?>
</div>
<div class="large-6 columns txt">
<?php the_content(); ?>
</div>
</div>
<?php endwhile;?>
How could i add a fifth element rightly...aligning this horizontally?
class="row creates a new row, it should be probably a column / cell
Related
Blog Posts with Grid Layout even number columns doesn't display correctly .The problem occurs with 3 column layout also: for each group of 3 posts
<div class="main" role="main">
<div id="content" class="content full">
<div class="container">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post();
$title = get_the_title();?>
<div class="row">
<?php if ( has_post_thumbnail() ) { ?>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="<?php echo esc_url(get_permalink(get_the_ID())) ?><?php
the_post_thumbnail('imic_600x400'); ?></a>
<?php } ?>
<?php if ( has_post_thumbnail() ) { ?><?php } ?>
<h3><a href=" <?php echo esc_url(get_permalink(get_the_ID())); ?>
<?php
echo esc_attr($title); ?>
</a>
</h3>
</div>
<?php endwhile; ?>
<!-- Pagination -->
<?php if(function_exists('imic_pagination')) { imic_pagination(); }
else { next_posts_link( 'Older Entries');
previous_posts_link( 'Newer Entries' ); } ?>
<?php endif;?>
</div>
<?php if(is_active_sidebar($pageSidebar)) { ?>
<!-- Sidebar -->
<div class="sidebar" id="sidebar-col">
<?php dynamic_sidebar($pageSidebar); ?>
</div>
<?php } ?>
</div>
</div>
</div>
Try changing the created HTML structure as follows (in Inspect Element view to verify it works):
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div>
(note the <!-- --> HTML comments)
If that solves the problem, try adding the HTML comments into your PHP code.
The reason for this behaviour is the resulting new line being interpreted as a "space" and thus the third item won't fit into the same row because of the added horizontal space.
You could also output the HTML-<div class="row">...</div> without line-breaks, eg. by concatenating the markup as one PHP string.
I'm trying to figure out a way to make a dynamic home page on wordpress, i want the ability to edit the front page, and add content without hardcoding it.
Basically i want to have my home page to look similar to this.
https://html5up.net/forty
and i am aware that i need theme options to do this, how would i integrate that in my wordpress theme.
I want to be able to make columns, add rows, add hero image, etc.
and no, i dont want to use the visual composer. I am currently using Advanced custom fields.
Here is current front page on my theme, i dont want to use advanced custom fields because i still have to hard code.
In a nutshell how to make theme options for wordpress theme
template-frontpage.php
<?php
/**
* Template Name: Front Page
*
* #package Eli
*/
$image = get_field('hero_image');
get_header();
?>
<div class="row">
<div class="hero" style="background-image:url(<?php echo $image;?>); width:100%; min-height:350px; background-size: cover;">
<div class="container">
<div class="col-md-12">
<header class="hero-text">
<?php if (get_field('hero_title') ):?>
<h1 style="color:#fff;"><?php the_field('hero_title'); ?></h1>
<?php endif;?>
<?php if (get_field('hero_span') ):?>
<span><?php the_field('hero_span'); ?></span>
<?php endif;?>
<?php if (get_field('hero_span_2') ):?>
<span id="move"><?php the_field('hero_span_2'); ?></span>
<?php endif;?>
</header>
</div>
</div>
</div>
</div>
<section class="section-home">
<div class="row">
<div class="container">
<div class="line"></div>
<?php if (get_field('content_block_left') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_icon'); ?>
<?php the_field('content_block_left'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left2') ):?>
<div id="cbl" class="col-md-4 col-xs-12 ">
<?php the_field('content_block_left_2_icon'); ?>
<?php the_field('content_block_left2'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left3') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_3_icon'); ?>
<?php the_field('content_block_left3'); ?>
</div>
<?php endif;?>
</div>
</div>
</section>
<div class="section-about">
<div class="row">
<h1>Beat Your Rivals</h1>
<div class="line"></div>
<div class="container">
<?php if (get_field('image_left') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<img src="<?php echo the_field('image_left'); ?>" width:"400px" height:"300px">
</div>
<?php endif;?>
<?php if (get_field('caption_text') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<?php the_field('caption_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image2 = get_field('test_image');
?>
<div class="section-test" style="background-image:url(<?php echo $image2['url'];?>); width:100%; min-height:300px; background-size: cover;">
<div class="row">
<div class="container">
<?php if (get_field('test_text') ):?>
<div id="cbl3" class="col-md-12 col-xs-12">
<?php the_field('test_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<div class="about-us">
<div class="row">
<div class="container">
<?php if (get_field('about_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('about_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image3 = get_field('cons_image');
?>
<div class="consult">
<div class="row">
<div class="my-block-left" style="background-image:url(<?php echo $image3['url'];?>); background-size: cover;" >
<div class="container">
<?php if (get_field('consult_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('consult_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
</div>
<?php if (get_field('contact_us') ):?>
<div class="contact-us">
<div class="row">
<div class="container">
<h1 class="contact-h1">Contact Us</h1>
<div class="line"></div>
<div class="col-md-12 col-xs-12">
<?php the_field('contact_us'); ?>
</div>
</div>
</div>
</div>
<?php endif;?>
<?php get_footer(); ?>
Ok, It seems you have already done the basic theme options. Now if you want to create real theme options like the ones everyone creates in their themes then you have three cool options. WP Theme Customizer API , Redux and Codestars
You need to study them. Anyone of the above you can use in your project.
I have a nested repeater field.
The nested part is a modal window, which when open expands on the second repeater field. But when everything is filled out the modal window displays the info from the first item in the loop.
This is how it should be working:
http://pagedev.co.uk/hoppings/product-sector.php#
Here is my code:
<div class="container">
<?php while( have_rows('product_sections') ): the_row(); ?>
<div class="sector-heading">
<img src="<?php the_sub_field('section_logo'); ?>">
<div><?php the_sub_field('section_intro'); ?></div>
</div>
<?php if( have_rows('products') ): ?>
<div class="grid-wrapper">
<?php while( have_rows('products') ): the_row(); ?>
<!--Start Single Product-->
<div class="grid-item">
<div class="image-hovers">
<img src="<?php the_sub_field('thumbnail'); ?>">
<a class="js-open-modal" href="#" data-modal-id="popup"><div class="product-hover"></div></a>
</div>
<div class="grid-title">
<h2><?php the_sub_field('product_name'); ?></h2>
</div>
</div>
<!--Start Single Product Modal-->
<div id="popup" class="modal-box">
×
<div class="modal-wrap">
<div class="modal-img">
<img src="<?php the_sub_field('thumbnail'); ?>">
</div>
<div class="modal-content">
<h2><?php the_sub_field('product_name'); ?></h2>
<p><strong><?php the_sub_field('product_size'); ?></strong></p>
<hr>
<?php the_sub_field('product_description'); ?>
<div class="modal-stockist">Find a Stockist</div>
<div class="modal-literature">Literature</div>
</div>
</div>
</div>
<!--Close Single Product Modal-->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Grid Wrapper-->
<?php endif; ?>
<!-- Close product repeater field -->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Container-->
Any help would be great!
Lee
I figured it out. Something so simple!
My modal window needed a unique ID for each product!
All solved :)
I know I have to ask in Wordpress forum.
But I am sort of crazy to stackoverflow, I ask here first.
I am developing Wordpress theme from scratch. Inside my blog post, I'd like to wrap the thumbnail image inside the text.
The code I used is
<div class="row">
<?php if( has_post_thumbnail() ): ?>
<div class="col-xs-12 col-sm-4">
<div class="thumbnail"><?php the_post_thumbnail('small'); ?></div>
</div>
<div class="col-xs-12 col-sm-8">
<?php the_content(); ?>
</div>
<?php else: ?>
<div class="col-xs-12">
<?php the_content(); ?>
</div>
<?php endif; ?>
</div>
Now is the content and thumbnail image are side by side.
I like to wrap the image inside text.
The image is .
You are wrapping the thumbnail and the content in two different columns, that is why they appear side by side. Change your code to this:
<div class="row">
<?php if( has_post_thumbnail() ): ?>
<div class="col-xs-12 col-sm-12">
<div class="thumbnail"><?php the_post_thumbnail('small'); ?></div>
<?php the_content(); ?>
</div>
<?php else: ?>
<div class="col-xs-12">
<?php the_content(); ?>
</div>
<?php endif; ?>
</div>
Then float the thumbnail div to the left or right with css.
.thumbnail {
float:left;
}
I'm working with Wordpress and Foundation Tabs.
Objective:
To display Wordpress posts from a specific category in vertical Foundation tabs.
I currently have a static version displayed here:
http://www.aos-engineering.com (Under Projects)
Problem:
On the page load, the first tab displayed is empty. However, when you click through the tabs, they display correctly.
Question
How do I display the fist tab item on the page load?
Here is a test page displaying the problem:
http://www.aos-engineering.com/test/
Code
<div class="full-width" id="projects">
<div class="row">
<div class="small-4 medium-3 large-3 columns">
<dl class="tabs vertical profile-tabs" data-tab>
<?php
$displayposts = new WP_Query();
$displayposts->query('category_name=Projects');
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
?>
<dd><?php the_title(); ?></dd>
<?php endwhile; ?>
</dl>
</div>
<div class="small-8 medium-9 large-9 columns">
<div class="tabs-head">Projects</div>
<div class="tabs-content">
<?php
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
?>
<div class="content" id="tab<?php echo $tab_number;?>">
<h2><?php the_title(); ?></h2>
<div class="row">
<div class="medium-9 large-9 columns">
<?php the_post_thumbnail(); ?>
<p><small><?php the_field('img_caption'); ?></small></p>
</div>
<div class="medium-3 large-3 columns">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
Please let me know if I can provide more information. Thank you in advance.
You need to have your code add the class active to the .tabs > dl and the .tabs-content > div you want displayed on page load.
Add this to the two lines after $tab_number = ... to have the first tab be the active tab on load:
$active_class = (1 == $tab_number) ? 'active' : '';
Then in the output:
<dd class="<?php echo $active_class;?>" ><a href=...
<div class="content <?php echo $active_class;?>"...
See the Foundation Tabs documentation for more details.
Hat tip CPILKO for the solution.
Here is how to display Wordpress posts from a specific category in vertical Foundation tabs.
To display your posts, simply add your category name
'category_name=YourCategoryName'
Solution
<div class="full-width" id="projects">
<div class="row">
<div class="small-4 medium-3 large-3 columns">
<dl class="tabs vertical profile-tabs" data-tab>
<?php
$displayposts = new WP_Query();
$displayposts->query('category_name=Projects');
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
$active_class = (1 == $tab_number) ? 'active' : '';
?>
<dd class="<?php echo $active_class;?>"><?php the_title(); ?></dd>
<?php endwhile; ?>
</dl>
</div>
<div class="small-8 medium-9 large-9 columns">
<div class="tabs-head">Projects</div>
<div class="tabs-content">
<?php
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
$active_class = (1 == $tab_number) ? 'active' : '';
?>
<div class="content <?php echo $active_class;?>" id="tab<?php echo $tab_number;?>">
<h2><?php the_title(); ?></h2>
<div class="row">
<div class="medium-9 large-9 columns">
<?php the_post_thumbnail(); ?>
<p><small>Show above: Huiit Zolars</small></p>
</div>
<div class="medium-3 large-3 columns">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>