Item counter in owl Carousel

<script>

jQuery(document).ready(function() {

    var carousel = jQuery(".service-slider");

    jQuery(".service-slider").owlCarousel({

        items: 3,

        loop: true,

        margin: 1,

        autoplay:true,

        autoplayTimeout:2000,

        autoplayHoverPause:true,

        center: true,

        onInitialized  : counter, 

        onTranslated : counter,

        responsive: {

            0: {

                items: 1,

                nav: true,

                dots: false,

            },

            575: {

                items: 2,

                nav: true,

                dots: false,

            },

            767: {

                items: 2,

                nav: true,

                dots: false,

            },

            980: {

                items: 2,

                nav: true,

                dots: false,

            },

            1000: {

                items: 2,

                nav: true,

                dots: false,

            },

            1280: {

                items: 3,

                nav: true,

                dots: false,

            }

        },

    });

    function counter(e) {

   var ele   = e.target;        

    var items     = e.item.count;    

    var item      = e.item.index + 1;  

  if(item > items) {

    item = item - items

  }

        if(items<10){

  jQuery('#number-count').html("<span class=''>0"+item+"</span><span class='divider'> |</span><span class='all-items'> 0"+items+"</span>");

        } else{

       jQuery('#number-count').html("<span class=''>0"+item+"</span><span class='divider'> |</span><span class='all-items'>"+items+"</span>");     

        }

}

});

  </script>

Gradient Border Button CSS

<button>Gradient Border Button </button>

<style>

button {

  color: #000;

  cursor:pointer;

  font-size: 1rem;

  padding: .6rem 4rem;

  border-radius: 100rem;

  border: solid 3px transparent;

  background-origin: border-box;

  background-clip: content-box, border-box;

  box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);

  box-shadow: 2px 1000px 1px #fff inset;

  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #78e4ff, #ff48fa);

}

button:hover {

  color: #fff;

  box-shadow: none;

}

</style>

jQuery to smoothly scroll page

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

<script>
$(document).ready(function(){
  
  $("a").on('click', function(event) {
     

if (this.hash !== "") {
    

 event.preventDefault();
     

var hash = this.hash;
     

$('html, body').animate({
       

 scrollTop: $(hash).offset().top
      

}, 800, function(){
       

window.location.hash = hash;
      

});
   

 }
  

});

});
</script>

Create shortcode use anywhere in WordPress

WordPress short-codes act as shortcuts that allow you to embed elements into a post or page quickly. These usually consist of a single line of code within square brackets, such as [yourshortcode], for example. This code will display a predetermined feature on the front end of your site.

Here is the shortcode.

<?php 

// testimonials slider

add_shortcode( 'list-posts-testimonial', 'testimonial_listing_shortcode' );

function testimonial_listing_shortcode( $atts ) {

  ob_start();

   $query = new WP_Query( array(

        'post_type' => 'testimonial',

        'posts_per_page' => -1,

        'order' => 'ASC',

        'orderby' => 'date',

        'menu_order'=>'ASC',

    ) );

if ( $query->have_posts() ) { 

?>

<div class="testimonial-slider-sec">

    <div class="owl-carousel owl-theme testimonial-slider">

        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

        <div class="testimonial-items">

            <div class="testimonial-box">

                <div class="testimonial-img">

                 <img src="<?php echo get_the_post_thumbnail_url();  ?>" alt="testimonial-image">

            </div>

                <div class="testimonial-content"> 

                <h4><?php the_title(); ?></h4>

                    <?php the_field('designation'); ?>

                </div>

            </div>

        </div>

        <?php endwhile; ?>

        <?php wp_reset_query(); ?>

    </div>

    </div>

<?php 

    $myvariable = ob_get_clean();

        return $myvariable;

    } 

}


This shortcode can be used any where in WordPress pages.

[list-posts-testimonial]

It can be modified as per requirement.

Enqueue Style and Scripts in Wordpress function file

In WordPress, instead of simply adding these to the header, you should use a method called enqueueing which is a standardized way of handling your assets with the added bonus of managing dependencies. Find out how to do it below using wp_enqueue_scripts.

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'owl-style', get_stylesheet_directory_uri() . '/assets/css/owl.carousel.min.css');

    wp_enqueue_style( 'owl-default-style', get_stylesheet_directory_uri() . '/assets/css/owl.theme.default.min.css');

  //wp_enqueue_script( 'owl-carousel', get_stylesheet_directory_uri() . '/assets/js/owl.carousel.min.js', array(), '1.0.0', true);

}

To load scripts in footer use wp_footer.

function add_this_script_footer() {

wp_enqueue_script( 'owl.carousel-js', get_stylesheet_directory_uri() . '/assets/js/owl.carousel.min.js');

wp_enqueue_script( 'scripts_js', get_stylesheet_directory_uri() . '/assets/js/scripts.js');

}

add_action('wp_footer', 'add_this_script_footer'); 

Best website hosting servers

There are many website hosting servers available, and the "best" one depends on your specific needs and requirements. However, here are some popular website hosting servers that are known for their reliability and performance:

1. Bluehost: This hosting server is popular among bloggers, small businesses, and WordPress users. It offers easy-to-use control panels, reliable uptime, and excellent customer support. https://www.bluehost.com/

2. HostGator: HostGator is a popular hosting server for small businesses, offering flexible plans, unlimited bandwidth, and 24/7 customer support. https://hotstar.com/

3. SiteGround: SiteGround is known for its fast loading speeds, excellent customer support, and user-friendly interface. It's a popular choice for WordPress sites and e-commerce stores. https://world.siteground.com/

4. A2 Hosting: A2 Hosting is a reliable hosting server with fast loading speeds, excellent uptime, and affordable pricing. It offers a variety of hosting plans, including shared, VPS, and dedicated hosting. https://www.a2hosting.com/

5. DreamHost: DreamHost is a reliable and user-friendly hosting server with a wide range of features and tools. It offers unlimited bandwidth and storage, free SSL certificates, and easy WordPress installation. https://www.dreamhost.com/

It's important to research and compares different hosting servers before choosing one that best suits your needs. Consider factors such as pricing, uptime, customer support, and features offered.

Scrolling Timeline with HTML CSS

Download free HTML: Scrolling Timeline

Created by: Web Code Addict

Need Email Template HTML Template?

 

Key Features

• HTML5
• Developer-friendly  & Clean HTML5 and CSS3 code
• Google Fonts Support
• Email Template format 
• Fully Customization
• Responsive layout
• 
  

Download free HTML: Email Template

Created by: Web Code Addict

Free Download Education Single page website Responsive HTML5 Template

DV Center is a coaching WordPress theme designed for coaches. Packed with all the features you need for your Coaching website. Attract new clients, Grow your e-mail list, and Sell Courses Online. Start Growing your Coaching Business Now!

Key Features

• Bootstrap 
• Developer-friendly  & Clean HTML5 and CSS3 code
• Google Fonts Support
• Single page theme
• Fully Customization
• Unique Education Website
• Responsive layout
• 
  

Download free HTML: Education Website

Created by: Web Code Addict

Free Download My Bakkery Single page website Responsive HTML5 Template

My Bakery is a Responsive HTML theme for Bakery websites.  which helps you to build your own site. My Bakery perfectly fits the trendy cakery & bakery website with a strong, sweet, and elegant style. It embodies a sensible design with a product-centered layout to captivate every customer’s heart. 

Key Features

• Bootstrap 
• Developer-friendly  & Clean HTML5 and CSS3 code
• Google Fonts Support
• Single page theme
• Fully Customization
• Unique Bakery
• Responsive layout
• 
  

Download free HTML: My Bakery

Created by: Web Code Addict

How to include files in Wordpress function file?

 To include any file in the function file of WordPress just creates a file with the name

 i.e custom.php
                   
                              custom.php

<?php


====================Your code===============

?>


Go to function.php

Use anyone.

1) include ()

 Include function includes the specified file and it will throw PHP warning if the file isn't found.

include(dirname( ABSPATH ) .'/admin-page.php');

this will return /var/www/vhosts/foo.bar/httpdocs/includes/baz.php

2) include_once() 
include_once() works as inlude() and it will not include file
 again if already included.
include_once( get_stylesheet_directory() .'/admin-page.php');

3)  require()
require() works same as include() but PHP fatal error will be trown 
if the file is not exists
require(dirname( ABSPATH ) .'/admin-page.php');
4) require_once()
require_once() performs as require() but fill will be not included 
second time.

require_once( get_stylesheet_directory() .'/admin-page.php');

For Parent Theme: get_template_directory()
or get_template_directory_uri()

For Child Theme: get_stylesheet_directory()
or get_stylesheet_directory_uri()

Cake design template- Html coming soon

 

Download free HTML: My Bakery

Continuous infinite text loop with CSS

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<style>
    .marquee h2 {
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
        position: absolute;
        top: 0;
    }

    .marquee h2 span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 30s linear infinite;
    }

    .marquee2 h2 span {
        animation-delay: 15s;
    }

    @keyframes marquee {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(-100%, 0);
        }
    }
</style>

<div class="marquee">
    <h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></h2>
</div>

<div class="marquee marquee2">
    <h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></h2>
</div>