Developer Guidance
Developer Guidance

Category: Wordpress

wordpress

Categories
Wordpress

How to Add HTTP Security Headers in WordPress (Beginner’s Guide)

How To Add Http Security Headers

If your website is on WordPress platform then you should care more about website security. HTTP security headers allow you to add extra layer to your WordPress site. They help to block malicious activity and save from the attackers.

Developer Guidance guide you How to easily add HTTP security headers in WordPress.
What are HTTP Security Headers?
HTTP security headers are a security measure that allows your website’s server to prevent from some common threats.
Fundamentally, when a client visits your site, your web sends sends an HTTP header response back to their browser. This response tells browser about concerning mistake codes, cache control, and other situations with.
The normal header response issues a status called HTTP 200. If your website is having difficulty then your web server may send a different HTTP header.

For example, it may send a 500 internal server error, or a not found 404 error code.

HTTP security headers are a subset of these headers and are utilized to keep sites from normal
and prevent from danger like click-jacking, cross-site scripting, brute force attacks, and more.

We should have a speedy look at what HTTP security headers resemble and how they deal with ensure your site.

HTTP Strict Transport Security (HSTS)

HTTP Strict Transport Security (HSTS) header tells internet browsers that your site utilizes HTTPs and should not be loaded using insecure protocol like HTTP.

In the event that you have moved your WordPress site from HTTP to HTTPs, this security header permits you to prevent programs from stacking your site on HTTP.

X-XSS Protection

X-XSS Protection header allows you to block cross-site scripting from loading on your WordPress website.

X-Frame-Options

X-Frame-Options security header forestalls cross-space iframes or click-jacking.

X-Content-Type-Options

X-Content-Type-Options blocks content emulate type sniffing.

That being said, we should investigate how to effortlessly add HTTP security headers in WordPress.

Adding HTTP Security Headers in WordPress

HTTP security headers work best when they are set at the web worker level (i.e your WordPress facilitating account). This permits them to be set off almost immediately during a regular HTTP demand and gives most extreme advantage.

They work far better in the event that you are utilizing a DNS-level site application firewall like Sucuri or Cloudflare. We’ll show you every strategy, and you can pick one that turns out best for you.

Here are fast connects to various techniques, you can leap to the one that suits you.
Sucuri is the best WordPress security module available. Assuming you are utilizing their site firewall administration as well, you can set HTTP security headers without composing any code.

To start with, you should pursue a Sucuri account. It’s anything but a paid help that accompanies a cut off level site firewall, security module, CDN, and malware evacuation ensure.

During join, you will address basic inquiries, and Sucuri documentation will help you set up the site application firewall on your site.

In the wake of joining, you need to introduce and actuate the free Sucuri module. For additional subtleties, see our bit by bit guide on the most proficient method to introduce a WordPress module.

Upon enactment, go to Sucuri Security » Firewall (WAF) page and enter your Firewall API key. You can find this information under your account on Sucuri website.
Click on the Save button to store your changes.

Next, you need to switch to your Sucuri account dashboard. From here, click on the Settings menu on top and then switch to the Security tab.

From here you can pick three arrangements of rules. The default security, HSTS, and HSTS Full. You will see which HTTP security headers will be applied for each set of rules.

Snap on the ‘Save Changes in The Additional Headers’ catch to apply your changes.

That is all, Sucuri will currently add your chose HTTP security headers in WordPress. Since it’s anything but a DNS level WAF, your site traffic is shielded from programmers even before they arrive at your site.

Adding HTTP Security Headers in WordPress using Cloudflare

Cloudflare offers a fundamental free site firewall and CDN administration. It needs progressed security highlights in their free arrangement, so you should move up to their Pro plan which are more costly.

To include Cloudflare on your site, see our tutorial on how to add Cloudflare free CDN in WordPress

When Cloudflare is dynamic on your site, go to the SSL/TLS page under your Cloudflare account dashboard and afterward change to the Edge Certificates tab.

Setting up HTTPS security headers in Cloudflare

Presently, look down to the HTTP Strict Transport Security (HSTS) segment and snap on the ‘Empower HSTS’ button.

Empower HSTS on Cloudflare

This will raise a popup with guidelines revealing to you that you should have HTTPS enabled on your WordPress blog before using this feature. Click on the Next button to proceed, and you will see the choices to add HTTP security headers.

Enable HTTPS security headers in Cloudflare

From here, you can empower HSTS, no-sniff header, apply HSTS to subdomains (in the event that they are utilizing HTTPS), and preload HSTS.

This strategy gives fundamental assurance using HTTP security headers. In any case, it doesn’t allow you to add X-Frame-Options and Cloudflare doesn’t have a UI to do that. you can do in any case that by making a content using the Workers highlight.

Adding HTTP Security Headers in WordPress using .htaccess

This technique permits you to set the HTTP security headers in WordPress at the server level.

It requires you to edit the .htaccess file on your site. It is a server configuration file used by the most commonly used Apache webserver software.

Simply connect to your website using an FTP client, or the file manager app in your hosting control panel. In the root folder of your website, you need to locate the .htaccess file and edit it.

Alter the .htaccess file in WordPress

This will open the document in a plain text editor . At the lower part of the file, you can add the code to add HTTPS security headers to your WordPress site.

You can utilize the accompanying example code as a beginning stage, it sets the most regularly utilized HTTPs security headers with ideal settings:

1
<ifModule mod_headers.c> Header set Strict-Transport-Security "max-age=31536000" env=HTTPS Header set X-XSS-Protection "1; mode=block" Header set X-Content-Type-Options nosniff Header set X-Frame-Options DENY Header set Referrer-Policy: no-referrer-when-downgrade </ifModule>

Note: Incorrect headers or clashes in .htaccess record may trigger 500 Internal server error on most web hosts.

Adding HTTP Security Headers in WordPress using Plugin

This strategy is somewhat less successful as it’s anything but a WordPress module to change the headers. Notwithstanding, it is additionally the simplest method to add HTTP security headers to your WordPress site.

To begin with, you need to introduce and enact the Redirection module. For additional subtleties, see our bit by bit guide on the best way to introduce a WordPress module.

Upon initiation, the module will show a set up wizard that you can simply track with to set up the module. From that point onward, go to Tools » Redirection page and change to the ‘Site’ tab.

Site settings in Redirection module

Then, you need to look down to the lower part of the page to the HTTP Headers area and snap on the ‘Add Header’ button. Starting from the drop menu, you need to choose ‘Add Security Presets’ choice.

Adding header presets utilizing Redirection

From that point forward, you should tap on it again to add those alternatives. Presently, you will see a preset rundown of HTTP security headers show up in the table.

HTTP security header presets

These headers are upgraded for security, you can survey them and change them if necessary. Whenever you are done, remember to tap on the Update catch to save your changes.

You would now be able to visit your site to ensure that all is working great.

Categories
Wordpress

How to Add Custom Pagination in WordPress

How to Add Custom Pagination in WordPress

Pagination for the post-show in homepage, category page, or author page. Pagination plays an important role in your WordPress website. Pagination helps you in page load time, better user experience. Custom Pagination helps you to divide 100 posts or pages into multiple pages.

What is Pagination?

Pagination is a technique where online posts or blogs are divided into several web pages. Pagination is also known as paging. Pagination can be handled from the client end or server end
In easy words: Pagination is a process of dividing the content into multiple pages.

Advantages of Pagination

  • Better User Engagement.
  • Increase page performance
  • Easy to Manage Website Content

How to Add Custom Pagination in WordPress Step by Step.

Custom Pagination in WordPress

Add the following code to your theme file like index.php, category.php, author.php, or template-blog.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  {{urvanov-syntax-highlighter-internal:0}}
    
        {{urvanov-syntax-highlighter-internal:1}}
        <!-- the loop -->
        {{urvanov-syntax-highlighter-internal:2}}
<li>
      <a href="<?php echo get_permalink(); ?>"><h2>{{urvanov-syntax-highlighter-internal:4}}</h2> </a>
     <div class="blog-content">
       <p>{{urvanov-syntax-highlighter-internal:5}}</p>
     </div>
   </li>
{{urvanov-syntax-highlighter-internal:6}}
    <!-- end of the loop -->
 
    <!-- pagination here -->
    <div class="col-md-12">
    {{urvanov-syntax-highlighter-internal:7}}
</div>
  {{urvanov-syntax-highlighter-internal:8}}
  {{urvanov-syntax-highlighter-internal:9}}
    <p>{{urvanov-syntax-highlighter-internal:10}}</p>
  {{urvanov-syntax-highlighter-internal:11}}

