Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Isotop Filter WordPress custom Register post; Create custom-register-post.php then include file functions.php
//Custom Post Type
require_once get_template_directory() .'/inc/custom_post_type.php';
example: https://codepen.io/srga/pen/ZoKNBG
``
Include js plugins
``
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.1.1/shuffle.js
then: include slick slider
register_post_type(
'recent_projects', array(
'labels'=> array(
'name' => __('Projects', 'civil_construction'),
'singular_name' => __('Project', 'civil_construction'),
'add_new' => __( 'Add New Project', 'civil_construction' ),
'add_new_item' => __( 'Add New Project', 'civil_construction' ),
'edit_item' => __( 'Edit Project', 'civil_construction' ),
'featured_image' => _x( 'Project Thambnail', 'civil_construction' ),
'set_featured_image' => _x( 'Set Project Thumbnail', 'civil_construction' ),
'remove_featured_image' => _x( 'Remove Project Thumbnail', 'civil_construction' ),
),
'public' =>true,
'supports' => array('title', 'custom-field'),
)
);
/**
* Recent Projects Section Custom Taxonomy
*/
register_taxonomy('project_cat', 'recent_projects', array(
'labels'=>array(
'name' => __('Categories', 'civil_construction'),
'singular_name' => __('Category', 'civil_construction'),
),
'hierarchical' => true,
'show_admin_column' => true,
));
}
add_action('init', 'civil_construction_custom_post');
// Shuffle js filter and masonry
function projectShuffle() {
if ($('.shuffle-wrapper').length !== 0) {
var Shuffle = window.Shuffle;
var myShuffle = new Shuffle(document.querySelector('.shuffle-wrapper'), {
itemSelector: '.shuffle-item',
sizer: '.shuffle-sizer',
buffer: 1
});
$('input[name="shuffle-filter"]').on('change', function (evt) {
var input = evt.currentTarget;
if (input.checked) {
myShuffle.filter(input.value);
}
});
$('.shuffle-btn-group label').on('click', function () {
$('.shuffle-btn-group label').removeClass('active');
$(this).addClass('active');
});
}
}
projectShuffle();
/* Projects area
================================================== */
/* Project filter nav */
.shuffle-btn-group {
display: inline-block;
margin: 20px 0 50px;
width: 100%;
border-bottom: 3px solid #ffb600;
}
.shuffle-btn-group label {
display: inline-block;
color: #212121;
font-size: 14px;
padding: 6px 25px;
padding-top: 10px;
font-weight: 700;
text-transform: uppercase;
transition: all 0.3s;
cursor: pointer;
margin: 0;
}
.shuffle-btn-group label.active {
color: #212121;
background: #ffb600;
}
.shuffle-btn-group label input {
display: none;
}
/* Project shuffle Item */
.shuffle-item {
padding: 0;
}
.shuffle-item .project-img-container {
position: relative;
overflow: hidden;
}
.shuffle-item .project-img-container img {
-webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
transform: perspective(1px) scale3d(1.1, 1.1, 1);
transition: all 400ms;
}
.shuffle-item .project-img-container:hover img {
-webkit-transform: perspective(1px) scale3d(1.15, 1.15, 1);
transform: perspective(1px) scale3d(1.15, 1.15, 1);
}
.shuffle-item .project-img-container:after {
opacity: 0;
position: absolute;
content: '';
top: 0;
right: auto;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
transition: all 400ms;
}
.shuffle-item .project-img-container:hover:after {
opacity: 1;
}
.shuffle-item .project-img-container .gallery-popup .gallery-icon {
position: absolute;
top: 0;
right: 0;
z-index: 1;
padding: 5px 12px;
background: #ffb600;
color: #fff;
opacity: 0;
-webkit-transform: perspective(1px) scale3d(0, 0, 0);
transform: perspective(1px) scale3d(0, 0, 0);
transition: all 400ms;
}
.shuffle-item .project-img-container:hover .gallery-popup .gallery-icon {
opacity: 1;
-webkit-transform: perspective(1px) scale3d(1, 1, 1);
transform: perspective(1px) scale3d(1, 1, 1);
}
.shuffle-item .project-img-container .project-item-info {
position: absolute;
top: 50%;
margin-top: -10%;
bottom: 0;
left: 0;
right: 0;
padding: 0 30px;
z-index: 1;
}
.shuffle-item .project-img-container .project-item-info-content {
opacity: 0;
-webkit-transform: perspective(1px) translate3d(0, 15px, 0);
transform: perspective(1px) translate3d(0, 15px, 0);
transition: all 400ms;
}
.shuffle-item .project-img-container .project-item-info-content .project-item-title {
font-size: 20px;
}
.shuffle-item .project-img-container .project-item-info-content .project-item-title a {
color: #fff;
}
.shuffle-item .project-img-container .project-item-info-content .project-item-title a:hover {
color: #ffb600;
}
.shuffle-item .project-img-container .project-item-info-content .project-cat {
background: #ffb600;
display: inline-block;
padding: 2px 8px;
font-weight: 700;
color: #000;
font-size: 10px;
text-transform: uppercase;
}
.shuffle-item .project-img-container:hover .project-item-info-content {
opacity: 1;
-webkit-transform: perspective(1px) translate3d(0, 0, 0);
transform: perspective(1px) translate3d(0, 0, 0);
}
.general-btn .btn-primary:hover {
background: #000;
}
/* Project owl */
.owl-theme.project-slide {
margin-top: 60px;
}
.project-slide .item {
position: relative;
overflow: hidden;
width: 100%;
}
.project-item img {
width: 100%;
max-width: auto;
transition: all 0.6s ease 0s;
}
.project-item:hover img {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.project-item-content {
position: absolute;
bottom: -1px;
padding: 15px 20px;
width: 100%;
background: #ffb600;
}
.owl-theme.project-slide .owl-nav > div {
position: absolute;
top: -70px;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.project-slide .owl-nav > div {
display: inline-block;
margin: 0 2px;
font-size: 20px;
background: #ffb600;
color: #fff;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
.owl-theme.project-slide .owl-nav > .owl-prev {
right: 35px;
left: auto;
}
/* Projects Single page */
.project-title {
font-size: 30px;
}
.project-info-label {
color: #303030;
font-weight: 700;
font-size: 14px;
}
.project-info-content {
font-size: 12px;
}
.project-info li {
margin-bottom: 5px;
}
.project-link {
margin-top: 15px;
}
<section id="project-area" class="project-area solid-bg">
<div class="container">
<div class="row text-center">
<div class="col-lg-12">
<?php
$portfolio_section_title = civil_redux_data('portfolio_projects_section_title');
$portfolio_projects_section_sub_title = civil_redux_data('portfolio_projects_section_sub_title');
?>
<?php if($portfolio_section_title !=''):?>
<h2 class="section-title"><?php echo $portfolio_section_title?></h2>
<?php endif; ?>
<?php if($portfolio_projects_section_sub_title !=''):?>
<h3 class="section-sub-title"><?php echo $portfolio_projects_section_sub_title?></h3>
<?php endif; ?>
</div>
</div>
<!--/ Title row end -->
<div class="row">
<div class="col-12">
<div class="shuffle-btn-group">
<label class="active" for="all">
<input type="radio" name="shuffle-filter" id="all" value="all" checked="checked"><?php echo esc_html('Show All', 'civil_construction')?>
</label>
<?php
$recent_project_menus = get_terms('project_cat');
foreach($recent_project_menus as $recent_project_menu){
?>
<label for="<?php echo $recent_project_menu->slug; ?>">
<input type="radio" name="shuffle-filter" id="<?php echo $recent_project_menu->slug; ?>" value="<?php echo $recent_project_menu->slug; ?>"><?php echo $recent_project_menu->name; ?>
</label>
<?php
}
?>
</div><!-- project filter end -->
<div class="row shuffle-wrapper">
<div class="col-1 shuffle-sizer"></div>
<?php
$args = array(
'post_type' => 'recent_projects',
'posts_per_page'=>-1,
'orderby'=>'menu_order',
'order'=>'DSC'
);
$query = new WP_Query($args);
while($query->have_posts()){
$query->the_post();
$popup_large_image = get_field('large_image');
$normal_image = get_field('normal_image');
?>
<div class="col-lg-4 col-md-6 shuffle-item" data-groups="[&quot;<?php
$project_items = get_the_terms(get_the_ID(), 'project_cat');
$cats = array();
foreach($project_items as $project_item){
$cats[] = $project_item->name;
$slug = $project_item->slug;
echo $slug.'&quot';
}
?>]">
<div class="project-img-container">
<?php if(!empty($normal_image)):?>
<a class="gallery-popup" href="<?php echo $popup_large_image['url']; ?>">
<img class="img-fluid" src="<?php echo $normal_image['url'];?>">
<span class="gallery-icon"><i class="fa fa-plus"></i></span>
</a>
<?php endif; ?>
<div class="project-item-info">
<div class="project-item-info-content">
<h3 class="project-item-title">
<a href="<?php echo the_permalink();?>"><?php echo the_title(); ?></a>
</h3>
<?php
foreach($cats as $cat):
?>
<p class="project-cat"><?php echo $cat; ?></p>
<?php endforeach; ?>
</div>
</div>
</div>
</div><!-- shuffle item 1 end -->
<?php
}
wp_reset_postdata();
?>
</div><!-- shuffle end -->
</div>
<div class="col-12">
<div class="general-btn text-center">
<a class="btn btn-primary" href="projects.html">View All Projects</a>
</div>
</div>
</div><!-- Content row end -->
</div>
<!--/ Container end -->
</section><!-- Project area end -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment