Change in layout:
The layout styling of the trips has been changed in archive page for the recent version of the plugin. Here is the screenshot of the layouts before and after the release of the update.
Layout-1 :
Layout-2 :
The latest plugin comes with layout-2, the changes in the layout of trips in the archive page has been included in the latest update of the plugin.
But if you do not want the layout-2 and want the same layout as previous version i.e layout-1 then you can have it by following the simple steps listed below
Info : The template file (itinerary-item.php) for the layout styling is placed in the plugin in path wp-travel > templates > shortcode .
You have to override this file through the theme to get the older version layout.
Steps to follow:
- Create the folder “wp-travel” in your theme file.
- Inside folder “wp-travel” then create the folder “templates” and within the folder templates create folder “shortcode”.
- Then create the layout template file ( itinerary-item.php) within the “shortcode” folder and paste below given code in itinerary-item.php file .
Note: Path to maintain in theme file for template override.
Theme file > wp-travel > templates > shortcode > itinerary-item.php.
Code snippet of the file itinerary-item.php for the older version :
<?php
/**
* Itinerary Shortcode Contnet Template
*
* This template can be overridden by copying it to yourtheme/wp-travel/shortcode/itinerary-item.php.
*
* HOWEVER, on occasion wp-travel will need to update template files and you (the theme developer).
* will need to copy the new files to your theme to maintain compatibility. We try to do this.
* as little as possible, but it does happen. When this occurs the version of the template file will.
* be bumped and the readme will list any important changes.
*
* @see http://docs.wensolutions.com/document/template-structure/
* @author WenSolutions
* @package wp-travel/Templates
* @since 1.0.2
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
if ( post_password_required() ) {
echo get_the_password_form();
return;
}
$enable_sale = get_post_meta( get_the_ID(), 'wp_travel_enable_sale', true );
$trip_price = wp_travel_get_trip_price( get_the_ID() );
$sale_price = wp_travel_get_trip_sale_price( get_the_ID() ); ?>
<li>
<div class="wp-travel-post-item-wrapper">
<div class="wp-travel-post-wrap-bg">
<div class="wp-travel-post-content">
<h4 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
<span class="post-category">
<div class="entry-meta">
<div class="category-list-items">
<span class="post-category">
<?php $terms = get_the_terms( get_the_ID(), 'itinerary_types' ); ?>
<?php if ( is_array( $terms ) && count( $terms ) > 0 ) : ?>
<i class="fa fa-folder-o" aria-hidden="true"></i>
<?php
$first_term = array_shift( $terms );
$term_name = $first_term->name;
$term_link = get_term_link( $first_term->term_id, 'itinerary_types' ); ?>
<a href="<?php echo esc_url( $term_link, 'wp-travel' ); ?>" rel="tag">
<?php esc_html_e( $term_name, 'wp-travel' ); ?>
</a>
<div class="wp-travel-caret">
<?php if ( count( $terms ) > 0 ) : ?>
<i class="fa fa-caret-down"></i>
<div class="sub-category-menu">
<?php foreach( $terms as $term ) : ?>
<?php
$term_name = $term->name;
$term_link = get_term_link( $term->term_id, 'itinerary_types' ); ?>
<a href="<?php echo esc_url( $term_link, 'wp-travel' ); ?>">
<?php esc_html_e( $term_name, 'wp-travel' ); ?>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</span>
</div>
<div class="wp-travel-average-review review-only">
<span><?php printf( '%s reviews',wp_travel_get_rating_count() ); ?></span>
</div>
</div>
</span>
</div>
<div class="wp-travel-post-thumbnail">
<a href="<?php the_permalink() ?>">
<?php echo wp_travel_get_post_thumbnail( get_the_ID(), 'wp_travel_thumbnail' ); ?>
</a>
<?php wp_travel_save_offer( get_the_ID() ); ?>
</div>
<div class="recent-post-bottom-meta">
<?php wp_travel_trip_price( get_the_ID(), true ); ?>
</div>
<?php if ( $enable_sale ) : ?>
<div class="wp-travel-offer">
<span><?php esc_html_e( 'Offer', 'wp-travel' ); ?></span>
</div>
<?php endif; ?>
</div>
</div>
</li>
- After addition of the required file, add below given CSS in style.css file of the theme for the layout for older version .
.wp - travel - average - review.review - only span: before,
.wp - travel - average - review.review - only: after,
.wp - travel - average - review.review - only: before,
.wp - travel - offer span: after {
content: ''
}
.wp - travel - itinerary - list {
position: relative
}
.wp - travel - itinerary - list.wp - travel - post - item - wrapper.category - list - items {
float: left
}
.entry - meta.category - list - items,
.entry - meta.travel - info,
.entry - meta.wp - travel - average - review {
margin - right: 5 px;
border - right: 1 px solid# eee
}
.status - publish.entry - content.category - list - items a {
color: #f83531
}
.wp - travel - itinerary - list.wp - travel - post - wrap - bg.entry - meta.category - list - items i,
.wp - travel - itinerary - list.wp - travel - post - wrap - bg.recent - post - bottom - meta.trip - price ins {
color: #555
}
.wp-travel-itinerary-list .wp-travel-post-item-wrapper .post-title a,
.wp-travel-itinerary-list .wp-travel-post-wrap-bg .recent-post-bottom-meta .trip-price span {
font-size: 18px
}
.wp-travel-average-review span {
color: # 555;
font - family: Roboto, sans - serif
}
.wp - travel - offer {
right: -5 px;
top: -5 px;
left: inherit;
width: 75 px;
height: 75 px
}
.wp - travel - offer span {
line - height: 20 px;
transform: rotate(45 deg);
- webkit - transform: rotate(45 deg);
width: 100 px;
top: 19 px;
right: -21 px
}
.wp - travel - offer span: after,
.wp - travel - offer span: before {
left: 0;
top: 100 %;
border - left: 3 px solid# f83531;
border - right: 3 px solid transparent;
border - bottom: 3 px solid transparent;
border - top: 3 px solid# f83531
}
.wp - travel - offer span: after {
position: absolute;
display: block;
right: 5 px;
border - left: 3 px solid transparent;
border - right: 3 px solid# f83531;
left: initial
}
.wp - travel - average - review.review - only {
height: auto;
padding: 1 px 0
}
.entry - meta.category - list - items.wp - travel - caret {
padding: 0 7 px
}
.wp - travel - average - review.review - only span {
padding - top: 0;
line - height: 1.55;
position: relative
}
.wp - travel - itinerary - list.wp - travel - post - wrap - bg.recent - post - bottom - meta {
width: 100 %;
padding: 10 px
}
.wp - travel - itinerary - list.wp - travel - post - wrap - bg.recent - post - bottom - meta.trip - price {
text - align: left
}
.wp - travel - itinerary - list.wp - travel - post - wrap - bg.recent - post - bottom - meta.trip - price del,
.wp - travel - itinerary - list.wp - travel - post - wrap - bg.recent - post - bottom - meta.trip - price ins {
display: inline - block;
margin - right: 10 px
}
.wp - travel - itinerary - list.wp - travel - post - wrap - bg.recent - post - bottom - meta.trip - price ins {
margin - right: 0
}
- After the addition of the CSS , you have to add below given code in functions.php file.
add_filter( 'wp_travel_show_per_person', 'show_per_person' );
function show_per_person( $bool ) {
return true;
}
You can make the decision by looking into the screenshot mentioned above.