STEP 2: Adding the code in functions.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function custom_pagination($numpages = '', $pagerange = '', $paged='') {
 
  if (empty($pagerange)) {
    $pagerange = 2;
  }
  global $paged;
  if (empty($paged)) {
    $paged = 1;
  }
  if ($numpages == '') {
    global $wp_query;
    $numpages = $wp_query->max_num_pages;
    if(!$numpages) {
        $numpages = 1;
    }
  }
  $pagination_args = array(
    'base'            => get_pagenum_link(1) . '%_%',
    'format'          => '/page/%#%',
    'total'           => $numpages,
    'current'         => $paged,
    'show_all'        => False,
    'end_size'        => 1,
    'mid_size'        => $pagerange,
    'prev_next'       => True,
    'prev_text'       => __('Previous'),
    'next_text'       => __('Next'),
    'type'            => 'plain',
    'add_args'        => False,
    'add_fragment'    => ''
  );
 
  $paginate_links = paginate_links($pagination_args);
 
  if ($paginate_links) {
    echo "<nav class='custom-pagination'>";
    
      echo $paginate_links;
    echo "</nav>";
  }
 
}

Add the CSS to style pagination

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.custom-pagination span{
        background-color: #ffffff;
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    border: 1px solid #eee;
    padding: 8px 15px 8px 15px;
    }
    .custom-pagination a{
        background-color: #ffffff;
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    border: 1px solid #eee;
    padding: 8px 15px 8px 15px;
    }
    .page-numbers.current{
         background-color: #db1e29;
         color: #fff;
    }

For using these code in the category.php file then you need to change a little bit in the existing code

Add the below code at the top of the category.php

PHP
1
{{urvanov-syntax-highlighter-internal:0}}

For category pagination in WordPress use code

We change only the array : ‘category_name’ => $category_slug,

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  {{urvanov-syntax-highlighter-internal:0}}
    
        {{urvanov-syntax-highlighter-internal:1}}
        <!-- the loop -->
        {{urvanov-syntax-highlighter-internal:2}}
<li>
      <a href="<?php echo get_permalink(); ?>"><h2>{{urvanov-syntax-highlighter-internal:4}}</h2> </a>
     <div class="blog-content">
       <p>{{urvanov-syntax-highlighter-internal:5}}</p>
     </div>
   </li>
{{urvanov-syntax-highlighter-internal:6}}
    <!-- end of the loop -->
 
    <!-- pagination here -->
    <div class="col-md-12">
    {{urvanov-syntax-highlighter-internal:7}}
</div>
  {{urvanov-syntax-highlighter-internal:8}}
  {{urvanov-syntax-highlighter-internal:9}}
    <p>{{urvanov-syntax-highlighter-internal:10}}</p>
  {{urvanov-syntax-highlighter-internal:11}}
Categories
Wordpress

How to Add @ custom author page wordpress without plugin

How To Add custom author page wordpress

If you are looking to create custom author pages then in this tutorials Developer Guidance tell you step by step how to create a custom author page wordpress without plugin using ftp or c panel. WordPress is mainly use for blogging purpose .Do you want to create author page of your multi-creator WordPress site? At that point you need to make a redid WordPress writers page to list authors, colleagues, supporters, or some other kind of members.

The default author page only shows the author’s post. You want to change the design of author page or add some more things like (Author NAME, BIO & other things) to your author page then join us i will tell you step by step.

How to Create custom author pages for posts

  • Step 1:- First login ftp or cpanel.
  • Step 2:- Go to /wp-content/themes/your-current-theme/ folder.
  • Step 3:- Inside your current theme create a file name author.php file. or if already have then edit author.php file.
  • Step 4:- Include header and footer or sidebar by below code.
    <?php get_header(); ?>, <?php get_footer(); ?> , <?php get_sidebar(); ?>

Include below code to your author.php file at the top of your file or after include header
Below code should be under php syntax like <?php —— below code—— ?>. Below code show all the details of current author.

