Author: allaboutbasic

Actually this is little bit advanced technique, you need to have a good idea regarding jQuery. Basically I had to add a spinner just before the submit button of the form, so that viewers get idea that the form submission is working and they don’t get confused.

Here is the JQuery Code I used:

If you want to create a Terms and Condition Checkbox with the link pointing to the page, you can create it easily. Here is the code which you need to use

 [checkbox* terms-condition "I have read and agree to the terms and conditions. *"] <a href="http://www.yoursite.com/terms-and-condition"> Terms & conditions </a> 

The code will go in the Contact Form 7 ( like below)

Thats it. If you have any Question feel free to do comments below.

Suppose you want your visitor not to see any specific pages and want them to redirect to login or register page, then you can do this using this following code. Here i used the body class of wordpress page. Using the Body class and using php and jquery you can redirect it .

<?php
   $classes = get_body_class();
if (in_array('my-profile',$classes)   || in_array('page-id-2324',$classes)    ) {

if( ! is_user_logged_in() ) {
     ?>
  <script>
 window.location.href = "https://yoursiteurl.com/register/";
  </script>	      
     
<?php
}} 
?>

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.

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.

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.

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.

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

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

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.com/wp-content/uploads/2020/08/jw-logo.png"> </span>
			<span> <img src="https://allaboutbasic.com/wp-content/uploads/2020/08/printex-logo.png"> </span>
			<span> <img src="https://allaboutbasic.com/wp-content/uploads/2020/08/sitepod-logo.png"> </span>
			<span><img src="https://allaboutbasic.com/wp-content/uploads/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%;
}
}

Sometimes you may need to use Hidden Field in Contact Form 7 to get the URL of the Post or page where the form is used.

I have used [hidden url] as field field (screenshot below), to get the URL of the page I used the form.

At last, use this JQuery code to get the URL value Automatically

<script>

jQuery(document).ready(function(){
var url      = window.location.href;  
console.log("url"+url);		 
jQuery('input.wpcf7-form-control.wpcf7-hidden').attr("value",url) ; 	
 }); 	
</script>