Technical Blogs & News
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 …
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. …
Disable PHP Errors PHP warnings and notices help builders debug troubles with their code. but it seems extremely unprofessional while they may be seen to all of your website visitors. In this article, we are able to show you how to without difficulty flip off PHP mistakes in WordPress. Why Should Turn off PHP Errors in …
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 -IndexesAfter 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….
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
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 sidebarOur 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.
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.
Once Install and Active Go to the Plugin Dashboard
Now Start with a Template
Import ready Slider as per your requirement. Once import successfully we will get Shortcode like below
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.
Thanks for reading ….. Next Part will be published
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
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
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
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
While WordPress itself is a secure platform, this doesn’t make your site immune to break-ins. One of the most common attacks is human or bot hackers trying to force their way …
While WordPress itself is a secure platform, this doesn’t make your site immune to break-ins. One of the most common attacks is human or bot hackers trying to force their way through your login page by trying various username and password combinations until something works. To keep them from succeeding, you can use a WordPress limit login attempts plugin.
By default, people can continuously try to log into your site, with no restrictions on attempts. However, most legitimate users won’t need more than a few tries (at most). Therefore, you can limit the number of login attempts made from a specific IP address in a set amount of time. Any user who goes over the limit can be temporarily or permanently locked out.
In this post, we’re going to show you how to set the feature up using a free WordPress limit login attempts plugin. Then, we’ll share some of the pros and cons of this approach. Let’s get to work!
For most users, a WordPress limit login attempts plugin is the best option to restrict login attempts. There are several quality options, but we recommend the free Limit Login Attempts Reloaded plugin because it’s:
While the plugin is easy to use at a basic level (it starts working as soon as you activate it), it also boasts a variety of configuration options, including some handy extras (such as the ability to whitelist or blacklist both IPs and usernames).
To get started, install and activate the Limit Login Attempts Reloaded plugin at your WordPress site. If you’re not sure how to install a WordPress plugin.
As soon as you activate the plugin, it starts working right away. By default, users get four guesses before the plugin locks them out:
However, the plugin also provides a settings area where you can modify how this functionality works.
To access this area, go to Settings > Limit Login Attempts:
In the Statistics section, you can find details about how many ‘lockouts’ have occurred due to the plugin. This will be empty right now, but you can check back later to see how many potential brute force attempts the plugin has halted.
Then, under Options, you can customize how the lockout system works. This includes deciding how many guesses the plugin will allow, the length of time users will be locked out for, and more. You can even enable a GDPR-compliance setting, which will obfuscate all recorded IPs for privacy reasons.
Scrolling down a bit, you’ll also find sections labeled Whitelist and Blacklist:
Here, you can enter specific IPs and/or usernames. If you add a user to the whitelist, they’ll be able to log into your site as many times as they’d like, and won’t have to worry about getting locked out.
Adding someone to the blacklist, on the other hand, will permanently lock them out. The latter option is handy if you see a lot of suspicious activity coming from one or more specific IP addresses.
Don’t forget to save your changes to this page when you’re done configuring the settings. That’s all you need to do to limit login attempts in WordPress!
Thanks for reading……
What is XML-RPC? XML-RPC is an API that warps the information or data into an XML file and sends it to the mobile app or remote software. This was introduced as …
What is XML-RPC?
XML-RPC is an API that warps the information or data into an XML file and sends it to the mobile app or remote software. This was introduced as in the olden days, internet speed is not fast, instead of writing it online. Users write their content offline and publish it all together using the API. As the internet services improved, most of us does not use the feature anymore, often it was forgotten by us.
XML-RPC is a remote procedure call protocol that allows anyone to interact with your WordPress website remotely. In other words, it’s a way to manage your site without having to log in manually via the standard “wp-login.php” page. It’s widely used by plugins, most famously by Automattic’s own Jetpack plugin. These days, however, the word “XML-RPC” has gotten a bad name. In this tutorial, we will explain what is WordPress XML-RPC and how to stop an XML-RPC attack on your WordPress website.
A quick way to check if your site is vulnerable is to visit the following URL from a browser:
yoursite.com/xmlrpc.phpIf it’s enabled, you should get a response that says “XML-RPC server accepts POST requests only.” Like this:
There’s been a lot of back and forth in the WordPress security community about XML-RPC. There are mostly two concerns:
At least, these were possible. WordPress has since plugged loopholes that allowed people to try hundreds of usernames and passwords at once. Since version 4.4, it’s been quite improved. Now WordPress will silently fail all subsequent login attempts as soon as a single XML-RPC call has failed. Great!
However, there are those who are still concerned about the ease by while remote procedure calls like this can be made. So here are a few ways to secure your site against XML-RPC – starting from the lightest touch to the heaviest.
This is a process that uses your server as an unwitting participant in an attack against another server. Basically, someone tells your site “Hey, this URL linked to your blog!” And then your site responds with a “pingback” to that URL. Except that there’s no verification that the URL actually did link back to you. Do this with hundreds of vulnerable WordPress sites, and you have a DDoS attack on your hands! The easiest way to prevent your site from being used in this manner is to add the following code to your theme’s functions.php:
function stop_pings ($vectors) {
unset( $vectors['pingback.ping'] );
return $vectors;
}
add_filter( 'xmlrpc_methods', 'stop_pings');This second method determines whether you want to allow XML-RPC methods that authenticate users. Take for example, publishing a blog via e-mail. The site will receive your e-mail, authenticate you via XML-RPC, and then publish it if the credentials match.
A lot of people are uncomfortable with the ability of XML-RPC to just take in random calls like this. It’s what led to hundreds or thousands of authentication attempts in the first place. Even though WordPress has since addressed this particular form of hacking, there are those who recommend simply turning it off.
To do that, enter this code in functions.php:
add_filter('xmlrpc_enabled','__return_false');It’s important to note that this is not the same as the first method. This code only disables authentication methods and leaves all others untouched – like pingbacks for example.
This is the most extreme method that completely disables all XML-RPC functionality. It requires you to edit the .htaccess file at the root of your WordPress directory. Add the following code to the top:
<files xmlrpc.php>
Order allow,deny
Deny from all
</files>Note: If you find your WordPress installation doesn’t have a .htaccess file at its root folder, simply create one with the following default code.
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
Now with the above denial rules in effect, trying to access xmlrpc.php will be met with the following page:
Hi, In this article I am going to share how to install and configure Newsletter in WordPress Free. Let’s Start First You have to install Newsletter Plagin Version 7.3.3 | By Stefano …
Hi, In this article I am going to share how to install and configure Newsletter in WordPress Free.
Let’s Start
First You have to install Newsletter Plagin
Version 7.3.3 | By Stefano Lissa & The Newsletter Team | View details
Once Install the plugin you need to Activate it. Now you can see automatically newsletter page will create under the pages
Now we will customize our newsletter form so we need to go to our widgets section and create customHTML form drag into the footer widget
Our Custom HTML code. Simply copy and paste the below code
<div class="newsletter-box">
<script type="text/javascript">
if (typeof newsletter_check !== "function") {
window.newsletter_check = function (f) {
var re = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-]{1,})+\.)+([a-zA-Z0-9]{2,})+$/;
if (!re.test(f.elements["ne"].value)) {
alert("The email is not correct");
return false;
}
for (var i=1; i<20; i++) {
if (f.elements["np" + i] && f.elements["np" + i].required && f.elements["np" + i].value == "") {
alert("");
return false;
}
}
if (f.elements["ny"] && !f.elements["ny"].checked) {
alert("You must accept the privacy statement");
return false;
}
return true;
}
}
</script>
<form method="post" class="news-form" action="/?na=s" onsubmit="return newsletter_check(this)">
<input type="hidden" name="nr" value="page">
<input type="email" name="ne" placeholder="Enter Email" required="" class="emailbox">
<button type="submit" class="sbtn">Subscribe</button>
</form>
</div> Note: Do not change name property like name=”ne” action=” /?na=s” and script also.
Now copy and paste CSS in Additional CSS options
/*Start newsletter */
.sbtn{
height: 38px;
background-color: #37b3b3;
color: #fff;
border-radius: 1px 16px 16px 0px;
}
.emailbox{
width:auto;
height: 40px;
margin: 18px 0 0 0;
padding-left: 8px;
background: transparent;
border: 1px solid #fff;
border-radius: 50px;
}
/* End newsletter */
Once fill the email and press the subscribe button you will redirect to this page and you will get this massage.
Newsletter Dashboard
Note: if you are using ACF then your code should like below
Footer.php
<div class="col-xl-3 col-sm-6">
<div class="widget4">
<? while (has_sub_field('footer_widget_3','option')){?>
<h3><?the_sub_field('heading'); ?></h3>
<div class="red-line"></div>
<div class="newsletter">
<script type="text/javascript">
//<![CDATA[
if (typeof newsletter_check !== "function") {
window.newsletter_check = function (f) {
var re = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-]{1,})+\.)+([a-zA-Z0-9]{2,})+$/;
if (!re.test(f.elements["ne"].value)) {
alert("The email is not correct");
return false;
}
for (var i=1; i<20; i++) {
if (f.elements["np" + i] && f.elements["np" + i].required && f.elements["np" + i].value == "") {
alert("");
return false;
}
}
if (f.elements["ny"] && !f.elements["ny"].checked) {
alert("You must accept the privacy statement");
return false;
}
return true;
}
}
//]]>
</script>
<form method="post" action="/?na=s" onsubmit="return newsletter_check(this)">
<input type="hidden" name="nr" value="page">
<input type="email" name="ne" placeholder=" <?the_sub_field('placeholder_text'); ?>" required="" class="input-field">
<button type="submit" class="btn btn-primary2"><?the_sub_field('submit_button_text'); ?></button>
</form>
</div>
</div>
<?}?>
</div>