1
2
// Set the Current Author Variable $currentauthor
$currentauthor = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{{urvanov-syntax-highlighter-internal:0}}
///// ADD YOUR CODE///
//In my case
<div class="col-md-6 yes_1">
<div class="series-container">
<div class="news-post image-post">
<div class="post-gallery">
<a href="<?=the_permalink()?>"><img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?=the_title()?>" /></a> <div class="hover-box">
<div class="inner-hover">
<div class="image-post-title"><a class="truncate-lines" data-truncate-lines="2" href="<?=the_permalink()?>">{{urvanov-syntax-highlighter-internal:5}}</a></div>  <ul class="post-tags">
<li><i class="fa fa-user"></i><a href="<?php echo site_url();?>/author/<?php the_author_meta('user_login') ?>">{{urvanov-syntax-highlighter-internal:8}}</a></li><li><i class="fa fa-clock-o"></i>{{urvanov-syntax-highlighter-internal:9}}</li> </ul>
</div>
</div>
</div>
</div>
 
</div>
</div>
{{urvanov-syntax-highlighter-internal:10}}
<p>{{urvanov-syntax-highlighter-internal:11}}</p>
{{urvanov-syntax-highlighter-internal:12}}

Above code help to how to create a custom author page wordpress without plugin. Please follow Developer Guidance for futher update.

  • <?php the_author_meta( ‘user_login’ ); ?> – Displays the authors login name.
  • <?php the_author_meta( ‘user_pass’ ); ?> – Displays the authors password in hexadecimal form
  • <?php the_author_meta( ‘user_nicename’ ); ?> – Displays the authors nicename (same as their login)
  • <?php the_author_meta( ‘user_email’ ); ?> – Displays the authors email address.
  • <?php the_author_meta( ‘user_url’ ); ?> – Displays the authors URL.
  • <?php the_author_meta( ‘user_registered’ ); ?> – Displays the date the author registered with your site.
  • <?php the_author_meta( ‘user_activation_key’ ); ?> – Displays the authors activation key (if applicable).
  • <?php the_author_meta( ‘user_status’ ); ?> – Displays the authors user status e.g. user who has confirmed account has a user status of 2.
  • <?php the_author_meta( ‘display_name’ ); ?> – Displays the name the author has chosen to display publicly.
  • <?php the_author_meta( ‘nickname’ ); ?> – Displays the authors nickname.
  • <?php the_author_meta( ‘first_name’ ); ?> – Displays the authors first name.
  • <?php the_author_meta( ‘last_name’ ); ?> – Displays the authors last name.
  • <?php the_author_meta( ‘description’ ); ?> – Displays the authors bio.
  • <?php the_author_meta( ‘jabber’ ); ?> – Displays the authors Jabber / Google Talk contact info.
  • <?php the_author_meta( ‘aim’ ); ?> – Displays the authors AIM contact info.
  • <?php the_author_meta( ‘yim’ ); ?> – Displays the authors Yahoo messenger contact info.
  • <?php the_author_meta( ‘user_level’ ); ?> – Displays the authors user level (e.g. admin are level 10, subscribers are level 0).
  • <?php the_author_meta( ‘user_firstname’ ); ?> – Displays the authors first name.
  • <?php the_author_meta( ‘user_lastname’ ); ?> – Displays the authors last name.
  • <?php the_author_meta( ‘user_description’ ); ?> – Displays the authors bio.
Categories
Digital Marketing Magento Php Wordpress

5 Tools That Protect Your Website From Hacking

how to protect your website from hacking

Hacking means to gain barred way into the computer system. Cyber-security is vital to keep your website safe for visitors. You should pay proper attention how to protect website from hackers . Hacking can cause financial loss, issues to brand reputation and also affects the search engine ranking. Tools That Protect Your Website From Hacking by using undermentioned tools:- how to protect website from hackers Hacking means to gain barred way into the computer system. Cyber-security is vital to keep your website safe for visitors. You should pay proper attention how to protect website from hackers . Hacking can cause financial loss, issues to brand reputation and also affects the search engine ranking. Tools That Protect Your Website From Hacking by using undermentioned tools:-

Tools That Protect Your Website From Hacking

Hostinger:-

Hostinger creates a quick and strong password. It randomly creates a unique alphanumeric password. Creating a strong password is important to protect your website from hackers. It is easy to go with a password that you can remember easily, but it puts the security of your file at a risk. The length of the password in Hostinger can vary from 8 to 40 alphanumeric codes as per your preference.

Mal Care:-

Mal Care is one of the most secure plugins. To protect your WordPress website from hacking you need to install a security plugin. Your website resides in a world that is plagued with hackers who security constantly on the prowl. A new website without any security measures is more prone to cyber-attacks. Mal Care automatically scans your website once a day. It also offers one-click cleaning and site hardening facilities. The main features of Mal Care are as follows:-

  • It detects Malware that other plugins miss.
  • Provide scanning of WordPress.
  • Mal Care deep scans the website on their server, which ensures your server never gets overloaded.
  • Schedules automatic scans to receive up to date daily security reports on your email.

Update Your Site:-

Running your site on outdated software is one of the major reasons behind the hacking. Updates bring new features, enhance functionality, and fix security issues. This, it is important to update your website from Hackers.

Blog Vault:-

Blog Vault is the most reliable WordPress backup plugin solution for your website. Fixing a hacked website could take longer, and it is also difficult to do so. A backup copy of your website would enable you to restore it back easily. Blog Vault provides backup, restoring, staging, and also helps in managing your WordPress sites.

Install SSL Certificate:-

Secure Sockets Layer certificate keeps the data transferred between your website and the users safe. When you install an SSL certificate your site would change from HTTP to HTTPs. A padlock would appear on the address bar, which means your website is safe and users can trust your site to share their card information, personal contact data, etc. SSL would encrypt the data. Hackers won’t be able to read it even if they get their hands on such sensitive information.

These Tools That Protect Your Website From Hacking or against malicious attacks.

Categories
Wordpress

How to Save Your Form Data in WordPress Database

How to Save Your Form Data in WordPress Database

Does a question arise How to Save Your Form Data in WordPress Database? , Developer Guidance helps to Saving data from the form to WordPress Database Table. Here we not use any plugin to store form data into a wordpress database table.

Saving custom WordPress form data into database we use $_POST.
here is a syntax you can use <?php if ( isset( $_POST[‘submit’] ) ){ }?>
or <?php if (!empty($_POST)) {}?>

Above $_POST is a super global variable which is used to collect form data after submitting. This is widely used variable.

Use the below code by which you can save the custom WordPress form data into database table.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
[php]if (!empty($_POST)) {
        global $wpdb;
        $table = table_name;
        $data = array(
            'name' => $_POST['name'],
            'email' => $_POST['email'],
            'mobile' => $_POST['mobile'],
            'message' => $_POST['message'],
        );
        $format = array(
            '%s',
            '%s',
            '%s',
            '%s'
        );
        $success=$wpdb->insert( $table, $data, $format );
        if($success){
            echo 'data has been save' ;
        }
    } else {
        [/php]
        <form method="post" action="" id="form1">
                <input name="name" type="text">
                <input name="email" type="email">
                <input name="mobile" type="number">
                <input name="message" type="text">
                <input type="submit" name="submit" value="send">
</form>
       [php]
    }  
[/php]

The above code helps you how to send form data to a database in WordPress. Insert a row into a table in WordPress. <?php $success=$wpdb->insert( $table, $data, $format ); ?>.

table
(string) The name of the table to insert data into.

data
(array) Data to insert (in column => value pairs). Both $data columns and $data values should be “raw” (neither should be SQL escaped).

format
(array|string) (optional) An array of formats to be mapped to each of the values in $data. If string, that format will be used for all of the values in $data. If omitted, all values in $data will be treated as strings unless otherwise specified in wpdb::$field_types.

By above help you How can I insert data from custom form in a WordPress site?

Categories
Wordpress

How to Display woocommerce Products by custom code

Display woocommerce Products

In this tutorial, we discussed how to display woocommerce products with your custom HTML or with a simple layout.

The Basic Code

PHP
1
2
3
4
5
6
7
8
9
10
11
12
//developers guidance
{{urvanov-syntax-highlighter-internal:0}}
{{urvanov-syntax-highlighter-internal:1}}
{{urvanov-syntax-highlighter-internal:2}}
{{urvanov-syntax-highlighter-internal:3}}
{{urvanov-syntax-highlighter-internal:4}}
{{urvanov-syntax-highlighter-internal:5}}
{{urvanov-syntax-highlighter-internal:6}}
<p>
     {{urvanov-syntax-highlighter-internal:7}}
</p>
{{urvanov-syntax-highlighter-internal:8}}

Display Woocommerce Products category wise:

The below code help to display the woocommerce products

PHP
1
2
{{urvanov-syntax-highlighter-internal:0}}
{{urvanov-syntax-highlighter-internal:1}}

You can add more conditions as per the requirement in-display woocommerce products.

‘limit’ => 8, ‘order’ => ‘ASC’, etc

