In ver 2.0 the Portfolio Category / Filter is added. If you want to use this option, you need to set for each portfolio item the category like on the image below:
After you have set Portfolio categories for each item, you need to enable the category filter on Portfolio page. Take a look on image below:
ver 2.3 (February 1, 2023)
===================
- style.css
- functions.php
- admin/class-tgm-plugin-activation.php
- languages/cardea-wp.pot
- CocoBasic - Cardea Elementor Widgets plugin update to 2.2
ver 2.2 (April 29, 2022)
===================
- style.css
- functions.php
- CocoBasic - Cardea Elementor Widgets plugin update to 2.1
ver 2.1 (March 1, 2022)
==============================
- functions.php
- style.css
- header.php
- 404.php
- js/main.js
- CocoBasic - Cardea plugin update to 2.1
ver 2.0 (February 1, 2021)
==============================
- functions.php
- style.css
- CocoBasic - Cardea plugin update to 2.0
- CocoBasic - Cardea Elementor Widgets plugin update to 2.0
What is new?
- Portfolio category / filter is added - https://cocobasic.ticksy.com/article/16758
ver 1.8 (September 23, 2020)
==============================
- functions.php
- header.php
- CocoBasic - Cardea plugin update to 1.8
- CocoBasic - Cardea Elementor Widgets plugin update to 1.5
ver 1.7 (August 20, 2019)
==============================
- style.css
- functions.php
- header.php
- CocoBasic - Cardea plugin update to 1.7
- CocoBasic - Cardea Elementor Widgets plugin update to 1.4
- Added: Demo 8
ver 1.6 (July 23, 2019)
==============================
- CocoBasic - Cardea plugin update to 1.6
- CocoBasic - Cardea Elementor Widgets plugin update to 1.3
- Added: Demo 7
ver 1.5 (July 8, 2019)
==============================
- style.css
- functions.php
- header.php
- js/main.js
- admin/custom-admin.php
- admin/js/custom-admin.js
- languages/cardea-wp.pot
- CocoBasic - Cardea plugin update to 1.5
- CocoBasic - Cardea Elementor Widgets plugin update to 1.2
- Added: Demo 6
ver 1.4 (May 13, 2019)
==============================
- style.css
- functions.php
- admin/custom-admin.php
- admin/js/custom-admin.js
- languages/cardea-wp.pot
- CocoBasic - Cardea plugin update to 1.4
- CocoBasic - Cardea Elementor Widgets plugin update to 1.1
- Added: Demo 5
ver 1.3 (May 5, 2019)
==============================
- style.css
- functions.php
- admin/custom-admin.php
- admin/js/custom-admin.js
- languages/cardea-wp.pot
- CocoBasic - Cardea plugin update to 1.3
- Added: CocoBasic - Cardea Elementor Widgets plugin 1.0
- Added: Elementor page builder plugin
- Added: Demo 3
- Added: Demo 4
ver 1.2 (February 8, 2019)
==============================
- style.css
- functions.php
- js/main.js
- css/common.css
- css/sm-clean.css
- admin/custom-admin.php
- admin/js/custom-admin.js
- languages/cardea-wp.pot
- readme.txt
- images/logo.png
- Core Plugin (CocoBasic - Cardea WP) update to 1.2
ver 1.1 (December 24, 2018)
==============================
- style.css
- functions.php
- js/main.js
- css/common.css
- admin/js/custom-admin.js
- Removed: admin/js/admin.js
- Added: wpml-config.xml
- Core Plugin (CocoBasic - Cardea WP) update to 1.1
The default code is in Dashboard > Appearance > Customize > Footer > Footer Social Content and looks like this:
<a href="#"><span class="fa fa-twitter"></span></a> <a href="#"><span class="fa fa-facebook"></span></a> <a href="#"><span class="fa fa-behance"></span></a> <a href="#"><span class="fa fa-dribbble"></span></a>
You need to change "#" with your links, so you will have, for example for twitter icon, link like this:
<a href="https://twitter.com/CocoBasicThemes"><span class="fa fa-twitter"></span></a>
If you want to open it in new tab, you will use code like this:
<a href="https://twitter.com/CocoBasicThemes" target="_blank"><span class="fa fa-twitter"></span></a>
If you need just lets say Twitter and Facebook, you will have code like this:
<a href="https://twitter.com/CocoBasicThemes"><span class="fa fa-twitter"></span></a> <a href="https://facebook.com/"><span class="fa fa-facebook"></span></a>
If you need to add some other icons (we are using font awesome 4.7.0 version) you need to find it here:
https://fontawesome.com/v4.7.0/icons/
And for example you need YouTube icon, this one:
https://fontawesome.com/v4.7.0/icon/youtube/
You need to use "fa-youtube" class like this:
<a href="https://www.youtube.com/channel/UC5-ceUIpoTNI_YAOtM0fRhQ"><span class="fa fa-youtube"></span></a>
In functions.php add this code:
function cocobasic_latest_posts_thumbnails($atts, $content = null) {
extract(shortcode_atts(array(
"class" => '',
"num" => 5
), $atts));
global $post;
$args = array(
'post_type' => 'post',
'posts_per_page' => $num
);
$loop = new WP_Query($args);
$return = '<div class="blog-holder-scode latest-posts-scode block center-relative">';
while ($loop->have_posts()) : $loop->the_post();
$cat = '';
foreach ((get_the_category()) as $category) {
$cat .= '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li> ';
}
$return .= '<article id="post-' . $post->ID . '" class="relative blog-item-holder-scode">';
if (has_post_thumbnail()) {
$medium_image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
$return .= '<a href="' . get_permalink($post->ID) . '"><div class="latest-posts-thumbnail" style="background-image: url(' . $medium_image_url[0] . ');"></div></a>';
}
$return .= '<div class="entry-date published">' . get_the_date() . '</div>
<div class="cat-links">
<ul>
' . $cat . '
</ul>
</div>';
$return .= '<h4 class="entry-title"><a href="' . get_permalink($post->ID) . '">' . get_the_title() . ' <span class="arrow"></span></a></h4>';
$return .= '<div class="excerpt">' . get_the_excerpt() . '</div>';
$return .= '</article>';
endwhile;
$return .= '<div class="clear"></div></div>';
wp_reset_postdata();
return $return;
}
add_shortcode("latest_posts_thumbnails", "cocobasic_latest_posts_thumbnails");
---------------------------
In Dashboard > Appearance > Customize > Additional CSS :
.latest-posts-thumbnail {
width: 100%;
height: 300px;
background-size: cover;
background-position: center center;
margin-bottom: 20px;
transition: .3s;
}
.latest-posts-thumbnail:hover {
opacity: 0.8;
}
---------------------------
On your "News" section, instant of using:
[latest_posts num="6"]
use the new shortcode, like this:
[latest_posts_thumbnails num="6"]
---------------------------
You should have this as result:
