Wordpress Page not loading correct with Stylepath - wordpress

I have got an error in my code and I cant find why and where it orginates. But I know the template isnt loading correct. I believe the problem could start in the code below.
The problem started when I changed echo site_url to echo get_post_type_archive_link.
single-event.php
<?php
get_header();
while(have_posts()) {
the_post(); ?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/ocean.jpg') ?>)"></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title"><?php the_title();?></h1>
<div class="page-banner__intro">
<p>DONT FORGETT TO REPLACE ME LATER!!</p>
</div>
</div>
</div>
<div class="container container--narrow page-section">
<div class="metabox metabox--position-up metabox--with-home-link">
<p>
<a class="metabox__blog-home-link" href="<?php echo site_url('/blog'); ?>">
<i class="fa fa-home" aria-hidden="true"></i> Events Home</a>
<span class="metabox__main"><?php the_title(); ?></span>
</p>
</div>
<div class="generic-content"><?php the_content();?></div>
<h2>
<?php }
get_footer();
?>
single.php
<?php
get_header();
while(have_posts()) {
the_post(); ?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/ocean.jpg') ?>)"></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title"><?php the_title();?></h1>
<div class="page-banner__intro">
<p>DONT FORGETT TO REPLACE ME LATER!!</p>
</div>
</div>
</div>
<div class="container container--narrow page-section">
<div class="metabox metabox--position-up metabox--with-home-link">
<p>
<a class="metabox__blog-home-link" href="<?php echo get_post_type_archive_link('event'); ?>">
<i class="fa fa-home" aria-hidden="true"></i> Blog Home</a>
<span class="metabox__main">Posted by <?php the_author_posts_link(); ?> on <?php the_time('n.j.y'); ?> in <?php echo get_the_category_list(', '); ?></span>
</p>
</div>
<div class="generic-content"><?php the_content();?></div>
<h2>
<?php }
get_footer();
?>
Error message:

Related

Wordpress search results page returning 404, but the records exist in the database

I have 2 wordpress installations, 1 is for major content, the other is a help center.
the help center is installed in the major content directory. So you have the wordpress directory, and another in that directory, making it so we can use different themes and change the look between the two.
I'm just curious, on the search results page, I'm getting the correct url's, but they are going to 404 pages. I verified in the database that these records exist, so it's not a matter of the database not making these records and that these pages don't exist. Another note is that the search results page will return pages that have been created, but
<?php
get_header();
global $wp_query;
$total_result = $wp_query->found_posts;
?>
<div class="main">
<div class="main-hero">
<div class="container">
<h1>Boxstorm Help Center</h1>
<p>Search the Boxstorm Help Center documentation</p>
<div class="search-wrapper">
<form id="searchform" class="searchform" role="search" method="get" action="<?php echo site_url(); ?>">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input id="s" name="s" type="text" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'boxstorm' ); ?>" value="<?php echo get_search_query(); ?>">
<span class="search-button-wrapper">
<input id="searchsubmit" type="submit" value="">
<i class="fa fa-search"></i>
</span>
</div>
</form>
</div><!-- / .search-wrapper -->
</div>
</div><!-- /.main-hero -->
<nav class="main-hero-subnav cd-secondary-nav">
<div class="container">
<div class="is-hidden-mobile">
<?php get_breadcrumb(); ?>
</div>
</div>
</nav>
<div class="panel sub-nav-hero">
<div class="container page">
<div class="columns is-multiline is-mobile search-results">
<div class="column is-3-desktop is-6-tablet is-full-mobile left">
<div class="columns top-cats is-multiline is-mobile is-centered">
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/getting-started/">
<i class="fas fa-list-ul"></i>
<h2>Getting Started</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/documentation/">
<i class="fas fa-book"></i>
<h2>Documentation</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/videos/">
<i class="far fa-play-circle"></i>
<h2>Browse Videos</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/contact/">
<i class="fas fa-at"></i>
<h2>Contact Support</h2>
</a>
</div>
</div>
</div>
</div>
<div class="column is-9-desktop is-6-tablet is-full-mobile right">
<h1 class="results"><?php printf( __( 'Search results for: <b>%s</b>', 'boxstormsupport'), get_search_query() ); ?></h1>
<div class="columns is-multiline">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content', 'search' ); ?>
<div class="column is-12 results">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<?php the_permalink(); ?>
</div>
<?php endwhile; else : ?>
<div class="column is-12">
<p><?php _e( '<p>Sorry, but there were no results for the term <b style="font-weight:900;">'.get_search_query().'</b>. Please refine your search terms and try again.</p>' ); ?></p>
</div>
<?php endif; ?>
</div><!-- / columns -->
</div><!-- / columns is-9 right -->
</div><!-- / search-results -->
</div>
</div>
</div>
<?php get_footer(); ?>
The site is live at https://www.boxstorm.com/help-center. If you'd like to see the problem.
The pages follow this format in wordpress:
Pages parameters:
This is what I'm seeing:
Chrome
Firefox
Any help would be appreciated, thanks.

dynamic row is being disturbed by height increase of first div of md-6