for example :

PHP
1
{{urvanov-syntax-highlighter-internal:0}}{{urvanov-syntax-highlighter-internal:1}}

USING ABOVE CODE HOW TO DISPLAY IMAGE, NAME ETC.

Display Image: <?=wp_get_attachment_url($value->image_id );?>

Display Name : <?=(wp_strip_all_tags($value->name), 7, ‘…’?> or <?=$value->name?>

Display Price : <?=$value->price;?>

Product Url : <?=$value->slug?>

Basic Functions to display woocommerce products

  • the_title() : Display the product name
  • the_excerpt() : Display the brief description about the product
  • the_content() : Dispaly the full description of the product
  • the_permalink() : Dispay the product URL
  • the_post_thumbnail() : Display product image
  • the_ID() : Display product ID
Categories
Wordpress

500 internal server error in wordpress

how to fix 500 internal server error in wordpress

Internal Server error is not specific for wordpress it can be occur in any site and platform.

http error 500 showing to your website, this is not a server issue, it can be occur due to plugin , theme or many more.

What is the 500 internal server error

how to fix 500 internal server error

Internal sever error are unclear , basically we do know what actually happen , unknown error comes.

This error comes when we do operation that went wrong to our website. In wordpress this error comes usually by the script in the theme or by plugin.

Do not worry , we provide you good solution to fix the error( 500 internal server error in wordpress).

How to Fix 500 internal server error

SOLUTION 1 :

  • Go to ftp or cpanel of your site
  • On the root you find .htaccess file.
  • Rename . htaccess file for example .htaccess_rename
How to Fix 500 internal server error

SOLUTION 2 :

Turn on debugging mode in WordPress. Follow the step to turn on debugging mode.

  • Go to ftp or c panel
  • There is file wp-config.php
  • Edit the file wp-config.php
how to resolve interval server error

define( ‘WP_DEBUG’, false ); make false value true

internal server error

SOLUTION 3 :

Deactivate all plugins , If you have an access to your dashboard then deactivate the plugin one by one and check the website.

If you do not have access or admin is not working then follow the steps below:

  • Go to cpanel or ftp
  • Enter to wp-content folder
  • Click to plugin folder then rename the plugin folder.

SOLUTION 4 :

Increase your memory

  • Go to wp-config file increase the memory
  • Add below code.

define(‘WP_MEMORY_LIMIT’, ’64M’);

500 internal server error

SOLUTION 5 :

Rename the theme folder

  • Login to cpanel or ftp
  • Go to wp-content folder
  • Then rename theme folder

CONCLUSION :

Follow the above solution to solve 500 internal server error in wordpress , if the error still remain the same the contact your hosting provider.

Categories
Wordpress

How To Add Product Variations in WooCommerce

In this tutorial, we create the color and size attribute, which is shown in the products as shown below in the image and afterward we create variations products in woocommerce.

E-commerce Business are trending in the market in today’s world. Variation Products means a product that has color and size etc. which we can show on the product details page. variations products in woocommerce is required for the products which have size, color and weight, etc

Now we start with our tutorial:

Creating WooCommerce Variations Attribute:

1) Size
2) Color

Steps as shown below:

Step 1: Go to the WordPress admin dashboard.

Step 2: In Left side navigation there is Products and inside them there is Attribute click it as shown below

WooCommerce Products Variations attribute

Step 3: In Add new attribute Enter Name and Slug for example: Name-: Color and Slug:- color and click Add attribute.

Step 4: Click to configure terms to add item which are in attribute as shown below. for example color: black, blue, etc.

add attribute item

Step 5: Add New color enter color name and slug and click to add new color

After creating an attribute We use the attribute to create the variable products.

Creating WooCommerce Variations Products:

Step 1: Go to products and click Add New.

Step 2: Enter the title and description and come below there is product data. Select Variable Product and put the details as per your requirement.

Step 3: Click the attribute from the side navigation. Choose color and click Add. Now one box is open click select all to add all the attributes or click the text box to select the color then click to save attribute.

use attributes in products

Step 4 : Click checked to Used for variations to show variation

Step 5: Select Create a variation of all products

WooCommerce Products Variations

Step 6 -: Publish Product

Categories
Codeigniter Javascript Jquery Laravel Php Wordpress

Animated Bootstrap image slider using HTML and JavaScript

In this Tutorial, We learn How to Create a simple animated image slider using HTML, CSS, and JavaScript.

