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>

Synchronization of two Owl Carousel for same post type

 Make sure to add OWL CAROUSEL css and js file

<div class="work-slider">
      <?php $query = new WP_Query( array(
        'post_type' => 'your post type name',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'date',
        'menu_order'=>'ASC',
    ) );

   if ( $query->have_posts() ) { ?>
<div id="work-text" class="owl-carousel owl-theme">
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
  <div class="item">
    <h4><?php the_title(); ?></h4> 
    <?php the_content();?>
    </div>
    <?php endwhile; ?>
        <?php wp_reset_query(); ?>
  
</div>
<?php } ?>

<?php $query = new WP_Query( array(
        'post_type' => 'your post type name',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'date',
        'menu_order'=>'ASC',
    ) );

   if ( $query->have_posts() ) { ?>
<div id="work-videos" class="owl-carousel owl-theme">
     <?php while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="item">
        <div class="work-video">
            <?php the_post_thumbnail(); ?>
            <video width="320" height="240" controls="false" 

autoplay="autoplay" loop autoplay muted> 
                <source src="video.mp4" type="video/mp4">
                <source src="movie.ogg" type="video/ogg">
            </video>
        </div>
    </div>
  <?php endwhile; ?>
        <?php wp_reset_query(); ?>
  
</div>
<?php                          } ?>
</div>

<script>
jQuery(document).ready(function() {

  var slide1 = jQuery("#work-text");
  var slide2 = jQuery("#work-videos");
  var slideSecondary = true;

  slide1.owlCarousel({
    items : 1,
    slideSpeed : 2000,
    nav: false,
    autoplay: false,
    dots: false,
    loop: true,
    responsiveRefreshRate : 200,

  }).on('changed.owl.carousel', slidePosition);

  slide2
    .on('initialized.owl.carousel', function () {
      slide2.find(".owl-item").eq(0).addClass("current");
    })
    .owlCarousel({
    items : 1,
    dots: false,
    nav: false,
    loop: true,
    stagePadding: 50,
    smartSpeed: 200,
    slideSpeed : 500,
    slideBy: slidesPerPage, 
    responsiveRefreshRate : 100
  }).on('changed.owl.carousel', slidePosition2);

  function slidePosition(el) {
   var count = el.item.count-1;
    var current = Math.round(el.item.index - (el.item.count/2) - .5);
    
    if(current < 0) {
      current = count;
    }
    if(current > count) {
      current = 0;
    }
    
   slide2
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = slide2.find('.owl-item.active').length - 1;
    var start = slide2.find('.owl-item.active').first().index();
    var end = slide2.find('.owl-item.active').last().index();
    
    if (current > end) {
      slide2.data('owl.carousel').to(current, 100, true);
    }
    if (current < start) {
      slide2.data('owl.carousel').to(current - onscreen, 100, true);
    }
  }
  
  function slidePosition2(el) {
    if(slideSecondary) {
      var number = el.item.index;
      slide1.data('owl.carousel').to(number, 100, true);
    }
  }
  
  slide2.on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = jQuery(this).index();
    slide1.data('owl.carousel').to(number, 300, true);
  });
});

</script>

How to create a Category filter using Bootstrap Tab Panel

 <div class="portfolio-tabs">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="tab-1" 

data-bs-toggle="tab" data-bs-target="#tab-pane-1" type="button" 

role="tab" aria-controls="tab-pane-1" aria-selected="true">All</button>
                </li>
                    <?php   
                        $terms_array = array( 
                            'taxonomy' => 'portfolio-category', 
                            'parent'   => 0 
                        );
                        $portfolio_terms = get_terms($terms_array); 
                        $i = 2;
                        $j = 2;
                        $k = 2;
                        foreach($portfolio_terms as $term): ?>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-<?=$k; $k++; ?>"

 data-bs-toggle="tab" data-bs-target="#tab-pane-<?=$i; $i++; ?>"

 type="button" role="tab" aria-controls="tab-pane-<?=$j; $j++; ?>"

 aria-selected="false"><?=$term->name; ?></button>

                    </li>
                    <?php endforeach; // End Term foreach; ?>
                    <?php wp_reset_postdata(); ?>

            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="tab-pane-1" 

role="tabpanel" aria-labelledby="tab-1" tabindex="0">
                    <div class="portfolio-tab-block">
                        
                        <?php 
                    $post_args = array(
                        'posts_per_page' => -1,
                        'order' => 'DESC',
                        'post_type' => 'portfolio', 

                    );
                    $loop = new WP_Query($post_args);
                    while ($loop->have_posts()) : $loop->the_post(); ?>
                        <div class="portfolio-items">
                            <div class="portfolio-content">
                                <div class="portfolio-img">
                                    <a href="<?php the_permalink(); ?>">
                                        <img src="<?php the_post_thumbnail_url(); ?>"

 alt="<?php the_title(); ?>">
                                    </a>
                                </div>
                                <div class="portfolio-text">
                                    <h4><a href="<?php the_permalink(); ?>">

