WordPress Tricks

WordPress theme Twenty Twenty-One: Modifications and customizations of headers, fonts, styles and more

January 5, 2021January 5, 2021 allaboutbasic

WordPress 5.6 comes with a brand new default theme: Twenty Twenty-One. Here I am sharing you some basic css or style modifications using which you can give it a look of your own. I have added the child theme below which you can download and use without any issue.

Download Twenty Twentyone Child theme.

Continue reading →

WordPress Tricks

Previous and Next Post title from same category

December 20, 2020 allaboutbasic

Sometimes you may want to show the previous and next post title from same category just below your post. Here I am sharing you the code which i got from internet and used for someone which worked great. Here I am sharing you the corresponding css and php code.

CSS Code ( This code may need to tweak based on your theme)

div#opagination a[rel="prev"] {
    float: left;
    width: 50%;
}
div#opagination span {
    margin-left: 12px;
    margin-right: 12px;
}
div#opagination center {
    display: inline;
    
}
span.nextpost.txt {
    float: right;
}
span.prevpost.txt {
    float: left;
}
div#opagination a[rel="next"] {
    float: right;
	width: 50%;
	display:block;
}
div#opagination * {
    font-size: 15px;
}

div#opagination a span:last-child,div#opagination a span:last-child * {
    /* background: red; */
    display: block;
    font-size: 23px;
    font-weight: bold;
	text-align:center;
	clear: both;
}
div#opagination a span:first-child,div#opagination a span:first-child * {
    font-weight: bold;
    color: #ab9797 !important;
}

PHP code (That will go in your single.php file)

<?php
$post_id = $post->ID; // current post ID
$cat = get_the_category(); 
$current_cat_id = $cat[0]->cat_ID; // current category ID 

$args = array( 
	'numberposts'=>-1,
    'category' => $current_cat_id,
    'orderby'  => 'post_date',
    'order'    => 'DESC'
);
$posts = get_posts( $args );
// get IDs of posts retrieved from get_posts
$ids = array();
foreach ( $posts as $thepost ) {
    $ids[] = $thepost->ID;
}
// get and echo previous and next post in the same category
$thisindex = array_search( $post_id, $ids );
//print_r($ids);
$previd    = isset( $ids[ $thisindex - 1 ] ) ? $ids[ $thisindex - 1 ] : false;
$nextid    = isset( $ids[ $thisindex + 1 ] ) ? $ids[ $thisindex + 1 ] : false;
echo  '<div id="opagination">' ;
if (false !== $previd ) {
			?><a rel="prev" href="<?php echo get_permalink($previd) ?>"><span class="prevpost txt"><< Article plus récent </span><span><?php echo get_the_title($previd); ?></span></a><?php
}
if (false !== $nextid ) {
			?><a rel="next" href="<?php echo get_permalink($nextid) ?>"><span class="nextpost txt">Article plus ancien >></span> <span><?php echo get_the_title($nextid); ?> </span> </a><?php
}
			echo '</div>';
			
			?>

WordPress Tricks

HTML Tab without bootstrap : Tabbed menu with only css, jQuery and html

December 8, 2020 allaboutbasic

Tabbed menu without bootstrap ( using css, jquery and html)

In most of the cases we uses bootstrap, which is easy to use. But sometimes we may need to create tabbed menu without bootstrap. Here I am sharing you the related html, css and jQuery code using which you can use Tabbed menu without using bootstrap (screenshot above). You can use this in WordPress, Shopify or any other platform where you can use html,css and jQuery.

You can contact me at om2000_cuet in my skype or can ask question in comments section.

Continue reading →

WordPress Tricks

WordPress Podcasting theme Spearhead by Automattic : Modifications of header, footer, fonts, widgets, titles and more

November 5, 2020November 13, 2020 allaboutbasic

Spearhead is a new wordpress theme designed with podcasting in mind. A minimal, elegant wordpress theme which lets your content speak for itself. It is a Child theme of Seedlet theme. Here I am sharing you some css modifications which you can use to style the theme. See the Demo of Spearhead theme. You can download Spearhead Theme from WordPress Repository. Download Parent Theme Seedlet by Automattic.

Continue reading →

WordPress Tricks

Seedlet by Automattic: A writing and content based theme’s Modifications, Support and Customization

August 22, 2020August 26, 2020 allaboutbasic

Seedlet by Automattic is a free WordPress theme which is designed to focus on typography allowing your writing and content to shine. If you want to use this theme, i have shared some css which you can use to change the design, like font, color, size etc of the theme.

You can download Seedlet by Automattic from WordPress Repository.

Download Child theme of Seedlet

You can contact me at om2000_cuet in my skype or can ask question in comments section

Continue reading “Seedlet by Automattic: A writing and content based theme’s Modifications, Support and Customization” →

WordPress Tricks

How to show company logo side by side and vertically centered

August 17, 2020 allaboutbasic

If you want to show company logo side by side and vertically centered, i have shared the related html and css for your convenience

HTML Part To Show Company Logos side by side

<div id="logos">
 			<span> <img src="https://allaboutbasic.files.wordpress.com/2020/08/jw-logo.png"> </span>
			<span> <img src="https://allaboutbasic.files.wordpress.com/2020/08/printex-logo.png"> </span>
			<span> <img src="https://allaboutbasic.files.wordpress.com/2020/08/sitepod-logo.png"> </span>
			<span><img src="https://allaboutbasic.files.wordpress.com/2020/08/swingit-logo.png"></span>
</div>

CSS Part To Show Company Logos Side by Side

    #logos {
    box-shadow: 11px 1px 8px 2px #888888!IMPORTANT;
    padding: 10px;
    margin-bottom: 24px;
    margin-top: 1px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
}
   #logos span {
    min-height: 160px;
    max-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #2b93d1;
    height: 200px;
    text-align: center;
    margin-right: 0px!important;
    padding-left: 50px;
    padding-right: 50px;
    width: 17%;
    float: left;
}
		
div#logos img {
    width: 100%;
}
@media (min-width: 320px) and (max-width: 668px) { 
div#logos img {
    width: auto !important;
    height: auto !IMPORTANT;
}
div#logos span {
    border: none !important;
    border-bottom: 1px solid #2b93d1 !IMPORTANT;
    display: block !IMPORTANT;
    width: auto !important;
    height: auto !IMPORTANT;
    overflow: hidden;
    max-height: 100%;
    min-height: auto;
    float: none;
    padding-top: 50px;
    padding-bottom: 50px;
}
div#logos {
    width: 100%;
}
}

WordPress Tricks

Theme Monet By Pro Theme Design: Customization of Header, footer, fonts , color and More

July 10, 2020July 10, 2020 allaboutbasic

If you are a Creative Photographer then wordpress theme Monet is for you. Monet is a delicate responsive grid-layout theme targeted at photographers and other creatives. Here I am sharing you some css tricks using which you can modify the header color, fonts, font family and more. If you have any Question feel free to ask in comment section.

To change font size, color and font family of Header title in homepage

.main .post-archive article h2.entry-title {
    font-size: 26px !IMPORTANT;
    color: white !IMPORTANT;
    font-family: cursive !important;
}

Continue reading “Theme Monet By Pro Theme Design: Customization of Header, footer, fonts , color and More” →

WordPress Tricks

FAQ accordion without plugins: using html, css and JQuery

June 25, 2020 allaboutbasic

If you want to create a FAQ (Frequently Asked Question) page and want to show the Question & Answers in Accordion ( click and open), then you can use this code. Though there are plugins for that, but here I am sharing you the basic FAQ accordion html css and JQuery code so that you can use it without the use of plugins. Feel Free to message me in Skype if you need help.

JQuery Part

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>

	jQuery(document).ready(function(){
		 
jQuery('.faq-accordion .faq-content-container').hide();
jQuery('.faq-accordion > div:eq(0) .faq-accordion-title').addClass('active').next().slideDown();
jQuery('.faq-accordion .faq-accordion-title').click(function(j) {
    var dropDown2 = jQuery(this).closest('div').find('.faq-content-container');
    jQuery(this).closest('.faq-accordion').find('.faq-content-container').not(dropDown2).slideUp();
    if (jQuery(this).hasClass('active')) {
        jQuery(this).removeClass('active');
    } else {
        jQuery(this).closest('.faq-accordion').find('.faq-accordion-title').removeClass('active');
        jQuery(this).addClass('active');
    }
    dropDown2.stop(false, true).slideToggle();
    j.preventDefault();
});			
	
 }); 		
</script>

CSS Part

<style>
.faq-accordion{background:rgba(21,20,21,.8);border-bottom:none}
.faq-accordion p{color:white;}
.main-faq-accordion{position:relative;padding:140px 0;background:linear-gradient(to right,#17161a,#242124 50%,#17161a)}
.faq-accordion-box .faq-accordion-title{padding:12px 50px 11px 40px;border-top:1px solid rgba(255,255,255,.05);color:#fff;font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;position:relative;cursor:pointer;margin:0;box-sizing:border-box;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0);-webkit-transition:color .2s ease-out,background-color .2s ease-out;-moz-transition:color .2s ease-out,background-color .2s ease-out;transition:color .2s ease-out,background-color .2s ease-out}
.faq-accordion-title .faq-accordion-mark{position:absolute;top:50%;right:40px;transform:translate(0,-50%);color:#fff;font-size:18px;transition:.3s}
.faq-accordion-title:hover .faq-accordion-mark,.faq-accordion-title.active .faq-accordion-mark{transform:translate(0,-50%) rotate(45deg)}
.faq-accordion .faq-accordion-box:first-child .faq-accordion-title{border-top:none}
.faq-accordion .faq-content-container{border-top:1px solid transparent;padding:30px 40px 48px 41px}
.faq-accordion .faq-content-container p{font-size:15px;margin-bottom:0}
.faq-accordion-title.active~.faq-content-container{border-color:#ff0e1f}
</style>

HTML Part

<div class="faq-accordion">
    <div class="faq-accordion-box">
        <p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 1</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
        <div class="faq-content-container" style="display: none;">
 			<p>1st Question Answer  </p>
        </div>
    </div>
	
 
	     <div class="faq-accordion-box">
        <p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 2</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
        <div class="faq-content-container" style="display: none;">
 			<p>2nd Question Answer</p>
        </div>
    </div>
	 
	     <div class="faq-accordion-box">
        <p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 3</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
        <div class="faq-content-container" style="display: none;">
 			<p>3rd Question Answer</p>
        </div>
    </div>
	   
	 
	 
</div>

WordPress Tricks

Redirect Website to different pages based on Country

April 2, 2020 allaboutbasic

This code i used for one of my client and it works. Based on client’s requirement I redirect his site to different pages based on country ( Denmark, Netherlands, Poland, France and Germany. Here is the code:

<?php
$ip = $_SERVER['REMOTE_ADDR']; // This will contain the ip of the request

// You can use a more sophisticated method to retrieve the content of a webpage with php using a library or something
// We will retrieve quickly with the file_get_contents
$dataArray = json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));

//var_dump($dataArray);

// outputs something like (obviously with the data of your IP) :

// geoplugin_countryCode => "DE",
// geoplugin_countryName => "Germany"
// geoplugin_continentCode => "EU"

//echo "Hello visitor from: ".$dataArray->geoplugin_countryCode;
if($dataArray->geoplugin_countryCode=='DE'){
echo("<script>location.href = 'http://yoursiteurl.com/DE/';</script>");
 
}
else if($dataArray->geoplugin_countryCode=='NL'){
    echo("<script>location.href = 'http://yoursiteurl.com/NL/';</script>");
}
 else if($dataArray->geoplugin_countryCode=='FR'){
    echo("<script>location.href = 'http://yoursiteurl.com/FR/';</script>");
}
 else if($dataArray->geoplugin_countryCode=='PL'){
    echo("<script>location.href = 'http://yoursiteurl.com/PL/';</script>");
} 
 else if($dataArray->geoplugin_countryCode=='IT'){
    echo("<script>location.href = 'http://yoursiteurl.com/IT/';</script>");
} 
 else if($dataArray->geoplugin_countryCode=='DK'){
    echo("<script>location.href = 'http://yoursiteurl.com/DK/';</script>");
} 
 else if($dataArray->geoplugin_countryCode=='ES'){
    echo("<script>location.href = 'http://yoursiteurl.com/ES/';</script>");
} 
 else if($dataArray->geoplugin_countryCode=='PL'){
    echo("<script>location.href = 'http://yoursiteurl.com/PL/';</script>");
} 
?>

WordPress Tricks

Covid-19 Corona Virus warning message for your website — For wordpress, html and other platform

March 19, 2020March 19, 2020 allaboutbasic

If you want to show Covid-19 Virus warning in your site, try to use this code. Put this in your header. It will be looked like the screenshot

<div id="icegram_messages_container" class="" style="background: black;text-align: center;color: white;padding: 12px;"><span class="left" style="font-weight: bold;">Important Patient Safety Information: Coronavirus (COVID-19)</span><span><a href="http://fiverr.brraprojects.com/" class="lmr" style="color: white; padding: 5px; background: white; color: black !important;margin-left: 12px;padding-right: 11px;font-weight: 400;border-radius: .25em;float: none;padding: .2em 1.3em;">Learn More</a> </span></div>

	allaboutbasic on Lodestar theme By Automattic:…
	Diana on Lodestar theme By Automattic:…
	allaboutbasic on Lodestar theme By Automattic:…
	Diana on Lodestar theme By Automattic:…
	allaboutbasic on Twenty Seventeen Theme: Modifi…
	Fernando on Twenty Seventeen Theme: Modifi…
	allaboutbasic on Seedlet by Automattic: A writi…
	Gaye Chapman on Seedlet by Automattic: A writi…

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this: