How to display the first tab in my Wordpress loop? - wordpress

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>

Related

Problem with tabs on foundation framework

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

Display WordPress posts in grid using bootstrap not aligned properly

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.

wordpress development how to make theme options for home page

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.

Nested repeater field ACF - Showing content from field one

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 :)

Add div after every three items in a loop?

I am working with a WP website and in my template I am running the loop like this:
<!-- START LOOP -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="row" style="margin:15px 0;">
<div class="twelve columns">
<div class="four columns">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
} else {
echo 'No Preview Available';
}
?>
</a>
</div>
<div class="eight columns">
<h3><?php the_title() ?></h3>
<p><?php the_excerpt() ?></p>
<p><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></p>
</div>
</div>
</div>
<hr />
<?php endwhile; ?>
Because this is a responsive website, I am trying to get a grid column look. The problem I am having is how I can insert a div with a class or "row container" after every third item?
I know I probably just confused the crap out of you because I confuse myself but in short the html would look like this:
<div class="row container">
<!-- item 1 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 2 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 3 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 4 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
</div>
and so on, instead I would like it to display in a grid so the HTML should look more like this:
<div class="row container">
<!-- row 1 -->
<div class="twelve columns">
<div class="four columns">
<!-- item 1 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 2 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 3 -->
<div class="four columns">IMAGE HERE</div>
</div>
</div>
<!-- row 2 -->
<div class="twelve columns">
<div class="four columns">
<!-- item 4 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 5 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 6 -->
<div class="four columns">IMAGE HERE</div>
</div>
</div>
</div>
I can do everything else Im just not sure how to implement the below so I get the results I pasted above? I have found this online and feel like it is a step in the right direction:
<?php ($i % 3) == 0 ?>
Your feelings are right.
You can use the $current_post property of the WP_Query class to get the index of the post currently displayed in the loop, and then use the modulus operator to make sure you are targeting multiples of three.
So your loop could look like this:
<div class="row container">
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php while ( have_posts() ) : the_post(); ?>
<!-- item -->
<div class="four columns">IMAGE HERE</div>
<?php if( $wp_query->current_post % 3 == 0 ) : ?>
</div>
</div>
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php endif; ?>
<?php endwhile; ?>
</div>
You might need to improve this implementation. Specifically, make sure that, whatever happens, your HTML closes correctly.
What I needed was a counter:
<!-- START LOOP -->
<?php $counter = 1 ?>
<div class="row" style="margin:15px 0;">
<div class="twelve columns">
<?php while ( have_posts() ) : the_post(); ?>
<div class="four columns">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
} else {
echo 'No Preview Available';
}
?>
</a>
</div>
<?php if ($counter % 3 == 0){echo '</div></div></hr /><div class="row" style="margin:15px 0;"><div class="twelve columns">';} ?>
<?php $counter++ ;
endwhile; ?>
</div>
</div>
<?php
$currentPage = get_query_var('paged');
// General arguments
$posts = new WP_Query(array(
'post_type' => 'post', // Default or custom post type
'posts_per_page' => 11, // Max number of posts per page
'paged' => $currentPage
));
// Content display
$i = 0;
if ($posts->have_posts()) :
while ($posts->have_posts()) :
$posts->the_post();
if( $i % 3 == 0 )
echo '<section class="columns">';
echo "<div class='column'>";
?>
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<?php
echo "</div>";
$i++;
if( $i % 3 == 0 )
echo '</section>';
endwhile;
endif;
?>
<?php
// Bottom pagination (pagination arguments)
echo "<div class='page-nav-container'>" . paginate_links(array(
'total' => $posts->max_num_pages,
'prev_text' => __('<'),
'next_text' => __('>')
)) . "</div>";
?>

Resources