Caliris WP
Contents
1. Set Up Video
2. How To Edit Tutorial
3. Documentation Caliris WP
4. Add Contact Form with Contact Form 7 Plugin
5. Add Posts Thumbnails in Latest Posts shortcode (News Section)
6. How to edit Social Icons
7. Changelog
1. Set Up Video
2. How To Edit Tutorial
3. Documentation Caliris WP
4. Add Contact Form with Contact Form 7 Plugin
Code used for Contact Form:
<p>[text* your-name placeholder "Name"]</p>
<p>[email* your-email placeholder "Email"]</p>
<p>[textarea your-message placeholder "Message..."]</p>
<p class="contact-submit-holder">[submit "Send"]</p>
CSS code:
.wpcf7-form
{
max-width: 100%;
width: 770px;
margin: 0 auto;
font-size: 22px;
color: #000;
}
.wpcf7-form p
{
margin-bottom: 0 !important;
}
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea
{
border: 0;
border-bottom: 1px solid;
padding-bottom: 5px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
width: 100%;
line-height: 25px;
color: #000;
font-weight: 400;
margin-bottom: 35px;
}
.wpcf7 textarea
{
height: 150px;
}
.wpcf7 input[type=text]::-webkit-input-placeholder, .wpcf7 input[type=email]::-webkit-input-placeholder, .wpcf7 textarea::-webkit-input-placeholder
{
font-family: 'Open Sans', sans-serif;
color: #000;
font-weight: 400;
font-size: 16px;
line-height: 25px;
}
.wpcf7 input[type=text]::-moz-placeholder, .wpcf7 input[type=email]::-moz-placeholder, .wpcf7 textarea::-moz-placeholder
{
font-family: 'Open Sans', sans-serif;
color: #000;
font-weight: 400;
font-size: 16px;
line-height: 25px;
opacity: 1;
}
.wpcf7 input[type=text]:-ms-input-placeholder, .wpcf7 input[type=email]:-ms-input-placeholder, .wpcf7 textarea:-ms-input-placeholder
{
font-family: 'Open Sans', sans-serif;
color: #000;
font-weight: 400;
font-size: 16px;
line-height: 25px;
}
.wpcf7 input[type=text]:-moz-placeholder, .wpcf7 input[type=email]:-moz-placeholder, .wpcf7 textarea:-moz-placeholder
{
font-family: 'Open Sans', sans-serif;
color: #000;
font-weight: 400;
font-size: 16px;
line-height: 25px;
opacity: 1;
}
.wpcf7 input[type=text], .wpcf7 input[type=email]
{
padding-bottom: 5px;
}
.wpcf7 input[name="your-name"]
{
margin-top: 0;
padding-top: 0;
}
.contact-submit-holder
{
position: relative;
margin-bottom: 25px;
}
.wpcf7 input[type=submit]
{
display: inline-block;
border: none;
text-align: center;
padding: 20px 40px 20px 45px;
cursor: pointer;
margin-bottom: 25px;
vertical-align: middle;
text-decoration: none;
background: transparent;
font-family: 'Open Sans', sans-serif;
color: #fff !important;
background-color: #f1576b;
padding-bottom: 17px;
padding-top: 17px;
padding-left: 60px;
padding-right: 60px;
transition: all .2s linear;
border-radius: 50px;
font-size: 18px;
font-weight: 700;
}
.wpcf7 input[type=submit]:hover
{
background-color: #000;
color: #fff;
}
span.wpcf7-not-valid-tip
{
font-size: 12px;
}
div.wpcf7-response-output
{
margin: 0;
padding: 0.2em 1em;
font-size: 14px;
}
div.wpcf7 .ajax-loader
{
display: none !important;
}5. Add Posts Thumbnails in Latest Posts shortcode (News Section)
PHP part:
In functions.php add this code:
function cocobasic_latest_posts_thumbnails($atts, $content = null) {
extract(shortcode_atts(array(
"class" => '',
"num" => 5,
"more" => ''
), $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 .= '<h4 class="entry-title"><a href="' . get_permalink($post->ID) . '">' . get_the_title() . '</a></h4>
<div class="entry-date published">' . get_the_date('j M Y') . '</div>
<div class="cat-links">
<ul>
' . $cat . '
</ul>
</div>';
$return .= '</article>';
endwhile;
if ($more != '') {
$return .= '<div class="more-posts-link"><a href="' . $more . '"><img src="' . get_template_directory_uri() . '/images/[email protected]" alt=""></a></div>';
}
$return .= '<div class="clear"></div></div>';
wp_reset_postdata();
return $return;
}
add_shortcode("latest_posts_thumbnails", "cocobasic_latest_posts_thumbnails");
---------------------------
CSS part:
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;
}
---------------------------
Update the content:
On your "News" section, instant of using:
[latest_posts num="5" more="YOUR_LINK_TO_BLOG"]
use the new shortcode, like this:
[latest_posts_thumbnails num="5" more="YOUR_LINK_TO_BLOG"]
---------------------------
The result:
You should have this as result:
6. How to edit Social Icons
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>
Remove some of icons
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>
Add New Icons
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>
7. Changelog
ver 1.5 (March 1, 2022)
====================
- functions.php
- style.css
- Core Plugin (CocoBasic - Caliris WP) update to 1.5
ver 1.4 (September 23, 2020)
====================
- header.php
- functions.php
- style.css
- Core Plugin (CocoBasic - Caliris WP) update to 1.4
ver 1.3 (June 28, 2019)
====================
- Core Plugin (CocoBasic - Caliris WP) update to 1.3
ver 1.2 (December 25, 2018)
====================
- style.css
- functions.php
- js/main.js
- css/common.css
- admin/js/custom-admin.js
- admin/custom-admin.php
- Removed: admin/js/admin.js
- Added: wpml-config.xml
- Core Plugin (CocoBasic - Caliris WP) update to 1.2
ver 1.1 (May 10, 2018)
====================
- Core Plugin (CocoBasic - Caliris WP) update to 1.1
- functions.php - minimum required ver for plugin 1.1
- PSD files added