I am making dynamic div of class row divided by two div of md-6 as expected my result is coming when first div height is small but if it is not the third and forth div position is disturbed
kindly check screen shots in
https://screenshots.firefox.com/Pg5ACKyMlWCQVYx1/localhost
as in screen shot reviews under date 2017-10-25 is my desired result but the above reviews are mess
my code is
<?php
while($row = $getdate->fetch_assoc())
{
$date = $row['DATE(reviews_date)'];
$getdatedata = $user->getdatedata($date);
?>
<h4 class="hdg" style="color:#212121;"> <?php echo $date ;?></h4>
<hr style="height:1px;border:none;background-color:#333;" />
<div class = "row">
<?php
while($rowdata = $getdatedata->fetch_assoc())
{
?>
<div class="col-md-6" style="position: relative;">
<p>Review # <?php echo $rowdata['reviews_id']; ?>
</p>
<p>
Written by <?php echo $rowdata['reviews_by']; ?> after counseling with <?php echo $rowdata['reviews_to']; ?> for <?php echo $rowdata['duration'];?> on issues concerning <?php echo $rowdata['issue']; ?> .
</p>
<br>
<h5 style="color:#212121;"">
<?php echo $rowdata['reviews_body'];?>
</h5>
<br>
<div class="w3_agileits_services_grid1">
<div class="w3_agileits_services_grid1l">
<img src="<?php echo $rowdata['coun_image']; ?>" alt=" " class="img-responsive" />
</div>
<div class="name">
<ul>
<li> <?php echo $rowdata['reviews_to']; ?> </li>
</ul>
<ul>
<li><?php echo $rowdata['coun_degree'];?> </li>
</ul>
</div>
</div>
<hr style="height:1px;border:none;background-color:#333;width:550px;margin-top:100px;">
</div>
<?php
}
?>
</div>
<br>
<?php
} ?>
enter code here

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.

Wordpress Loop repeating twice

Hello I have a while loop in WordPress and I am adding an active class on the first instance of the loop and this works fine but the same instance then again repeats afterwards without the active class.
here is my code any help would be greatly appreciated.
<div class="carousel-inner" role="listbox">
<?php
query_posts( array( 'post_type' => 'deal','dealtype' => 'deals' ) );
while (have_posts()) : the_post();
?>
<?php if( $wp_query->current_post == 0 && !is_paged() ) { ?>
<div class="item active">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } ?>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php endwhile; // end of the loop. ?>
</div>
Believe you need to add an else statement after your <?php if ($wp_query->current_post == 0 && !is_paged() ) { ?> statement ends. Should look something like this:
<div class="carousel-inner" role="listbox">
<?php
query_posts( array( 'post_type' => 'deal','dealtype' => 'deals' ) );
while (have_posts()) : the_post();
?>
<?php if ( $wp_query->current_post == 0 && !is_paged() ) { ?>
<div class="item active">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } else { ?>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } ?>
<?php endwhile; // end of the loop. ?>
</div>

removing space b/w two columns Bootstrap

Hi I am trying to make less space b/w the two images but I am unable to do so. when I add any css rule such as margin it breaks the columns. so what is the best way I can get images a bit closer to each other.
my site link: http://www.abiglittlebiz.com/trevelle/display-centres/
here is my code:
<div class="displaycenter">
<h2 class="displayh1"><?php echo "$main_heading";?></h2>
<div class="container">
<div class="row">
<div class="col-md-8">
<h2 class="displayh2"><?php echo "$display_heading";?></h2>
<div>
<?php if(!empty($ascot_image) ): ?>
<img src="<?php echo $ascot_image['url']; ?>" alt="<?php echo $ascot_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$ascot_text"; ?></h3>
<p class="details"><?php echo "$displaycenter1";?></p>
</div>
</div>
</div>
<div class="col-md-4">
<h2 class="displayh2"><?php echo "$display_heading2";?></h2>
<div>
<?php if(!empty($liberty_image) ): ?>
<img src="<?php echo $liberty_image['url']; ?>" alt="<?php echo $liberty_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$liberty_text"; ?></h3>
<p class="details"><?php echo "$displaycenter2";?></p>
</div>
</div>
</div>
<div class="col-md-8">
<div>
<?php if(!empty($alfa_image) ): ?>
<img src="<?php echo $alfa_image['url']; ?>" alt="<?php echo $alfa_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$alfa_text"; ?></h3>
<p class="details"><?php echo "$displaycenter3";?></p>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<?php if(!empty($odyssey_image) ): ?>
<img src="<?php echo $odyssey_image['url']; ?>" alt="<?php echo $odyssey_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$odyessy_text"; ?></h3>
<p class="details"><?php echo "$displaycenter4";?></p>
</div>
</div>
</div>
<div id="cs">
<h2 class="displayh1" id="cl"><?php echo "$second_heading";?></h2>
<div class="col-md-8">
<div>
<?php if(!empty($monte_image) ): ?>
<img src="<?php echo $monte_image['url']; ?>" alt="<?php echo $monte_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$monte_text"; ?></h3>
<p class="details"><?php echo "$displaycenter5";?></p>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<?php if(!empty($lot_image) ): ?>
<img src="<?php echo $lot_image['url']; ?>" alt="<?php echo $lot_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$monte_text"; ?></h3>
<p class="details"><?php echo "$displaycenter6";?></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
You are using a col-md-8 class for the left column and a col-md-4 class for the right one. Why not make them both col-md-6 and apply the following CSS?
.row .col-md-6:first-of-type {
text-align: right;
}
This right aligns the content in the left column and eliminates most of the gap between columns. You'll probably have to play around with more CSS to polish things further, but this should give you a decent start.

Resources