Today’s world websites are in demand and the slider makes a huge impact on the website. We create the design in which the user can easily understand what are our services and make his/her website good. In this, we explain a simple animated slider step by step.

Slider has the background image, text, and image which comes in animated style.

Let’s Make animated bootstrap image slider with HTML code :

Step1: Image Folder/Url

Create an image folder or pass the URL as shown in index.html. Make sure that all the images are in the same width*height (size) and Otherwise, the slider will misbehave while navigating between slides and it looks untidy.

Step2:Index.html

Copy code and simply paste the code.

Index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Full Width And Auto Animated Slider </title>
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    {{urvanov-syntax-highlighter-internal:0}}
</head>
<body>
    <div class="clearfix"></div>
    <div class="content-wrap">
        <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:-1px;width:980px;height:405px;overflow:hidden;visibility:hidden;">
            <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:405px;overflow:hidden;">
                <div data-b="0"> <img data-u="image" src="http://developerguidance.com/wp-content/uploads/2020/05/New-Project.jpg" alt="" />
                    <div style="position:absolute;top:77px;left:460px;width:460px;height:210px;z-index:0;"> <img data-u="caption" data-t="0" style="position:absolute;top:-330px;left:30px;width:390px;height:300px;z-index:0;" src="http://developerguidance.com/wp-content/uploads/2020/05/Key-Features.jpg" ></div>
                    <div data-u="caption" data-t="3" data-to="0% 100%" style="position:absolute;top:300px;left:-100px;width:257px;height:127px;z-index:0;">
                        <div style="position:absolute;top:4px;left:34px;width:300px;height:250px;z-index:0;overflow:hidden;"> <span style="color:#000; font-size:100%;">The Figure Speaks About Our Leadership.<br>
          Take the Advantage of our 10year+ Experience</span>
                            <ul style="color:#000; font-size:120%; margin-top:20px;">
                                <li style="margin-bottom:10px;"><strong style="font-weight:900; font-size:170%; vertical-align:middle;">300+</strong> Website Launch</li>
                                <li style="margin-bottom:10px;"><strong style="font-weight:900; font-size:170%; vertical-align:middle;">200+</strong> BlogsBy Developer Guidance</li>
  
 
                            </ul>
                        </div>
                    </div>
                    <a href="#" target="_blank" style="display:block; position:absolute;top:22px;left:600px;width:320px;height:36px;z-index:0;font-size:22px;color:#ffffff;line-height:1.64;"></a>
                </div>
                
                <div data-b="0"> <img data-u="image" src="http://developerguidance.com/wp-content/uploads/2020/05/Digital-Next-Digital-Marketing-Agency-Hero-Background-1024x373-1.png" alt="digital marketing services" />
                    <div style="position:absolute;top:77px;left:460px;width:460px;height:210px;z-index:0;"> <img data-u="caption" data-t="0" style="position:absolute;top:-330px;left: 210px; width: 250px;height:270px;z-index:0;" src="http://developerguidance.com/wp-content/uploads/2020/05/digi.png" alt="social media marketing" /></div>
                    <div data-u="caption" data-t="3" data-to="0% 100%" style="position:absolute;top:300px;left:-100px;width:257px;height:127px;z-index:0;">
                        <div style="position:absolute;top:4px;left:34px;width:300px;height:250px;z-index:0;overflow:hidden;"> <span style="color:#fff;font-size: 286%;">Digital <strong style="color:#FF0">Market</strong> Solutions By Developer Guidance</span></div>
                    </div>
                    <a href="#l" target="_blank" style="display:block; position:absolute;top:22px;left:600px;width:320px;height:36px;z-index:0;font-size:22px;color:#ffffff;line-height:1.64;"></a>
                </div>
                
              
              
            </div>
            <div data-u="navigator" class="jssorb101" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
                <div data-u="prototype" class="i" style="width:16px;height:16px;">
                    <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                        <circle class="co" cx="8000" cy="8000" r="5000"></circle>
                        <circle class="ci" cx="8000" cy="8000" r="3000"></circle>
                    </svg>
                </div>
            </div>
            <div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
                <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
                </svg>
            </div>
            <div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
                <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
                </svg>
            </div>
        </div>
</body>
</html>

Step3: Add CSS Code

Css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}
 
@keyframes jssorl-009-spin {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}
 