<?php the_title(); ?></a></h4>
                                    <?php  $terms = get_the_terms( get_the_ID(),

 'portfolio-category' );
                                        if ( !empty( $terms ) ){
                                            $term = array_shift( $terms ); ?> 
                                            <h6><a href="<?=get_term_link($term); ?> ">

<?=$term->name; ?></a></h6>
                                            <?php 
                                        }
                                    ?>
                                </div>
                                <a href="" class="portfolio-lightbox">
                                    <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                    <?php
                        endwhile;
                        wp_reset_query();
                    ?>
                    </div>
                </div>
                <?php 
                $terms_array = array( 
                    'taxonomy' => 'portfolio-category',

                    'parent'   => 0 

                );
                  $projects_terms = get_terms($terms_array); 
                        $y=2;
                        $z=2;
                 foreach($projects_terms as $term):
                ?>
                <div class="tab-pane fade" id="tab-pane-<?=$y; $y++; ?>" role="tabpanel"

 aria-labelledby="tab-<?=$z; $z++; ?>" tabindex="0">
                    <div class="portfolio-tab-block">
                        <?php 
                            $post_args = array(
                                'posts_per_page' => -1,
                                'post_type' => 'portfolio', 
                                'tax_query' => array(
                                    array(
                                        'taxonomy' => 'portfolio-category', 

                                        'field' => 'slug', 

                                        'terms' => $term->slug,
                                    )
                                )
                            );
                            $loop = new WP_Query($post_args);
                            while ($loop->have_posts()) : $loop->the_post(); ?>
                                <div class="portfolio-items">
                                    <div class="portfolio-content">
                                        <div class="portfolio-img">
                                            <a href="<?php the_permalink(); ?>">
                                                <img src="<?php the_post_thumbnail_url(); ?>"

 alt="<?php the_title(); ?>">
                                            </a>
                                        </div>
                                        <div class="portfolio-text">
                                            <h4><a href="<?php the_permalink(); ?>">

<?php the_title(); ?></a></h4>
                                            <h6><a href="<?=get_term_link($term); ?> ">

<?=$term->name; ?></a></h6>
                                        </div>
                                        <a href="" class="portfolio-lightbox">
                                            <i class="fa fa-arrows-alt" aria-hidden="true">

</i>
                                        </a>
                                    </div>
                                </div>
                            <?php
                            endwhile;
                            wp_reset_query();
                        ?>
                    </div>
                
                
                </div>
                <?php endforeach; // Term Post foreach ?>
                <?php wp_reset_postdata(); ?>
              
            </div>

 

How to create custom post type with taxonomy in wordpress

function portfolio_custom_post_type() {
	$labels = array(
		'name'                => __( 'Portfolio' ),
		'singular_name'       => __( 'Portfolio'),
		'menu_name'           => __( 'Portfolio'),
		'parent_item_colon'   => __( 'Parent Portfolio'),
		'all_items'           => __( 'All Portfolio'),
		'view_item'           => __( 'View Portfolio'),
		'add_new_item'        => __( 'Add New Portfolio'),
		'add_new'             => __( 'Add New'),
		'edit_item'           => __( 'Edit Portfolio'),
		'update_item'         => __( 'Update Portfolio'),
		'search_items'        => __( 'Search Portfolio'),
		'not_found'           => __( 'Not Found'),
		'not_found_in_trash'  => __( 'Not found in Trash')
	);
	$args = array(
		'label'               => __( 'Portfolio'),
		'description'         => __( 'Portfolio'),
		'labels'              => $labels,
		'supports'            => array( 'title', 'editor',

 'excerpt', 'author', 'thumbnail', 'revisions', 'custom-fields'),
		'public'              => true,
		'hierarchical'        => false,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => true,
        'menu_icon'           => 'dashicons-portfolio',
		'show_in_admin_bar'   => true,
		'has_archive'         => true,
		'can_export'          => true,
		'exclude_from_search' => false,
	    'yarpp_support'       => true,
		'taxonomies' 	      => array('portfolio-category,post_tag'),
		'publicly_queryable'  => true,
		'capability_type'     => 'page',
        //'rewrite' => array('slug' => 'portfolio'),
);
	register_post_type( 'portfolio', $args );
}
add_action( 'init', 'portfolio_custom_post_type', 0 );

// Let us create Taxonomy for Custom Post Type
add_action( 'init', 'portfolio_custom_taxonomy', 0 );
 
//create a custom taxonomy name it "type" for your posts
function portfolio_custom_taxonomy() {
 
    $labels = array(
        'name' => _x( 'Portfolio category', 'taxonomy general name' ),
        'singular_name' => _x( 'Portfolio Category', 'taxonomy singular name' ),
        'search_items' =>  __( 'Search Portfolio' ),
        'all_items' => __( 'All Portfolio' ),
        'parent_item' => __( 'Parent Portfolio' ),
        'parent_item_colon' => __( 'Parent Portfolio:' ),
        'edit_item' => __( 'Edit Portfolio' ), 
        'update_item' => __( 'Update Portfolio' ),
        'add_new_item' => __( 'Add New Portfolio' ),
        'new_item_name' => __( 'New Portfolio Name' ),
        'menu_name' => __( 'Portfolio Category' ),
    ); 	

    register_taxonomy('portfolio-category',array('portfolio'), array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'show_admin_column' => true,
        'query_var' => true,
        //'rewrite' => array( 'slug' => 'projects-category' ),
    ));
}

Blinking text with HTML and CSS only

 <span class="blinking">Am I blinking?</span>

.blinking{
    animation:blinkingText 1.2s infinite;
}

.blinking{
    animation:blinkingText 1.2s infinite;
}

@keyframes blinkingText{
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}