Author: allaboutbasic

Zoologist  by Automattic is a simple single column theme. If you are searching for a single column layout theme with basic design then this theme can be a good choice for you. Here I am going to share you CSS tricks to modify header, footer, fonts style and more.

Live Demo of Zoologist by Automattic

If you want to install it in your self hosted wordpress site, you can download them from WordPress.com repository.

Download Zoologist Parent theme Blockbase

Download Zoologist Child theme

Also You need to Install Gutenberg Plugins by Gutenberg Team

So, Here I am sharing you the css tricks which you can use to change the style of the theme.

Here I am sharing you a basic template to show Custom Post Type posts with pagination and also the values from Advance Custom Field plugins.

If you face any issue to implement it, feel free to do comments in the comments section.

<?php
/**
* Template Name: Custom Post Archive
*
* @package WordPress
 */
 get_header(); 
?>
<?php 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(  
        'post_type' => 'herb_study',
        'post_status' => 'publish',
        'posts_per_page' =>3, 
         'paged' => $paged
       
    );

    $loop = new WP_Query( $args ); 
        
    while ( $loop->have_posts() ) : $loop->the_post(); 
?>

 
 
<?php 
if(get_field('Image',get_the_ID())){?>
<img src="<?php   echo get_field('Image',get_the_ID());?>"/>
<?php } ?>
 
 
 
 <?php endwhile;
 ?>


<span class="pagination"> 
 <?php
 echo paginate_links( array(
                   'total' => $loop->max_num_pages
               ) );
 
     ?>
</span>		
		 
        <?php  
   
    wp_reset_postdata();
?>

<?php get_footer(); ?>

So I tried to test the Zoologist theme by Automattic which is using Blockbase parent theme. But while trying to install, I found the theme showing this Fatal Error

Solution

Please Install Gutenberg plugins by Gutenberg team . Click Here To Install Gutenberg Plugins and the issue will be solved

Suppose you are visiting a page and you scrolled to a portion of that page, now if you refresh or reload the page, you need to check you are not at the top of the website
and add a class to a HTML Elements. So This jQuery code will help you achieve this.

	<script>
	jQuery(document).ready(function(){
		 
 
    var windowpos = jQuery(window).scrollTop();
	console.log(windowpos);
      
      if(windowpos>100){
        jQuery('CLASS OR ID OF HTML ELEMENTS').addClass('CLASS YOU WANT TO ADD');
      }
 }); 	
 </script>

Basically this is a solution of broken link in wordpress. As broken link cause issues in SEO, so you may need to redirect a bulk amount of urls to different url. So here I am sharing you a solution which basically I found working.

Client wanted to redirect all urls ( which was showing 404 error ) containing specific slug ( like category/success-story/) to be redirected to a different URL. Here is the code i used and put it in htaccess file of wordpress root folder.

<IfModule>
RewriteEngine on
RewriteRule ^(.*)url-slug/url-childslug(.*)$ https://www.your-site-url/page/about [L,R=301]
</IfModule>

Just replace the slugs and url as per your requirement.

If you need to put a search form to show blog post based on the search term, you can use the code I shared. Generally normal search form may show you result from pages and other custom post type. But here I used the form which is used to show only blog posts.

Those who are creators, artists, teachers, service providers and have websites, they can use this Tip Jar WP plugins to accept tips or donations etc. Actually I found one of my client using this plugins and i helped her configuring it and did some css changes to make it fit by changing the width and font size. If you are using you can ask question in the comments section.

Theme Sobe is a lighthearted personal blogging theme by Automattic for sharing life’s most memorable moments. You can see the Demo of theme Sobe. If you want to use it in your personal blogging site, you can download Theme Sobe from WordPress.com theme repository, or from here.

Here, I will share with you some css customizations which you can use to modify the header font size, color, contents etc. If you have any questions feel free to ask in the comments section.

You can show the Contact Form 7 form in your live site, but can make the Submit button remain disable so that no one can submit it . Here I am sharing you a piece of jQuery code using which you can make the Contact Form Submit button block or inactive.

Here is the jQuery code

Here I am sharing the small procedure about how to use own custom font without the help of plugins in wordpress site. This procedure can be used for any type of sites or platform.

Here are the steps:

1. At first upload your choiceable font ( which you want to use in the site ) in the root directory using ftp or through cpanel. I have attached screenshot for better understanding