Posts

WordPress – Creating A Child Theme

When you want to change your WordPress theme but don’t want your changes to be lost after the theme update, you should create a child theme. Creating a child theme in WordPress is quite simple. In this article, I will explain how you can create a child theme. You can easily create a child theme by following the steps below. Let’s start!

1. Creating a WordPress child theme’s folder

You need to create the child theme’s folder under the “wp-content/themes” directory. The name of the folder of the child theme should be “theme name-child”. In short, you should create the folder name by adding “child” to the end of the theme name.

2. Creating a stylesheet for child theme

You must create a style.css file under this folder. At the beginning of this file, you need to add code that defines this child theme and which theme is its parent theme. I am attaching the sample code below.

/*
Theme Name: Theme Name Child
Theme URI: http://example.com/theme-name-child/
Description: Theme Name Child Theme
Author: Example Author
Author URI: http://example.com
Template: themename
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: themenamechild
*/

* Description Of The Lines

The codes below are required;

* Theme Name: You must have a unique theme name, I recommend adding “child” at the end of the name. Defines the name of your theme.
* Template: You have to write the name of the parent theme. This defines which theme is the parent.

The rest are optional and you don’t have to write.

* Theme URI: This is for the theme’s website or the website with the theme’s working demo. This website address must be in the same domain as the author’s website.
* Description: This is the field to contain the description of your child theme.
* Author: You can write your own name here.
* Author URI: You can write your own website address here.
* Version: You can write the version code of your child theme here.
* License: Indicates which license your child theme uses. You can copy the license from the “style.css” file of your parent theme here.
* Tags: You can write tags that describe your child theme.
* Text Domain: This is used for localization and translation within WordPress. You can use the name of your parent theme as a slug and add “child” to the end. Example: “themenamechild”.

Up to this part is enough for you to create a child theme. In the next step, I will explain how to install and activate the theme. Then I will tell you what else you can do.

You can find more resources on WordPress’s website.

3. Uploading The Theme

If you have not created the theme-style file on the server, you can zip the folder and upload your theme from the upload theme section.

Adding Pagination To WordPress Theme Without Plugin

Adding pagination to WordPress theme without plugins consists of several steps. We will go through these steps. I suggest you create a child theme before adding pagination.

Adding CSS Codes To WordPress

Add the following CSS codes to your theme’s style.css file. You can customize it to your own.

/* Pagination */
.wp_paging { 
    margin: 0 0 20px; 
    padding: 0; 
}
.wp_paging ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}
.wp_paging ul li {
    margin: 0; 
    padding: 0; 
    display: inline; 
}
.wp_paging ul li a { 
    float: left; 
    display: block; 
    color: #666; 
    text-decoration: none; 
    margin-right: 5px; 
    padding: 5px 10px; 
    background-color: #FFFFFF; 
    border: 1px solid #999; 
}
.wp_paging ul li a:hover { 
    color: #090; 
}
/* Pagination End */

Adding Function To WordPress

Add the following function to your theme’s functions.php file. You can customize the HTML code inside the function.

/* Pagination */
function pagination($pages = '', $range = 2)
{
    $showitems = ($range * 2)+1;
    global $paged;
    if(empty($paged)) $paged = 1;
    if($pages == '')
    {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages)
        {
            $pages = 1;
        }
    }
    if(1 != $pages)
    {
        echo "<div class='wp_paging'><ul>";
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>First</a></li>";
        if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>Previous</a></li>";
        for ($i=1; $i <= $pages; $i++)
        {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
            {
                echo ($paged == $i)? "<li><a href='#'>".$i."</a></li>":"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>";
            }
        }
        if ($paged < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged + 1)."'>Next</a></li>";
        if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>End</a></li>";
        echo "</ul><div class='cleaner'></div></div>";
    }
}
/* pagination */

Adding the pagination

In the theme, we use the following code to add the page to where we want it.

<?php pagination(); ?>

WordPress Security Tips

It is very important to take security measures for WordPress. If you do not take your security measures, your site may be hacked or you may suffer data loss.

Security Tips During WordPress Installation

1) Create a strong user password database. It must contain uppercase letters, lowercase letters, numbers, and special characters.

2) Don’t make the database’s name and username simple and guessable names, ie database, db, admin, database.

3) WordPress asks for a prefix on the installation screen. By default, wp_ is the prefix. This is the most common of the tables in the database. Use a different prefix from the default.

4) In the user name and password selection, select a different name from admin, administrator. These are tried first because they are defaults. Likewise, create the password with upper case, lower case, number and special character so it will be strong.

Security Tips After WordPress Installation

1) Add the following codes to your .htaccess file.

# Prevent access to .htaccess file
<files .htaccess>
order allow,deny
deny from all
</files>
# remove server signing
ServerSignature Off
# limit file upload size to 10MB
LimitRequestBody 10240000
# Prevent access to wp config.php file
<files wp-config.php>
order allow,deny
deny from all
</files>
# Prevent access to wp-load.php file
<files wp-load.php>
order allow,deny
deny from all
</files>
# disable directory listing
Options All -Indexes

2) The wp-config.php file has a place called unique keys. If you have never touched it, you will see something like this.

define('AUTH_KEY', 'put your unique phrase here');
define('SECURE_AUTH_KEY', 'put your unique phrase here');
define('LOGGED_IN_KEY', 'put your unique phrase here');
define('NONCE_KEY', 'put your unique phrase here');
define('AUTH_SALT', 'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT', 'put your unique phrase here');
define('NONCE_SALT', 'put your unique phrase here');

This is very important. It encrypts cookies and password records with them. When you visit http://api.wordpress.org/secret-key/1.1/salt, WordPress will give you the necessary codes to add there. Copying and pasting are enough.

3) Use plugins as little as possible. They will slow down your site and increase their vulnerability to attack.

4) Get the themes and plugins as much as possible from reliable sources such as WordPress or code them yourself. Never use warez themes or plugins.

Most importantly, always update your WordPress.

How To Close, Delete, Limit Revisions On WordPress

There is a feature called revisions for articles, pages on WordPress. When you make changes to an article or page, it keeps the previous version of each change separately. But it can be annoying and harmful sometimes. For example, if you change ten times on an article or page, there will be 10 old revisions. As the content of your site and changes increases, it will cause your database to swell and slow down. So here I will show you how to delete, close, and limit these revisions.

Closing The Revisions

To turn off revisions, simply place the following code in your wp-config.php file. Do not forget to add this code to between the <?php and ?> Tags.

define('WP_POST_REVISIONS', false);

Limiting The Revisions

To limit the revisions, you simply need to place the following code in your wp-config.php file. You can specify the number as you like. The limit in this code example is set to three.

define('WP_POST_REVISIONS', 3);

Deleting The Revisions

There is a simple way to clear your revisions from the database. Most people do this with plugins, but I don’t think it is the right decision. It is the most efficient way to use WordPress with at least the plugin.

Whether you run the following SQL query on phpMyAdmin or run it elsewhere, the revisions will be deleted.

DELETE a,b,c
FROM wp_posts a
LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id)
LEFT JOIN wp_postmeta c ON (a.ID = c.post_id)
WHERE a.post_type = 'revision'

Adding Infinite Scroll Without Plugin To WordPress Theme

In this article, I will tell you how to add an infinite scroll to your WordPress theme without using the plugin. This article will be the most accurate article. Because if I have done my research to add endless scrolls myself, I have found articles that describe using plugins or methods that work in index.php but not in category.php or author.php. They did not work right on the other files. Because the sample verbs do not load in the category file according to the categorization while loading the second page and the letters of the latter. It was loading all the pages.

You can refer to the source code of AdminLteWpTheme when doing these operations. There are codes of the employee working there.

I suggest you create a child theme before adding this feature.

First, we add the following codes to the functions.php file;

//Infinite Scroll
function wp_infinitepaginate(){
 $loopFile = $_POST['loop_file'];
 $paged = $_POST['page_no'];
 $action = $_POST['what'];
 $value = $_POST['value'];
 
 if($action == 'author_name'){
 $arg = array('author_name' => $value, 'paged' => $paged, 'post_status' => 'publish' );
 }elseif($action == 'category_name'){
 $arg = array('category_name' => $value, 'paged' => $paged, 'post_status' => 'publish' );
 }elseif($action == 'search'){
 $arg = array('s' => $value, 'paged' => $paged, 'post_status' => 'publish' );
 }else{
 $arg = array('paged' => $paged, 'post_status' => 'publish');
 }
 # Load the posts
 query_posts( $arg );
 get_template_part( $loopFile );
 
 exit;
}
add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // if user not logged in

When an ajax request arrives, this function will work, will generate a loop and this loop will get our file. In our function we will receive some POST data;

“loop_file” is the name of our loop file. This file will generate HTML codes. Then we will append it with JavaScript.

The page number is “page_no”. We, therefore, determine which page we will be using.

“what” is what we want pages for. Like category, author, search, etc.

“value” contains the category slug name, author nice name, etc., if the category, author, or request.

With the If query, we create our parameters for query_posts according to what we want here. Then we can create a loop with query_posts and call our file with get_template_part.

With the add_functions function, we provide an ajax request to wp-admin/wp-ajax.php to run your function. We send an infinite_scroll in the action post while sending an Ajax request. So you can create different ajax operations with different names and functions.

Then we will create our loop file under our theme directory. You can give the name here as you like, but don’t forget, you should send this name in the “loop_file” post. I gave the name loop.php. Here you can copy your direct loop from the index.php file. I am putting it as an example in AdminLteWpTheme here.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <!-- timeline time label -->
<li class="time-label">
 <span class="bg-green"><?php the_time('d.m.Y ') ?></span>
 </li>
 <!-- /.timeline-label -->
 <!-- timeline item -->
<li>
 <i class="fa fa-newspaper-o bg-blue"></i>
<div class="timeline-item">
 <span class="time"><i class="fa fa-clock-o"></i> <?php the_time('H:i') ?></span>
<h3 class="timeline-header"><a href="<?php the_permalink() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?> "><?php the_title(); ?></a></h3>
<div class="timeline-body">
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6">
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
 <?php $resim_yolu = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium'); if ( has_post_thumbnail() ) { ?>
 
 <img src="<?php echo $resim_yolu[0]; ?>" class="img-responsive" alt="<?php the_title(); ?>" title="<?php the_title() ?>" />
 <?php } ?>
 </a>
 </div>
<div class="col-lg-9 col-sm-8 col-xs-6">
 <?php the_excerpt_rss(); ?>
<div style="margin-top: 10px">
 <a class="btn btn-primary btn-xs" href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Read more</a>
 </div>
 </div>
 </div>
 </div>
<div class="timeline-footer">
 <i class="fa fa-user"></i> <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" title="<?php the_author(); ?>"><?php the_author(); ?></a> | <i class="fa fa-folder-open"></i> <?php the_category(', ') ?> | <i class="fa fa-comments"></i> <?php comments_number('0 comment', '1 comment', '% comments' );?>
 </div>
 </div>
 </li>
 <!-- END timeline item -->
 <?php endwhile; ?>
<?php endif; ?>

Finally, we must write our JavaScript code in our files like index.php, category.php.

<script type="text/javascript">
 jQuery(document).ready(function($) {
   var count = 2;
   var total = <?php echo $wp_query->max_num_pages; ?>;
   $(window).scroll(function(){
     if ($(window).scrollTop() == $(document).height() - $(window).height()){
      if (count > total){
        return false;
      }else{
        loadArticle(count);
      }
      count++;
     }
   });
 
   function loadArticle(pageNumber){
     $('a#inifiniteLoader').show('fast');
     $.ajax({
       url: "<?php echo admin_url(); ?>admin-ajax.php",
       type:'POST',
       data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
       success: function (html) {
         $('li#inifiniteLoader').hide('1000');
         $("ul.timeline").append(html);
       }
     });
     return false;
   }
 });
</script>

The Count variable is our page number. Initially, it will be 2 because the second page will be uploaded when the page goes down first. Each ajax will increase the variable on demand. Our Total variable is the total number of pages. In this case, we will make sure that the function does not work when the page goes down.

$(window).scroll( function () {} ); function will send an ajax request when the page goes down and we will increase the count variable. Of course, we write an If condition (as long as the count variable is bigger than our total variable) so the code won’t work unnecessarily.

With our loadarticle() function, we first make the loading icon appear and then send the ajax request. you can review the post data by sending it. We do not forget to include what and value data in places such as category, author. As an example, I am writing in the category.php file. You can see what and value data there.

I hope this article works for you.

 

<script type="text/javascript">
 jQuery(document).ready(function ($) {
   var count = 2;
   var total = <?php echo $wp_query->max_num_pages; ?>;
   $(window).scroll(function () {
     if ($(window).scrollTop() == $(document).height() - $(window).height()) {
       if (count > total) {
         return false;
       } else {
         loadArticle(count);
       }
       count++;
     }
   });
 
   function loadArticle(pageNumber) {
     $('a#inifiniteLoader').show('fast');
     $.ajax({
       url: "<?php echo admin_url(); ?>admin-ajax.php",
       type: 'POST',
       data: "action=infinite_scroll&page_no=" + pageNumber + '&loop_file=loop&what=category_name&value=<?php echo $yourcat->slug; ?>',
       success: function (html) {
         $('li#inifiniteLoader').hide('1000');
         $("ul.timeline").append(html);
       }
     });
     return false;
   }
 });
</script>

WordPress Eklentisiz Sayfalama Yapımı

WordPress‘de eklentisiz sayfalama yapmak bir kaç adımdan oluşmaktadır. Sırasıyla bu adımların üzerinden gideceğiz.

Css Kodları

style.css dosyasına aşağıdaki css kodlarını ekliyoruz. Kendinize göre özelleştirebilirsiniz.

/* Sayfalama */
.wp_paging { 
 margin: 0 0 20px; 
 padding: 0; 
}
.wp_paging ul { 
 margin: 0; 
 padding: 0; 
 list-style: none; 
}
.wp_paging ul li { 
 margin: 0; 
 padding: 0; 
 display: inline; 
}
.wp_paging ul li a { 
 float: left; 
 display: block; 
 color: #666; 
 text-decoration: none; 
 margin-right: 5px; 
 padding: 5px 10px; 
 background-color: #FFFFFF; 
 border: 1px solid #999; 
}
.wp_paging ul li a:hover { 
 color: #090; 
}
/* Sayfalama Son */

Fonksiyon Oluşturma

functions.php dosyasına aşağıdaki fonksiyonu ekliyoruz. Fonksiyonun içindeki html kodlarını özelleştirebilirsiniz.

/* sayfalama baş */
function sayfalama($pages = '', $range = 2)
{
 $showitems = ($range * 2)+1; 
 global $paged;
 if(empty($paged)) $paged = 1;
 if($pages == '')
 {
 global $wp_query;
 $pages = $wp_query->max_num_pages;
 if(!$pages)
 {
 $pages = 1;
 }
 } 
 if(1 != $pages)
 {
 echo "<div class='wp_paging'><ul>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>İlk</a></li>";
 if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>Geri</a></li>";
 for ($i=1; $i <= $pages; $i++)
 {
 if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
 {
 echo ($paged == $i)? "<li><a href='#'>".$i."</a></li>":"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>";
 }
 }
 if ($paged < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged + 1)."'>Sonraki</a></li>";
 if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>Son</a></li>";
 echo "</ul><div class='cleaner'></div></div>";
 }
}
/* sayfalama son */

Sayfalama Ekleme

Tema içerisinde sayfalamayı istediğimiz yere eklemek için aşağıdaki kodu kullanıyoruz.

<?php sayfalama(); ?>

Portfolio Items