.jssorb101 .i {
    position: absolute;
    cursor: pointer
}
 
.jssorb101 .i .ci {
    fill: #000
}
 
.jssorb101 .i .co {
    fill: #fff;
    opacity: .3
}
 
.jssorb101 .i:hover .co {
    fill: #f93;
    opacity: 1
}
 
.jssorb101 .i:hover .ci {
    fill: #fff
}
 
.jssorb101 .iav .ci {
    fill: #fff;
    stroke-width: 0
}
 
.jssorb101 .iav .co {
    fill: #46d1d3;
    opacity: 1
}
 
.jssorb101 .i.idn {
    opacity: .3
}
 
.jssora051 {
    display: block;
    position: absolute;
    cursor: pointer
}
 
.jssora051 .a {
    fill: none;
    stroke: #fff;
    stroke-width: 360;
    stroke-miterlimit: 10
}
 
.jssora051:hover {
    opacity: .8
}
 
.jssora051.jssora051dn {
    opacity: .5
}
 
.jssora051.jssora051ds {
    opacity: .3;
    pointer-events: none
}

Step 4: Include Js Fil

Put the code in between the <script></script>

Javascript
JavaScript
1
jssor_1_slider_init();

Step 5: Check Final Output

Now, let’s run the HTML page in the browser and see the output. It looks like as shown below in the image. I provide the link of image in slider, you can change it as per your convenient. Animated bootstrap image slider changes look and feel of your website

We are using jssor slider because we can easily create the animated slider 

full width image slider using html css and javascript
Categories
Codeigniter Javascript Jquery Laravel Php Wordpress

Custom Popover Using Jquery

create popover using jquery is used to display the little content in a tooltip-style popup box . Popovers are also known as advanced tooltips.

You can Use the tooltip when if your content is short if not use popover which increase the efficiency of the content.

Now in this We make Popover Which have these fucntionality as given Below:

  • Popover will closed when you click outside any where.
  • When you click one popover another popover will closed automatically.
  • You can pass link in popover.
  • One close sign by which user can close the popover.

Now We will start with coding part:

popover

Popover.html

Popover Using Jquery

Popover.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<title>inner outer click</title>
{{urvanov-syntax-highlighter-internal:0}}
{{urvanov-syntax-highlighter-internal:1}}
</head>
<body>
 
<div id="B1"><button>Button 1</button><div class="popover pop fade bs-popover-right show" style="display: block;">
            <h3 class="popover-header">Developers Guidance <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
             <div class="popover-body">
              <p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
               <p> <a href="#" class="btn new float-right"> Read More </a></p>
              </div>
        </div>
     </div>  
<br><br>
<div id="B2"><button>Button 2</button
><div class="popover pop fade bs-popover-right show" style="display: block;">
            <h3 class="popover-header">New Popover <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
             <div class="popover-body">
              <p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
               <p> <a href="#" class="btn new float-right"> Read More </a></p>
              </div>
        </div>
     </div>  
<br><br>
<div id="B3"><button>Button 3</button><div class="popover pop fade bs-popover-right show" style="display: block;">
            <h3 class="popover-header">Developers Guidance <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
             <div class="popover-body">
              <p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
               <p> <a href="#" class="btn new float-right"> Read More </a></p>
              </div>
        </div>
     </div>  
<br><br>
<div id="B4"><button>Button 4</button><div class="popover pop fade bs-popover-right show" style="display: block;">
            <h3 class="popover-header">New Popover<a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
             <div class="popover-body">
              <p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
               <p> <a href="#" class="btn new float-right"> Read More </a></p>
              </div>
        </div>
    </div>
</div>
<br><br>
<div id="B5"><button>Button 5</button><div class="popover pop fade bs-popover-right show" style="display: block;">
            <h3 class="popover-header">Developers Guidance <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
             <div class="popover-body">
              <p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
               <p> <a href="#" class="btn new float-right"> Read More </a></p>
              </div>
        </div>
      </div>
 
<br><br>
<div id="show"></div>
</body>
</html>

We manage The Custom Popover Using Jquery

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
container = $(".popover");
 
container.hide();
 
$('button').click(function() {
var parent = $(this).parent().attr('id');
$('#' + parent + ' .popover').show();
 
})
$(".pophide").click(function(){
$(".pop").hide();
});
 
 
$(document).mouseup(function(e) {
 
    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide();
    }
});