Techblog369

Technical Blogs & News

Author: kumar

OTHER

By kumar December 16, 2022

How To Configure A Sendinblue SMTP Relay in Postfix?

Fix Email Issues in CyberPanel with SMTP Relay Setup Free Method. First Create a email using your Cyberpanel Under Emai Tab Create Email Second go to the SSL tab and click …

OTHER

By kumar November 30, 2022

Create a simple password strength indicator with JavaScript

You’ve probably seen many examples of password strength indicators around the web. They let users know the password they’re using is weak and indicate how the strength changes when it’s modified. …

Blogs special

How To Configure A Sendinblue SMTP Relay in Postfix?

December 16, 2022

Create a simple password strength indicator with JavaScript

November 30, 2022

How to create PHP QR code and Save it to Database?

June 21, 2022

How to Send Multiple Files Attachment Mail using Laravel

June 16, 2022

PHP Send Email Using PHPmailer and any Email SMTP

June 11, 2022

By kumar March 16, 2022 1 year 353 words

How to install Cyber panel on Ubuntu and Create PHP Website?

CyberPanel is a modern & free control panel loaded with feathers. It is a great alternative to cPanel or Plesk. In fact, it outshines other open-source control panels like Virtuamin, VestaCP, …

CyberPanel is a modern & free control panel loaded with feathers. It is a great alternative to cPanel or Plesk. In fact, it outshines other open-source control panels like Virtuamin, VestaCP, CentOS Web Panel, etc. It works on top of the OpenLiteSpeed server. Apart from installing normal applications like WordPress, Joomla, Magento, Prestashop it also features email marketing application like Mautic. Some of the features of cyber panel are given below

In built Email Marketing Section
Auto SSL
Docker Containerization
Email List Verification
Out of box Word Press installation
. Easy Backup
Multi PHP
File Manager
Incremental backup
Firewall / Security
FTP server etc.

In this article, you will learn to install Cyber Panel on Ubuntu 20.04. You will also learn to create a WordPress website on CyberPanel.

Requirements for Cyber Panel
Installing Cyber Panel
Creating and Updating Nameservers for main domain
Installing and Enabling SSL
Installing Word Press

Requirements for CyberPanel

A domain name from webcore.in or webcore.co.in
A VPS or cloud with atleast 1 GB RAM. I am using https://webcore.in in this demonstration. I have prepared list of VPS with open port 25, just in case you want to provide emailing to your customers as well.

Though CyberPanel recommends getting a minimum of 1 GB of RAM, I highly recommend you to get at least 2 GB RAM. This will save you from trouble later.

I already have a video lecture on how to purchase VPS from Contabo, that you can follow to buy the VPS.

Installing Cyber Panel

Installation of Cyber Panel is pretty straightforward and no brainer. All you need to do is run a single command to install it. But before that you should update Ubuntu.

Connecting to Remote VPS

Once you have the IP address, username, and password for the VPS, first of all, connect to remote VPS. If you are on a Windows machine you will need a special SSH client called Putty or BitVise. Linux and Mac user can open their terminal.

First of all switch to root user

sudo -i

The next update the OS

apt update -y

After that upgrade the packages using the following command.

apt upgrade -y

Now next command will begin the installation of Cyber Panel.

sh <(curl https://cyberpanel.net/install.sh || wget -O - https://cyberpanel.net/install.sh)

Following this, you will be asked a few questions, just answer them.

 CyberPanel Installer v2.1.1
1. Install CyberPanel.
2. Exit.
  Please enter the number[1-2]: 1

Here answer 1 obviously

CyberPanel Installer v2.1.1
RAM check : 223/1682MB (13.26%)
Disk check : 4/30GB (18%) (Minimal 10GB free space)
1. Install CyberPanel with OpenLiteSpeed.
2. Install Cyberpanel with LiteSpeed Enterprise.
3. Exit.
  Please enter the number[1-3]: 1

Here also you have to answer 1, otherwise, you need a license to the enterprise version

Install Full service for CyberPanel? This will include PowerDNS, Postfix and Pure-FTPd.
Full installation [Y/n]: Y

In the above screen answer Y

Do you want to setup Remote MySQL? (This will skip installation of local MySQL)
(Default = No) Remote MySQL [y/N]: N

Here, your answer should b N, unless you have remote MySQL. After that, you will be asked to press enter to continue.

Press Enter key to continue with latest version or Enter specific version such as: 1.9.4 , 2.0.1 , 2.0.2 ...etc

Next, you will be asked to set a password. I usually set the password instead of choosing the other 2 options. Therefore answer s.

Please choose to use default admin password 1234567, randomly generate one (recommended) or specify the admin password?
Choose [d]fault, [r]andom or [s]et password: [d/r/s] s

On the next screen type your password and enter

Please enter your password:
Password: Confirm Password:

Next, answer Y to install Memcached and other PHP extensions. These will be required later.

Do you wish to install Memcached process and its PHP extension?
Please select [Y/n]: Y

Further, you will be asked whether you want to install the Redis process and its extension. Answer Y.

Do you wish to install Redis process and its PHP extension?
Please select [Y/n]:

At last, you will be asked whether you want to set up a watchdog. I usually answer Y, even though this is in beta.

Would you like to set up a WatchDog (beta) for Web service and Database service ?
The watchdog script will be automatically started up after installation and server reboot
If you want to kill the watchdog , run watchdog kill
Please type Yes or no (with capital Y, default Yes):
Y

At the end of the installation, you will be given login credentials as follows. You will also be asked to restart the server. Answer Y to that.

 CyberPanel Successfully Installed
                Current Disk usage : 9/194GB (6%)
                Current RAM  usage : 308/7961MB (3.87%)
                Installation time  : 0 hrs 12 min 0 sec
                Visit: https://194.163.163.12:8090
                Panel username: admin
                Panel password: *****
                Visit: https://194.163.163.xx:7080
                WebAdmin console username: admin
                WebAdmin console password: 9xBXiJwdQWvbFwUv
                Visit: https://194.163.163.xx:8090/rainloop/?admin
                Rainloop Admin username: admin
                Rainloop Admin password: Q54ZP8j18Rw3pD
             Run cyberpanel help to get FAQ info
             Run cyberpanel upgrade to upgrade it to latest version.
             Run cyberpanel utility to access some handy tools .
              Website : https://www.cyberpanel.net
              Forums  : https://forums.cyberpanel.net
              Wikipage: https://docs.cyberpanel.net
              Docs    : https://cyberpanel.net/docs/
            Enjoy your accelerated Internet by
                CyberPanel & OpenLiteSpeed
###################################################################
If your provider has a network-level firewall
Please make sure you have opened following port for both in/out:
TCP: 8090 for CyberPanel
TCP: 80, TCP: 443 and UDP: 443 for webserver
TCP: 21 and TCP: 40110-40210 for FTP
TCP: 25, TCP: 587, TCP: 465, TCP: 110, TCP: 143 and TCP: 993 for mail service
TCP: 53 and UDP: 53 for DNS service
Would you like to restart your server now? [y/N]: y

Now open the first URL https://194.163.163.xx:8090 in the browser and log in to Cyber Panel.

Creating Website and Updating Nameservers

Now the first thing you should do is to login into the domain registrar and create hostnames. Also, known as custom nameservers or glue records. Usually, every domain registrar has a tutorial for this.

Next, open websites

Then Create a Website

Now fill in the details like domain name, email, select PHP and check the required boxes. I usually check them all.

Click create a website and your website will be ready.

Now to create nameservers, go to Create Nameserver

Installing and Enabling SSL

To install SSL for both website and cyberpanel, go to SSL in left menu

Now Install your WordPress or PHP whatever you want.

It’s easy to install WordPress on CyberPanel. Go to the Websites in the left menu and then List Websites and then Manage.

Now scroll all the way to the bottom. There you will find WordPress and other options

You can find WP+LSCache

Fill in all the information asked for WordPress and click Install Now

After installation, go to your URL to enjoy freshly installed WordPress on LiteSpeed server.

Thanks for reading…

By kumar January 26, 2022 1 year 686 words

How to secure WHMCS?

WHMCS Secure WHMCS is a hosting and billing management software that automates your hosting and domain business. There are many hackers as well as intruders who are trying their best to …

WHMCS Secure

WHMCS is a hosting and billing management software that automates your hosting and domain business. There are many hackers as well as intruders who are trying their best to hack and exploit the WHMCS system.

WHMCS stores very sensitive data of your client like server login, clients name, card details You have a lot of data from your customers whose hosting plans are running. All of your registered domains, in addition to server access, provide a large amount of confidential data. There is a great need to protect your WHMCS system. We continuously monitor various security channels in relation to our customers’ complaints. Therefore, to avoid hackers, malware infections, and vulnerability exploits, it is necessary to follow some security measures.

Six Steps To Secure Your WHMCS

1. Securee Writable Directories

Old 
$attachments_dir = “/home/username/public_html/attachments/”;
$downloads_dir = “/home/username/public_html/downloads/”;
$templates_compiledir = “/home/username/public_html/templates_c”;

After Moving to Pricate

$attachments_dir = “/home/username/whmcsdata/attachments/”;
$downloads_dir = “/home/username/whmcsdata/downloads/”;
$templates_compiledir = “/home/whmcsdate/username/templates_c”;

2. Secure the “configuration.php” file

Securing the configuration.php is very important because it contains database username, password and Hash Encrypt and Decrypts Key, you need to change the permissions for the “configuration.php” file which is in your WHMCS root directory. This is one of the files you cannot recover without backing up the file. adjusting the permissions for the “configuration.php” file in your WHMCS root directory. Change permission set to 400, which will help prevent accidental editing, overwriting, and deleting. Eventually, it will provide read-only access to the file and prevent anyone else from spoofing.

3. Move the Crons directory

Here, we recommend you move the crons folder to a non-public directory which is located above your web root to stop the web-based access. For the relocation, firstly, you need to choose a new location for your crons folder and secondly, uncomment the WHMCS path as well as provide the full path to your WHMCS installation. You need to add the following line to the configuration.php:

$crons_dir= ‘/home/username/whmcs_crons’;

4. Restricting access by IP

To add more privacy to your admin area, you can restrict access to a particular set of IPs. This can only be done by creating a file namely, .htaccess within your admin directory of WHMCS along with the following:

order deny, allow
allow from 15.34.5.67
allow from 98.77.54.32

deny from all

5. Changing WHMCS Admin Folder Name

changing whmcs admin location is very important in whmcs to secure your whmcs admin login area, to customize whmcs admin folder will help your whmcs to get more secured.

Open the configuration.php file within your WHMCS installation’s root directory
At the bottom of the file (before the closing PHP tag ?> if one exists), add the following line:$customadminpath = “myadminfoldername”;
Replacing myadminfoldername with the name you wish to use for your admin directory. This should just be the directory name, not a full path.
If your configuration.php file already contains a custom admin path definition, you can simply update the existing line
Rename the admin directory to the name you specified in step 2 above

6. Enable SSL

the owner of whmcs, which handles all customer data through the billing application, it needs to handle the passage of more sensitive data between it and end-users. Therefore, it is important to have a valid SSL certificate that will allow you to use HTTPS as well as encrypted communication.

Install Mod Security in Easy Apache: You can take additional steps and one of them is installing Mod security in Apache which will help in blocking SQL injection attacks.
install imunify365 on your server
You need to secure your physical server. For this, you need access to the files via SSH/SFTP and relocate the SSH port.
Block all unwanted Ports on your server.
Choose Storgae Password of your whmcs when you setup and make sure there is no other CMS platform hosted in same hosting account or sub folder like wordpress.
One more step is to backup your server and the database files of the server.
Install WHMCS alone on a server.

By kumar January 25, 2022 1 year 146 words

How to Prevent a Directory Listing of Your WordPress Website with .htaccess

HI in this article I will be shown how to access the WordPress Uploads folder without and password and how to prevent this access In this case, I will apply my …

HI in this article I will be shown how to access the WordPress Uploads folder without and password and how to prevent this access

In this case, I will apply my own website

if your website has vulnerable it should look like below

Simply type website URL and then /wp-content-uploads

You can see all the files and folders. Now we will deny accessing this folder using .htaccess

First, you have to go to your Cpanel and find the .htaccess file and paste the below code

Options -Indexes

After saving the .htaccess file you should set read permission only for your htaccess file.

Whenever you modify your .htaccess file, you should always check that your website still works after uploading it. And if you don’t have Cpanel access you should backup first. Using WP File manager plugin you can get all the files.

Thanks for reading….

By kumar January 14, 2022 1 year 131 words

How to Convert HTML to WordPress Theme Part 5

Hi, In the Previous article we had seen how to create a Single post dynamic and Custom post. Today we will see how to create dynamic contact page and form. So, …

Hi, In the Previous article we had seen how to create a Single post dynamic and Custom post. Today we will see how to create dynamic contact page and form.

So, Lets Start

Open page.php Page and paste your static Contact page content and we have to include header and footer also.

page.php
<?php get_header()?>
<article>
        <header class="section background-primary text-center">
            <h1 class="text-white margin-bottom-0 text-size-50 text-thin text-line-height-1">Contact US</h1>
        </header>
        <div class="section background-white"> 
          <div class="line">
            <div class="margin">
              
              <!-- Company Information -->
              <div class="s-12 m-12 l-6">
                <h2 class="text-uppercase text-strong margin-bottom-30">Company Information</h2>
                <div class="float-left">
                  <i class="icon-placepin background-primary icon-circle-small text-size-20"></i>
                </div>
                <div class="margin-left-80 margin-bottom">
                  <h4 class="text-strong margin-bottom-0">Company Address</h4>
                  <p>Responsive Street 7<br>
                     London<br>
                     UK, Europe
                  </p>               
                </div>
                <div class="float-left">
                  <i class="icon-paperplane_ico background-primary icon-circle-small text-size-20"></i>
                </div>
                <div class="margin-left-80 margin-bottom">
                  <h4 class="text-strong margin-bottom-0">E-mail</h4>
                  <p>contact@sampledomain.com<br>
                     office@sampledomain.com
                  </p>              
                </div>
                <div class="float-left">
                  <i class="icon-smartphone background-primary icon-circle-small text-size-20"></i>
                </div>
                <div class="margin-left-80">
                  <h4 class="text-strong margin-bottom-0">Phone Numbers</h4>
                  <p>0800 4521 800 50<br>
                     0450 5896 625 16<br>
                     0798 6546 465 15
                  </p>             
                </div>
              </div>
              
              <!-- Contact Form -->
              <div class="s-12 m-12 l-6">
                <h2 class="text-uppercase text-strong margin-bottom-30">Contact Us</h2>
                <form class="customform">
                  <div class="line">
                    <div class="margin">
                      <div class="s-12 m-12 l-6">
                        <input name="email" class="required email border-radius" placeholder="Your e-mail" title="Your e-mail" type="text" />
                      </div>
                      <div class="s-12 m-12 l-6">
                        <input name="name" class="name border-radius" placeholder="Your name" title="Your name" type="text" />
                      </div>
                    </div>
                  </div>
                  <div class="s-12"> 
                    <input name="subject" class="subject border-radius" placeholder="Subject" title="Subject" type="text" />
                  </div>
                  <div class="s-12">
                    <textarea name="message" class="required message border-radius" placeholder="Your message" rows="3"></textarea>
                  </div>
                  <div class="s-12 m-12 l-4"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit Button</button></div> 
                </form>
              </div>  
            </div>  
          </div> 
        </div> 
      </article>
      <!-- <div class="background-primary padding text-center">
        <a href="/"><i class="icon-facebook_circle icon2x text-white"></i></a> 
        <a href="/"><i class="icon-twitter_circle icon2x text-white"></i></a>
        <a href="/"><i class="icon-google_plus_circle icon2x text-white"></i></a>
        <a href="/"><i class="icon-instagram_circle icon2x text-white"></i></a>                                                                        
      </div> -->
<?php get_footer()?>

Now Our Contact page looks like below

Now we will see how to dynamic our Contact form. First, we have to install contact form7 Plugin we can use another plugin, but here I am using the Contact form7 plugin.

Once Install and Active the plugin, paste below code into your form section

<?php echo do_shortcode('[contact-form-7 id="74" title="Contact form 1"]')?>

Now our Contact form looks like below

Here I am not showing how to design a contact form. I only show how to call the same from the backend.

Now you can see all the inner pages is showing our contact us page content. So we have to separate all the inner pages.

We will separate our about page, So we have to create a template about.php

about.php
<?php
/**
 * Template Name: About
 */
get_header()
?>

<article>
        <header class="section background-primary text-center">
            <h1 class="text-white margin-bottom-0 text-size-50 text-thin text-line-height-1">Sample Page</h1>
        </header>
        <div class="section background-white"> 
          <div class="line">
            <h2 class="text-size-30">Investigationes demonstraverunt lectores</h2>
            <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros 
            et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </p> 
            <blockquote class="margin-top-bottom-20">
              Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.
            </blockquote>
            <p class="margin-bottom-30">
            Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; 
            est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
            Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc 
            putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc 
            nobis videntur parum clari, fiant sollemnes in futurum.
            </p>
            <div class="line">
              <div class="margin">
                <div class="s-12 m-12 l-6 margin-m-bottom-30">
                  <h2>Mirum est notare quam littera gothica</h2>
                  <p>
                  Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. 
                  Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
                  Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
                  </p>
                </div>
                <div class="s-12 m-12 l-6">
                  <h2>Claritas est etiam processus dynamicus</h2>
                  <p>
                  Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. 
                  Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
                  Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
                  </p>
                </div>
              </div>  
            </div>
          </div>
        </div> 
      </article>

      <?php get_footer() ?>



<?php
/**
 * Template Name: About
 */
get_header()
?>

html content

 <?php get_footer() ?>

Note: We must define a template name and it should be matched with your file name.

Once the code is ready you should open your Dashboard and under the pages, section find the About page and select template like below

Thanks for watching …..

Next Article will be Publish ASAP

By kumar January 10, 2022 1 year 557 words

How to convert html to wordpress theme part 4

Hi, in the previous article we had seen slider section and blog post dynamic. Now in this article we will learn single post dynamic and many more.. So lets Start Open …

Hi, in the previous article we had seen slider section and blog post dynamic. Now in this article we will learn single post dynamic and many more..

So lets Start

Open single.php

We call header and footer section using below code

single.php
<?php get_header() ?>


<?php get_footer() ?>

For header use <?php get_header() ?>

For Footer use <?php get_footer() ?>

single.php

<?php get_header() ?>

<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-sm-8">
                <div clas="post-img">
                    <?php the_post_thumbnail('single-img') ?>
                </div><!--  post image -->
                <!-- post meta -->
                <div class="post-meta">
                    <ul class="list-inline">
                    <li> <a href="#"><i class="fa fa-calender"></i><?php the_date()?></a></li>
                    <li> <a href="#"><i class="fa fa-user"></i>By Admin</a></li>
                    <li> <a href="#"><i class="fa fa-calender"></i><?php echo get_comments_number()?></a></li>
                    </ul>
                </div><!-- post meta end -->
                    <div class="post-description">
                        <h3><?php the_title() ?></h3>
                        <p><?php the_content() ?></p>
                    <blockquote><?php the_content() ?></blockquote>
                    </div>
            </div>

        </div>

    </div>

</section>


<?php get_footer() ?>

<?php the_post_thumbnail(‘single-img’) ?> single-img already define in functions.php file

If you notice in home page we use <?php the_excerpt() ?> function for getting the blog content but in single blog we have to use <?php the_content() ?> function

Full Code single.php

single.php

<?php get_header() ?>

<section class="section">
    <div class="container">
        <?php
        if(have_posts()){
            while(have_posts()){
                the_post();?>
        <div class="row">
            <div class="col-md-8 col-sm-8">
                <div clas="post-img">
                    <?php the_post_thumbnail('single-img'); ?>
                </div><!--  post image -->
                <!-- post meta -->
                <div class="post-meta">
                    <ul class="list-inline">
                    <li> <a href="#"><i class="fa fa-calender"></i><?php the_date()?></a></li>
                    <li> <a href="#"><i class="fa fa-user"></i>By Admin</a></li>
                    <li> <a href="#"><i class="fa fa-calender"></i><?php echo get_comments_number()?></a></li>
                    </ul>
                </div><!-- post meta end -->
                    <div class="post-description">
                        <h3><?php the_title() ?></h3>
                        <p><?php the_content() ?></p>
                    <blockquote><?php the_content() ?></blockquote>
                    </div>
            </div>

        </div>
        <?php }} ?>

    </div>

</section>


<?php get_footer() ?>

Now we will work on Sidebar

Open sidebar.php file

<div class="col-md-4 col-sm-4 widget-main post-categories">

<?php dynamic_sidebar('sidebar-2') ?>

</div>

For Dynamic sidebar we have to use WordPress default function <?php dynamic_sidebar(‘sidebar-2’) ?> and sidebar-2 is our widget id

Now go to your Dashboard and drag and drop search field into the widget like below

Now go to your single.php file and paste the below code

<?php get_sidebar() ?> because if we didn't call from single.php file sidebar can't  understand which file required sidebar

Our Single Page Working successfully.

Now we will learn how to create custom post, there have two method one is using php code another is using wp-hasty.com.

In this article we will use wp-hast.com site for custom post

Lets Start go to the mentioned site

Now create a folder named inc under the theme folder in my case my theme folder name is bornfeel . Once create a folder inc create a file named protfolio.php and paste the below code

protfolio.php

// Register Custom Post Type protfolio
function create_protfolio_cpt() {

	$labels = array(
		'name' => _x( 'profolios', 'Post Type General Name', 'bornfeel' ),
		'singular_name' => _x( 'protfolio', 'Post Type Singular Name', 'bornfeel' ),
		'menu_name' => _x( 'profolios', 'Admin Menu text', 'bornfeel' ),
		'name_admin_bar' => _x( 'protfolio', 'Add New on Toolbar', 'bornfeel' ),
		'archives' => __( 'protfolio Archives', 'bornfeel' ),
		'attributes' => __( 'protfolio Attributes', 'bornfeel' ),
		'parent_item_colon' => __( 'Parent protfolio:', 'bornfeel' ),
		'all_items' => __( 'All profolios', 'bornfeel' ),
		'add_new_item' => __( 'Add New protfolio', 'bornfeel' ),
		'add_new' => __( 'Add New', 'bornfeel' ),
		'new_item' => __( 'New protfolio', 'bornfeel' ),
		'edit_item' => __( 'Edit protfolio', 'bornfeel' ),
		'update_item' => __( 'Update protfolio', 'bornfeel' ),
		'view_item' => __( 'View protfolio', 'bornfeel' ),
		'view_items' => __( 'View profolios', 'bornfeel' ),
		'search_items' => __( 'Search protfolio', 'bornfeel' ),
		'not_found' => __( 'Not found', 'bornfeel' ),
		'not_found_in_trash' => __( 'Not found in Trash', 'bornfeel' ),
		'featured_image' => __( 'Featured Image', 'bornfeel' ),
		'set_featured_image' => __( 'Set featured image', 'bornfeel' ),
		'remove_featured_image' => __( 'Remove featured image', 'bornfeel' ),
		'use_featured_image' => __( 'Use as featured image', 'bornfeel' ),
		'insert_into_item' => __( 'Insert into protfolio', 'bornfeel' ),
		'uploaded_to_this_item' => __( 'Uploaded to this protfolio', 'bornfeel' ),
		'items_list' => __( 'profolios list', 'bornfeel' ),
		'items_list_navigation' => __( 'profolios list navigation', 'bornfeel' ),
		'filter_items_list' => __( 'Filter profolios list', 'bornfeel' ),
	);
	$args = array(
		'label' => __( 'protfolio', 'bornfeel' ),
		'description' => __( '', 'bornfeel' ),
		'labels' => $labels,
		'menu_icon' => '',
		'supports' => array('title', 'editor', 'excerpt', 'thumbnail', 'custom-fields'),
		'taxonomies' => array(),
		'public' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'menu_position' => 5,
		'show_in_admin_bar' => true,
		'show_in_nav_menus' => true,
		'can_export' => true,
		'has_archive' => true,
		'hierarchical' => false,
		'exclude_from_search' => false,
		'show_in_rest' => true,
		'publicly_queryable' => true,
		'capability_type' => 'post',
	);
	register_post_type( 'protfolio', $args );

}
add_action( 'init', 'create_protfolio_cpt', 0 );

Now we have to include the template file, So go to the functions.php file and paste the below code

require get_tempplate_directory() .'/inc/protfolio.php';

Now Create a sample post and we will fetch custom protfolio data on frontend

Paste the below code where you want to show

 <?php 
            $query= new WP_Query(array(
              'post_type'=> 'protfolio',
              'posts_per_page'=> 1
            ));

            query_posts($query);
            while($query->have_posts()) : $query-> the_post();
            endwhile;
          ?>
          <div class="s-12 m-12 l-6">
                  <div class="image-border-radius margin-m-bottom">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="<?php the_permalink() ?>"><img src="<?php the_post_thumbnail()?></a>
                      </div>
                      <div class='s-12 m-12 l-8 margin-m-bottom'>
                        <h3><a class='text-dark text-primary-hover' href='<?php the_permalink() ?>'><?php the_title() ?></a></h3>
                        <p><?php the_excerpt() ?></p>
                        <a class='text-more-info text-primary-hover' href='<?php the_permalink() ?>'>Read more</a>
                      </div>
                  </div>  
            </div>
        </div> 
        <?php wp_reset_query()?>

<?php wp_reset_query()?> this code is required for avoiding conflict the post because we will fetch post and protfolio data on the same home page. if you know when we use flot in css we need to clear div same as here.

Congratulations our custom protfolio data is showing on home page.

Thanks for reading…. Next part will be published as soon as possible.

By kumar January 9, 2022 1 year 137 words

Html to WordPress theme convert part 3

Hi in the last article we had seen how to dynamic logo and widget. Now in this article we will start slider section and other step by step So, First we …

Hi in the last article we had seen how to dynamic logo and widget. Now in this article we will start slider section and other step by step

So, First we have to install Smart Slider Plugin for sliding section.

This image has an empty alt attribute; its file name is smartslider-1024x366.jpg

Once Install and Active Go to the Plugin Dashboard

Now Start with a Template

This image has an empty alt attribute; its file name is te-1024x517.jpg

Import ready Slider as per your requirement. Once import successfully we will get Shortcode like below

This image has an empty alt attribute; its file name is shortcode-1024x427.jpg

Now copy the shortcode and replace with your static slider code like below.



## sliedr code ##

<section class="section background-dark">
        <div class="line">
          <div class="carousel-fade-transition owl-carousel carousel-main carousel-nav-white carousel-wide-arrows">
            <div class="item">
              <div class="s-12 center">
                <img src="img/01-boxed.jpg" alt="">
                <div class="carousel-content">
                  <div class="padding-2x">
                    <div class="s-12 m-12 l-8">
                      <p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1">Prospera is the New Amazing HTML5 Template</p>
                      <p class="text-white text-size-16 margin-bottom-40">1 autem vel eum iriure dolor in hendrerit in vulputate velit<br> esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>  
                    </div>                  
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="s-12 center">
                <img src="img/02-boxed.jpg" alt="">
                <div class="carousel-content">
                  <div class="padding-2x">
                    <div class="s-12 m-12 l-8">
                      <p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1">With Fully Responsive Components</p>
                      <p class="text-white text-size-16 margin-bottom-30">2 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>    
                    </div>                  
                  </div>
                </div>
              </div>
            </div>
          </div>  
        </div>
      </section>



<section class="section background-dark">
        <div class="line">
        <?php echo do_shortcode('[smartslider3 slider="3"]');?>
        </div>
 </section>

Now Your Website Slider is ready Congratulations..

Now we will start coding for dynamic post. So we have to write some post.

Go to the Posts section and Add the new post



       <?php 
                 $blog_args = array(
                   'post_type'=>'post',
                   'posts_per_page'=>4
                 );
                 $blog_posts = new WP_Query($blog_args);
                 while($blog_posts->have_posts()){
                $blog_posts->the_post();                 
         ?>

Paste the mention code in blog section from the fast div where started



 <div class="s-12 m-12 l-6">
                  <div class="image-border-radius margin-m-bottom">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="/"><img src="img/blog-05.jpg" alt=""></a>
                      </div>
                      <div class="s-12 m-12 l-8 margin-m-bottom">
                        <h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                        <a class="text-more-info text-primary-hover" href="/">Read more</a>
                      </div>
                    </div>  
                  </div>
                </div>

Replace with this code like below



<div class="margin"> 
                <?php 
                 $blog_args = array(
                   'post_type'=>'post',
                   'posts_per_page'=>4
                 );
                 $blog_posts = new WP_Query($blog_args);
                 while($blog_posts->have_posts()){
                $blog_posts->the_post();                 
                ?>
                <div class="s-12 m-12 l-6">
                  <div class="image-border-radius margin-m-bottom">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="<?php the_permalink() ?>"><img src="<?php the_post_thumbnail()?></a>
                      </div>
                      <div class="s-12 m-12 l-8 margin-m-bottom">
                        <h3><a class="text-dark text-primary-hover" href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>
                        <p><?php the_excerpt() ?></p>
                        <a class="text-more-info text-primary-hover" href="<?php the_permalink() ?>">Read more</a>
                      </div>
                    </div>  
                  </div>
                </div>
                <?php }?>
</div>



Dynamic Thumbnail  
<?php the_post_thumbnail()?>

Dynamic Title
<?php the_title() ?>

Dynamic Post link
<?php the_permalink() ?>

Now you can see your blog post is completely dynamic.

This image has an empty alt attribute; its file name is blog-1024x485.jpg

Thanks for reading ….. Next Part will be published

By kumar January 7, 2022 1 year 583 words

How to convert HTM to WordPress theme step by step Part2

Hi in the previous article I was describe WordPress file structure and how to link your css and js file. Now we are going to start with functions.php file For Dynamic …

Hi in the previous article I was describe WordPress file structure and how to link your css and js file. Now we are going to start with functions.php file

functions.php

function bornfeel_theme_setup(){
    add_theme_support('custom-logo');
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_image_size( 'home-featured', 680, 400, array('center','center'));
    add_image_size( 'single-img', 600, 550, array('center','center'));
    add_theme_support('automatic-feed-links');

    register_nav_menus( array(
        'primary' => __('Primary Menu', 'bornfeel'),
        'menu-left' => __( 'Left Menu', 'bornfeel' ),
        'menu-right' => __( 'Right Menu', 'bornfeel' ),
        'menu-mobile' => __( 'Mobile Menu', 'bornfeel' ),
    ) );

};

add_action('after_setup_theme', 'bornfeel_theme_setup' );

For Dynamic menu we have to write this code in to the functions.php

bornfeel_theme_setup is a function name with theme name.it is best practice that you should always use your theme name for avoiding conflict to other function.

register_nav_menus is a WordPress default function to register the Navbar. For more information you can go through the WordPress Official Website.

add_theme_support for using Custom logo similarly add_image_size and his class home-featured and size

Now we need to create a function for style enqueue like below

functions.php

function bornfeel_scripts(){
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts','bornfeel_scripts');

Now we have to write code for menu

  <?php
           wp_nav_menu( array(
            'theme_location'    => 'primary',
          ));
    ?>

navbar

      <ul class="right chevron">
              <li><a href="index.html">Home</a></li>
              <li><a href="products.html">Products</a></li>
               <li><a>Services</a>
                <ul>
                  <li><a>Service 1</a>
                    <ul>
                      <li><a>Service 1 A</a></li>
                      <li><a>Service 1 B</a></li>
                    </ul>
                  </li>
                  <li><a>Service 2</a></li>
                </ul>
              </li>
              <li><a href="about.html">About</a></li>
              <li><a href="gallery.html">Gallery</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>

Replace ul to div WordPress Automatically assign as a ul . Your Code looks like below

<div class="right chevron">
            <?php
            wp_nav_menu( array(
              'theme_location'    => 'primary',
             ));
            ?>
 </div>

Now we will Code for custom logo like below. Replace your static path with this code

<?php the_custom_logo() ?>

<a href="index.html" class="logo"><img src="img/logo-free.png" alt=""></a>

<a href="index.html" class="logo"><?php the_custom_logo() ?></a>

Now we will create dynamic footer, you can see under the Appearance we have no widget, So we fast create a widget

Paste the below code in functions.php

functions.php

function bornfeel_footerwidgets1_init() {
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 1', 'bornfeel' ),
		'id'            => 'sidebar-3',
		'description'   => __( 'Add widgets here to appear in your Footer 1.', 'bornfeel' ),
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'bornfeel_footerwidgets1_init' );

function bornfeel_footerwidgets2_init() {
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 2', 'bornfeel' ),
		'id'            => 'sidebar-4',
		'description'   => __( 'Add widgets here to appear in your Footer 2.', 'bornfeel' ),
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'bornfeel_footerwidgets2_init' );

function bornfeel_footerwidgets3_init() {
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 3', 'bornfeel' ),
		'id'            => 'sidebar-5',
		'description'   => __( 'Add widgets here to appear in your Footer 3.', 'bornfeel' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>',
	) );
}
add_action( 'widgets_init', 'bornfeel_footerwidgets3_init' );

function bornfeel_footerwidgets4_init() {
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 4', 'bornfeel' ),
		'id'            => 'sidebar-6',
		'description'   => __( 'Add widgets here to appear in your Footer 4.', 'bornfeel' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>',
	) );
}
add_action( 'widgets_init', 'bornfeel_footerwidgets4_init' );

Once Successfully done this code you can see the widget under the Appearance folder

Now we will install Classic Widgets Plugin

Once Install and Active the plugin your widget will look like below

Select Custom HTML with Footer Widget and paste your code

Footer.php

  <!-- FOOTER -->
  <footer>
      <!-- Social -->
      <div class="background-primary padding text-center">
      <?php dynamic_sidebar( 'sidebar-3' ) ?>                                                                        
      </div>
      
      <!-- Main Footer -->
      <section class="section background-dark">
        <div class="line">
          <div class="margin">
            <!-- Collumn 1 -->
            <div class="s-12 m-12 l-4 margin-m-bottom-2x">
              <h4 class="text-uppercase text-strong">Our Philosophy</h4>
              <p class="text-size-20"><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt."</em><p>
              <?php dynamic_sidebar('sidebar-5') ?>       
              <!-- <div class="line">
                <h4 class="text-uppercase text-strong margin-top-30">About Our Company</h4>
                <div class="margin">
                  <div class="s-12 m-12 l-4 margin-m-bottom">
                    <a class="image-hover-zoom" href="/"><img src="img/blog-04.jpg" alt=""></a>
                  </div>
                  <div class="s-12 m-12 l-8 margin-m-bottom">
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                    <a class="text-more-info text-primary-hover" href="/">Read more</a>
                  </div>
                </div>
              </div> -->
            </div>
            
            <!-- Collumn 2 -->
            <div class="s-12 m-12 l-4 margin-m-bottom-2x">
            <?php dynamic_sidebar('sidebar-4') ?>  
            </div>
            
            <!-- Collumn 3 -->
            <div class="s-12 m-12 l-4">
              <h4 class="text-uppercase text-strong">Leave a Message</h4>
              <form class="customform text-white">
                <div class="line">
                  <div class="margin">
                    <div class="s-12 m-12 l-6">
                      <input name="email" class="required email border-radius" placeholder="Your e-mail" title="Your e-mail" type="text" />
                    </div>
                    <div class="s-12 m-12 l-6">
                      <input name="name" class="name border-radius" placeholder="Your name" title="Your name" type="text" />
                    </div>
                  </div>
                </div>
                <div class="s-12">
                  <textarea name="message" class="required message border-radius" placeholder="Your message" rows="3"></textarea>
                </div>
                <div class="s-12"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit Button</button></div> 
              </form>
            </div>
          </div>
        </div>
      </section>
      <hr class="break margin-top-bottom-0" style="border-color: rgba(0, 38, 51, 0.80);">
      
      <!-- Bottom Footer -->
      <section class="padding background-dark">
        <div class="line">
        <?php dynamic_sidebar('sidebar-6') ?> 
          <!-- <div class="s-12 l-6">
            <p class="text-size-12">Copyright 2019, Vision Design - graphic zoo</p>
            <p class="text-size-12">All images have been purchased from Bigstock. Do not use the images in your website.</p>
          </div>
          <div class="s-12 l-6">
            <a class="right text-size-12" href="http://www.myresponsee.com" title="Responsee - lightweight responsive framework">Design and coding<br> by Responsee Team</a>
          </div> -->
        </div>
      </section>
    </footer> 
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/responsee.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/owl-carousel/owl.carousel.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/template-scripts.js"></script> 
    <?php wp_footer(); ?>  
   </body>
</html>

<?php dynamic_sidebar(‘sidebar-5’) ?> Replace with your original content.

Now Your website looks like below

Our footer section is ready and its fully dynamic except Form. In the next article we will se how to dynamic our form.

Thanks for reading….. Next part will be published ASAP

By kumar January 6, 2022 1 year 899 words

How to Convert HTML to WordPress theme step by step

PART 1 First We have to install WordPress. I think You know how to install WordPress . Here I am working on Live Server and we will use Filezila Client For …

PART 1

First We have to install WordPress. I think You know how to install WordPress . Here I am working on Live Server and we will use Filezila Client

For Hosting I am using webcore.in Hosting services

You can also work on localhost but here I am working on Live Server. If you want to by hosting you can by from webcore.in they are providing Lightspeed Webserver and price is reasonable

Once installed WordPress its look like below

Now open FileZilla and connect your server like below

Go to the /public_html/project/wp-content/themes folder and create a new folder bornfeel.

Note: bornfeel is our theme folder name you can give any name what ever you want.

For HTML to WordPress theme we have to create some files under the newly created theme folder

style.css
header.php
footer.php
functions.php
index.php
front-page.php
single.php
sidebar.php
search.php
archive.php
page.php

Firs we have to understand what is style.css in WordPress and why it is required?

WordPress reads the comments that you place in the style.css file. This is where you specify specific information about the theme you are building. It control the visual design and layout of your website pages.

For more information you can go through the WordPress official link

Main Stylesheet (style.css)

style.css

/*
Theme Name: bornfeel 
Theme URI: https://techblog369.in
Author: techblog369
Author URI: https://techblog369.in
Description: This is a Full Customized theme 
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bornfeel
*/

Once complete the style.css file you can see the theme template under the Appearance->themes like below

Now you can see we have no image template so before active the theme we will create theme image

Note: File name should be screenshot.png and file size should be 1200X900

Once created the screenshot.png file we have to upload the same under the theme folder which is bornfeel theme folder.

Now Active the theme and your website will be blank. First we have to copy our css file and paste into wordpress css file like below

header.php

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prospera Free - New Amazing HTML5 Template</title>
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/responsee.css">
    <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="owl-carousel/owl.theme.css">
    <!-- CUSTOM STYLE -->
    <link rel="stylesheet" href="css/template-style.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>    
    <script type="text/javascript" src="js/validation.js"></script> 

 <?php wp_head(); ?> 

  </head>  
  
  <body class="size-1140">
  	<!-- PREMIUM FEATURES BUTTON -->
  	<a target="_blank" class="hide-s" href="../template/prospera-premium-responsive-business-template/" style="position:fixed;top:120px;right:-14px;z-index:10;"><img src="img/premium-features.png" alt=""></a>
    <!-- HEADER -->
    <header role="banner">    
      <!-- Top Bar -->
      <div class="top-bar background-white">
        <div class="line">
          <div class="s-12 m-6 l-6">
            <div class="top-bar-contact">
              <p class="text-size-12">Contact Us: 0800 200 200 | <a class="text-orange-hover" href="mailto:contact@sampledomain.com">contact@sampledomain.com</a></p>
            </div>
          </div>
          <div class="s-12 m-6 l-6">
            <div class="right">
              <ul class="top-bar-social right">
                <li><a href="/"><i class="icon-facebook_circle text-orange-hover"></i></a></li>
                <li><a href="/"><i class="icon-twitter_circle text-orange-hover"></i></a> </li>
                <li><a href="/"><i class="icon-google_plus_circle text-orange-hover"></i></a></li>
                <li><a href="/"><i class="icon-instagram_circle text-orange-hover"></i></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Top Navigation -->
      <nav class="background-white background-primary-hightlight">
        <div class="line">
          <div class="s-12 l-2">
            <a href="index.html" class="logo"><img src="img/logo-free.png" alt=""></a>
          </div>
          <div class="top-nav s-12 l-10">
            <p class="nav-text"></p>
            <ul class="right chevron">
              <li><a href="index.html">Home</a></li>
              <li><a href="products.html">Products</a></li>
              <li><a>Services</a>
                <ul>
                  <li><a>Service 1</a>
                    <ul>
                      <li><a>Service 1 A</a></li>
                      <li><a>Service 1 B</a></li>
                    </ul>
                  </li>
                  <li><a>Service 2</a></li>
                </ul>
              </li>
              <li><a href="about.html">About</a></li>
              <li><a href="gallery.html">Gallery</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

<?php wp_head(); ?> will help to print style sheet and other for the website similarly we have to call WordPress default function <?php wp_footer(); ?> footer section.

footer.php

  <!-- FOOTER -->
    <footer>
      <!-- Social -->
      <div class="background-primary padding text-center">
        <a href="/"><i class="icon-facebook_circle icon2x text-white"></i></a> 
        <a href="/"><i class="icon-twitter_circle icon2x text-white"></i></a>
        <a href="/"><i class="icon-google_plus_circle icon2x text-white"></i></a>
        <a href="/"><i class="icon-instagram_circle icon2x text-white"></i></a>                                                                        
      </div>
      
      <!-- Main Footer -->
      <section class="section background-dark">
        <div class="line">
          <div class="margin">
            <!-- Collumn 1 -->
            <div class="s-12 m-12 l-4 margin-m-bottom-2x">
              <h4 class="text-uppercase text-strong">Our Philosophy</h4>
              <p class="text-size-20"><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt."</em><p>
                            
              <div class="line">
                <h4 class="text-uppercase text-strong margin-top-30">About Our Company</h4>
                <div class="margin">
                  <div class="s-12 m-12 l-4 margin-m-bottom">
                    <a class="image-hover-zoom" href="/"><img src="img/blog-04.jpg" alt=""></a>
                  </div>
                  <div class="s-12 m-12 l-8 margin-m-bottom">
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                    <a class="text-more-info text-primary-hover" href="/">Read more</a>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- Collumn 2 -->
            <div class="s-12 m-12 l-4 margin-m-bottom-2x">
              <h4 class="text-uppercase text-strong">Contact Us</h4>
              <div class="line">
                <div class="s-1 m-1 l-1 text-center">
                  <i class="icon-placepin text-primary text-size-12"></i>
                </div>
                <div class="s-11 m-11 l-11 margin-bottom-10">
                  <p><b>Adress:</b> Responsive Street 7, London, UK</p>
                </div>
              </div>
              <div class="line">
                <div class="s-1 m-1 l-1 text-center">
                  <i class="icon-mail text-primary text-size-12"></i>
                </div>
                <div class="s-11 m-11 l-11 margin-bottom-10">
                  <p><a href="/" class="text-primary-hover"><b>E-mail:</b> contact@sampledomain.com</a></p>
                </div>
              </div>
              <div class="line">
                <div class="s-1 m-1 l-1 text-center">
                  <i class="icon-smartphone text-primary text-size-12"></i>
                </div>
                <div class="s-11 m-11 l-11 margin-bottom-10">
                  <p><b>Phone:</b> 0700 000 987</p>
                </div>
              </div>
              <div class="line">
                <div class="s-1 m-1 l-1 text-center">
                  <i class="icon-twitter text-primary text-size-12"></i>
                </div>
                <div class="s-11 m-11 l-11 margin-bottom-10">
                  <p><a href="/" class="text-primary-hover"><b>Twitter</b></a></p>
                </div>
              </div>
              <div class="line">
                <div class="s-1 m-1 l-1 text-center">
                  <i class="icon-facebook text-primary text-size-12"></i>
                </div>
                <div class="s-11 m-11 l-11">
                  <p><a href="/" class="text-primary-hover"><b>Facebook</b></a></p>
                </div>
              </div>
            </div>
            
            <!-- Collumn 3 -->
            <div class="s-12 m-12 l-4">
              <h4 class="text-uppercase text-strong">Leave a Message</h4>
              <form class="customform text-white">
                <div class="line">
                  <div class="margin">
                    <div class="s-12 m-12 l-6">
                      <input name="email" class="required email border-radius" placeholder="Your e-mail" title="Your e-mail" type="text" />
                    </div>
                    <div class="s-12 m-12 l-6">
                      <input name="name" class="name border-radius" placeholder="Your name" title="Your name" type="text" />
                    </div>
                  </div>
                </div>
                <div class="s-12">
                  <textarea name="message" class="required message border-radius" placeholder="Your message" rows="3"></textarea>
                </div>
                <div class="s-12"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit Button</button></div> 
              </form>
            </div>
          </div>
        </div>
      </section>
      <hr class="break margin-top-bottom-0" style="border-color: rgba(0, 38, 51, 0.80);">
      
      <!-- Bottom Footer -->
      <section class="padding background-dark">
        <div class="line">
          <div class="s-12 l-6">
            <p class="text-size-12">Copyright 2019, Vision Design - graphic zoo</p>
            <p class="text-size-12">All images have been purchased from Bigstock. Do not use the images in your website.</p>
          </div>
          <div class="s-12 l-6">
            <a class="right text-size-12" href="http://www.myresponsee.com" title="Responsee - lightweight responsive framework">Design and coding<br> by Responsee Team</a>
          </div>
        </div>
      </section>
    </footer> 
    <script type="text/javascript" src="js/responsee.js"></script>
    <script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
    <script type="text/javascript" src="js/template-scripts.js"></script>   
   </body>

<?php wp_footer(); ?>
</html>

//Landing Page Code
front-page.php


<?php
/*
Template Name: Home
*/
get_header();
?>
    
    <!-- MAIN -->
    <main role="main">
      <!-- Main Carousel -->
      <section class="section background-dark">
        <div class="line">
          <div class="carousel-fade-transition owl-carousel carousel-main carousel-nav-white carousel-wide-arrows">
            <div class="item">
              <div class="s-12 center">
                <img src="img/01-boxed.jpg" alt="">
                <div class="carousel-content">
                  <div class="padding-2x">
                    <div class="s-12 m-12 l-8">
                      <p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1">Prospera is the New Amazing HTML5 Template</p>
                      <p class="text-white text-size-16 margin-bottom-40">Duis autem vel eum iriure dolor in hendrerit in vulputate velit<br> esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>  
                    </div>                  
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="s-12 center">
                <img src="img/02-boxed.jpg" alt="">
                <div class="carousel-content">
                  <div class="padding-2x">
                    <div class="s-12 m-12 l-8">
                      <p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1">With Fully Responsive Components</p>
                      <p class="text-white text-size-16 margin-bottom-30">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>    
                    </div>                  
                  </div>
                </div>
              </div>
            </div>
          </div>  
        </div>
      </section>
      
      <!-- Section 1 -->
      <section class="section background-white"> 
        <div class="line">
          <div class="margin">
            <div class="s-12 m-12 l-4 margin-m-bottom">
              <img class="margin-bottom" src="img/img-01.jpg" alt="">
              <h2 class="text-thin">Clean Design</h2>
              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> 
              <a class="text-more-info text-primary-hover" href="/">Read more</a>                
            </div>
            <div class="s-12 m-12 l-4 margin-m-bottom">
              <img class="margin-bottom" src="img/img-02.jpg" alt="">
              <h2 class="text-thin">Valid code</h2>
              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> 
              <a class="text-more-info text-primary-hover" href="/">Read more</a>                
            </div>
            <div class="s-12 m-12 l-4 margin-m-bottom">
              <img class="margin-bottom" src="img/img-03.jpg" alt="">
              <h2 class="text-thin">Totally free</h2>
              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> 
              <a class="text-more-info text-primary-hover" href="/">Read more</a>                
            </div>
          </div>
        </div>
      </section>
      
      <!-- Section 2 -->
      <section class="section background-primary text-center">
        <div class="line">
          <div class="s-12 m-10 l-8 center">
            <h2 class="headline text-thin text-s-size-30">We are Web Design Heroes</h2>
            <p class="text-size-20">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>
          </div>
        </div>  
      </section>
      
      <!-- Section 3 -->
      <section class="section background-white">
        <div class="full-width text-center">
          <img class="center margin-bottom-30" style="margin-top: -210px;" src="img/bio.png" alt="">
          <div class="line">
            <h2 class="headline text-thin text-s-size-30">Fully <span class="text-primary">Responsive</span> HTML5 Template</h2>
            <p class="text-size-20 text-s-size-16 text-thin">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>
            <i class="icon-more_node_links icon2x text-primary margin-top-bottom-10"></i>
            <p class="text-size-20 text-s-size-16 text-thin text-primary">Try resize your browser window</p>
          </div>  
        </div>  
      </section>
      <hr class="break margin-top-bottom-0">
      
      <!-- Section 4 --> 
      <section class="section background-white">
        <div class="line">
          <h2 class="text-thin headline text-center text-s-size-30 margin-bottom-50">From Our <span class="text-primary">Blog</span></h2>
          <div class="carousel-default owl-carousel carousel-wide-arrows">
            <div class="item">
              <div class="margin"> 
                <div class="s-12 m-12 l-6">
                  <div class="image-border-radius margin-m-bottom">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="/"><img src="img/blog-05.jpg" alt=""></a>
                      </div>
                      <div class="s-12 m-12 l-8 margin-m-bottom">
                        <h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                        <a class="text-more-info text-primary-hover" href="/">Read more</a>
                      </div>
                    </div>  
                  </div>
                </div>
                <div class="s-12 m-12 l-6">
                  <div class="image-border-radius">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="/"><img src="img/blog-03.jpg" alt=""></a>
                      </div>
                      <div class="s-12 m-12 l-8">
                        <h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                        <a class="text-more-info text-primary-hover" href="/">Read more</a>
                      </div>
                    </div>  
                  </div>
                </div> 
              </div>
            </div>
            <div class="item"> 
              <div class="margin"> 
                <div class="s-12 m-12 l-6">
                  <div class="image-border-radius margin-m-bottom">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="/"><img src="img/blog-04.jpg" alt=""></a>
                      </div>
                      <div class="s-12 m-12 l-8 margin-m-bottom">
                        <h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                        <a class="text-more-info text-primary-hover" href="/">Read more</a>
                      </div>
                    </div>  
                  </div>
                </div>
                <div class="s-12 m-12 l-6">
                  <div class="image-border-radius">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="/"><img src="img/blog-02.jpg" alt=""></a>
                      </div>
                      <div class="s-12 m-12 l-8">
                        <h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                        <a class="text-more-info text-primary-hover" href="/">Read more</a>
                      </div>
                    </div>  
                  </div>
                </div> 
              </div>
            </div>
            <div class="item">
              <div class="margin"> 
                <div class="s-12 m-12 l-6">
                  <div class="image-border-radius margin-m-bottom">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="/"><img src="img/blog-01.jpg" alt=""></a>
                      </div>
                      <div class="s-12 m-12 l-8 margin-m-bottom">
                        <h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                        <a class="text-more-info text-primary-hover" href="/">Read more</a>
                      </div>
                    </div>  
                  </div>
                </div>
                <div class="s-12 m-12 l-6">
                  <div class="image-border-radius">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="/"><img src="img/blog-06.jpg" alt=""></a>
                      </div>
                      <div class="s-12 m-12 l-8">
                        <h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                        <a class="text-more-info text-primary-hover" href="/">Read more</a>
                      </div>
                    </div>  
                  </div>
                </div> 
              </div>
            </div>
          </div>
        </div>    
      </section>
      
    </main>
    
   <? get_footer(); ?>

We need to add get_header and get_footer code for getting the header and footer part for more information you can go through the WordPress official website.

Now one by one upload css js and other external file into the theme folder and link it like below

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prospera Free - New Amazing HTML5 Template</title>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/components.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/icons.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/responsee.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/owl-carousel/owl.theme.css">
    <!-- CUSTOM STYLE -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/template-style.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/jquery-ui.min.js"></script>    
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/validation.js"></script> 
    <?php wp_head(); ?>   
  </head>

<?php echo get_template_directory_uri() ?> this WordPress Default code will help to link your path dynamically

Now you can see our websites looks is changed like below

Thanks for reading… Next Part will be published ASAP

By kumar January 5, 2022 1 year 118 words

Implement Password Reset option using PHP MySQL AJAX and JQuery

In this articles i am going to show how to create Change password option in using PHP AJAX and JQuery. Hope you have already configured login register and logout option. My …

In this articles i am going to show how to create Change password option in using PHP AJAX and JQuery.

Hope you have already configured login register and logout option.

My User table like below

tbl_admin
id,name,email,password,created

change_password.php

<link rel="stylesheet" type="text/css" href="css/login.css"/>
<div class="container mt-4">
    <form name="frmChange" method="post" action=""
        onSubmit="return validatePassword()">
        <div style="width: 500px;">
            <div class="message"></div>
            <table border="0" cellpadding="10" cellspacing="0"
                width="500" align="center" class="tblSaveForm">
                <tr class="tableheader">
                    <td colspan="2">Change Password</td>
                </tr>
                <tr>
                    <td width="40%"><label>Current Password</label></td>
                    <td width="60%"><input type="password"
                        name="currentPassword" class="txtField" id="opwd"/><span
                        id="currentPassword" class="required"></span></td>
                </tr>
                <tr>
                    <td><label>New Password</label></td>
                    <td><input type="password" name="newPassword"
                        class="txtField" id="pwd"/><span id="newPassword"
                        class="required"></span></td>
                </tr>
                <td><label>Confirm Password</label></td>
                <td><input type="password" name="confirmPassword"
                    class="txtField" id="cpwd"/><span id="confirmPassword"
                    class="required"></span></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" name="submit"
                    value="Submit" class="btnSubmit"></td>
                </tr>
            </table>
        </div>
    </form>
    </div>

script.js.php

<script>
$('.btnSubmit').click(function(e){
    e.preventDefault();
    var currentPassword = $('#opwd').val();
    var newPassword = $('#pwd').val();
    var confirmPassword = $('#cpwd').val();
    
    $.ajax({
        url:"ajax/changePassword.php",
        datatype:'json',
        method:'post',
        data:{
            'currentPassword':currentPassword,
            'newPassword':newPassword,
            'confirmPassword':confirmPassword,
            'userId':<?=$_SESSION['userid'];?>
        },
        success:function(data){
            // console.log(data);
            if(data == '1'){
                swal('Successful!','Password Successfully Updated. Reloading...','success');
                setTimeout(function(){
                    location.reload();
                },1500);
            }else if(data == '2'){
                swal('Caution!','New Password Not Match','alert');
            }else if(data == '3'){
                swal('Error!','Something Went Wrong. Please Try Again Later.','error');
            }else if(data == '0'){
                swal('Caution!','Current Password Not Match','alert');
            }
        }
    });
});


</script>

Include script.js.php file in footer section and JQuery CDN

Note## .js.php extension will help to wirte js and php code in the same file

footer.php

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<?php include('script.js.php');?>

ajax/changePassword.php

<?php
//Accessories_fetch.php
include('../Connection/Functions.php');
if(isset($_POST['currentPassword'])){
    change_password($_POST['currentPassword'],$_POST['newPassword'],$_POST['confirmPassword'],$_POST['userId']);
}


?>

Note:## You can see under the ajax folder changePassword.php file we have included Functions.php file. we will write PHP code on the same file like below

Functions.php

<?php
session_start();
include('DBClass.php');

/*Change Password function */
function change_password($currentPassword,$newPassword,$confirmPassword,$userId){
    $db = new DBClass();
    $result = $db->query('SELECT * FROM `tbl_new_admin` WHERE `id`='.$userId);
    $data = mysqli_fetch_array($result);
    $salt = $data['salt'];
    if(sha1($salt.$currentPassword) == $data['password']){
        if($newPassword == $confirmPassword){
            $tmpPassword = $salt.$newPassword;
            $updatePassword = sha1($tmpPassword);
            $query = $db->query('UPDATE `tbl_new_admin` SET `password`= "'.$updatePassword.'" WHERE `id`='.$userId);
            if($query)
                echo '1';//Successfully Updated
            else
                echo '3';//Something Went Wrong
        }else{
            echo '2';//New Password Not Match
        }
    }else{
        echo '0';//Current Password Not Match
    }
}

Note:## You can see under the functions.php file we have started session_start(); and include DBClass.php

session_start(); will help us to store data in session and no need to include separately one by one page because we have included in functions.php file and DBClass.php file is our Database connectivity settings we will us it as an object

Folder Structure

admin/Connection

DBClass.php
DBSettings.php
Functions.php

admin/ajax

All ajax file placed here.

DBClass.php

<?php
require_once( 'DBSettings.php' );
class DBClass extends DatabaseSettings{
    var $classQuery;
	var $link;
	var $errno = '';
	var $error = '';
	function __construct(){
		$settings = DatabaseSettings::getSettings();
		$host = $settings['dbhost'];
		$name = $settings['dbname'];
		$user = $settings['dbusername'];
		$pass = $settings['dbpassword'];
		$this->link = new mysqli( $host , $user , $pass , $name );
	}
	function query( $query ) {
		$this->classQuery = $query;
		return $this->link->query( $query );
	}
	function lastInsertedID(){
		if($this->link->insert_id)
		    return $this->link->insert_id;
		else
		    $this->link->errno;
	}
}
?>

DBSettings.php

<?php
class DatabaseSettings{	
	var $settings;
	function getSettings()
	{
		// Database variables
		// Host name
		$settings['dbhost'] = 'localhost';
		// Database name
		$settings['dbname'] = 'yourdbname';
		// Username
		$settings['dbusername'] = 'dbusername';
		// Password
		$settings['dbpassword'] = 'dbpassword';
		return $settings;
	}
}
?>

Custom CSS for password reset page

body {
    font-family:Arial;
    }
    input {
    font-family:Arial;
    font-size:14px;
    }
    label{
    font-family:Arial;
    font-size:14px;
    color:#999999;
    }
    .tblSaveForm {
    border-top:2px #999999 solid;
    background-color: #f8f8f8;
    }
    .tableheader {
    background-color: #fedc4d;
    }
    .btnSubmit {
    background-color:#fd9512;
    padding:5px;
    border-color:#FF6600;
    border-radius:4px;
    color:white;
    }
    .message {
    color: #FF0000;
    text-align: center;
    width: 100%;
    }
    .txtField {
    padding: 5px;
    border:#fedc4d 1px solid;
    border-radius:4px;
    }
    .required {
    color: #FF0000;
    font-size:11px;
    font-weight:italic;
    padding-left:10px;
    }

Thanks for reading……

By kumar December 30, 2021 1 year 85 words

How to install Composer in windows 7

In this articles I am going to show how to install composer in windows 7 First we have to download composer link is given below https://getcomposer.org/ Click on Run Click on …