Thursday, January 27, 2022

Plugins : Why you should keep yourself from re-inventing the wheel. Top 5 WordPress plugins you should keep in your toolbox if needed.

 WordPress was built as a framework/cms for personal blogging in the focus, but as the times passed the extensibility  of the platform with plugins make it frequently used for CMS, E-commerce, Forums, Digital-marketplace, directory and what not.

The proven success of the WordPress has mostly be due to its plugin system. WordPress plugins system.

Seen the others, many time when developer starts a new site he frequently starts to make the plugin which has already a better and well maintained alternative in WordPress Eco-system. 

Hassles with custom plugins:

Custom made plugins are mostly made with specific purpose in mind. They needed to be patched, updated and maintained with ongoing WordPress update cycles. If not maintained properly, a newly found security vulnerability may even lead to your site to be hacked.

On flip side, if you use a well maintained WordPress plugin, you get the added benefit of regular security updates, updates with internal WordPress apis and wide community of existing users who can help you  solve any technical problem if ever needed.

So, If you have a functionality which you need to implemented and that is already available with some reputed well maintained plugin in WordPress, I highly recommend you to go with this route.

Here are five plugins which I highly recommend to avoid re-inventing the wheel.

1. Contact Form 7:

 

Almost all the website rather static or dynamic do feature a contact us page, where visitor can send their message to website owner. WordPress does not have in built form builder, and does not out of box support this functionality. Rather than hacking your function.php file or create a new custom plugin to make this happen, you should use Contact Form 7 WordPress plugin.

This plugin directly send the received message to your email address.

2. WooCommerce

 

WooCommerce is a plugin by Automattic, which let you add the e-commerce functionality to your existing blog without requiring you have hassle of doing all the complex stuffs related to the e-commerce platforms. WooCommere supports all the types of the products including physical products, Digital products, Virtual products and products with variants. 

If you want some functionality in your WooCommerce store, chances are there already exists the plugin to help you add that functionality to you store. You can add payment providers, gallery, tutorial typed product, subscription, shipping and most of all other functionality you can think about readily available in both free and premium supported models. 

3. Advanced Custom Fields

 

If you are using wordpress for purpose other than the blogging, chances are you may frequently need to have an additional field or multiple fields to add related data to the post. There exists the way to create those fields manually by coding in function.php with custom post types but Advanced Custom Fields plugin already comes with all the most needed fields already available with multiple datatypes and formats which you may need.

Using this plugin, you can save hours of the repetitive work, lessen project complexity at the same time make your website compatible with ongoing platform updates and new features.

4. Bbpress

 

Forums and discussion boards takes the notable part of the internet content, And there are many cases where you might need to have a forum or discussion board connected with your website.

Bbpress is a free WordPress plugin which allows you to easily add forum to your existing website with minimal efforts.It gives you full control over the features and functionality of the forum.

It has many notable features including multi-forum site, spam protection, user generated content section, plugin support, role management, theming, RSS feed support etc. 

If you need a bulletin board with trusted history of performance, bbpress is perfect option.

5. Jetpack

 

Unlike other plugins fulfilling single responsibility, Jetpack is a collection of utilities which adds the desired functionalities to your website. 

The jetpack plugin packs many utilities which provides various functionalities like contact forms, CDN service, Email subscription, social sharing, security etc. Its built by Automattic, the same company which is behind the development of WordPress.


Sunday, January 23, 2022

What is functions.php file in wordpress? 3 scenario where we can use it.

In this article we will see the functions.php file, how it works and how you can use it.

WordPress is known for being very customizable and flexible using the plugins system. But many a times we want to add the functionality to the theme or we want to add few small changes for which we do not want to add a plugin.
In that case WordPress' function.php is used. In latest premium WordPress themes the functions.php works as the main engine driving features and flexibility of the theme without requiring any external plugins, beside it is popularly used for injecting small codes like google analytics, fonts API, custom scripts, site wide hooks and filters.

Functions.php resides in the root directory of the WordPress theme. you can use all the functions of WordPress inside it just like the plugins. But as its tied to the WordPress theme, If you change the theme your changes will be lost. WordPress development guide does not recommend to directly change the core/original files of the theme which may lead to dependency hell in case of update is required, to avoid such scenario we can use child themes.
Child themes act as the modifier theme of the original theme, here we can define any change or overload the default functionalities and theme settings without changing the original theme. 

Here are five such cases where it can be used.

1)Adding Google analytics to WordPress blog

There are many ways to add google analytics to the WordPress blog, but most of the times it is unnecessory to use a plugin for that, we can use following code in functions.php file to add google analytics to the site:

<code>

<?php 
  add_action('wp_head', 'theme_prefix_add_googleanalytics');
  function wpb_add_googleanalytics() { 
   ?>
  // Insert your Google Analytics Tracking ID 
<?php } ?>

</code>

2) Displaying Post length in words

<code>
<?php 
function theme_prefix_count_post_words(){
  $content = get_post_field( 'post_content', $post->ID ); 
  $word_count = str_word_count( strip_tags( $content ) ); 
  return $word_count;
} 
</code>
This function needs to be called, we can create either a filter or modify the template file, 
for doing so, just find the files single.php(or which ever applicable), copy it and place it in the same relative position in child theme. once doe just add the following code to print the word count at desired location.
<code>
echo theme_prefix_count_post_words();
</code> 

3) Injecting the stylesheet inside header.

Suppose you want to add the bootstrap css files inside your wordpress theme, to do so using the functions.php file, Just add the following code inside the functions.php file.
<code>
function theme_prefix_enqueue_scripts() {
    // Add boot strap style css files
    wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array());
    wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri() . '/css/style.css', array());
    // all scripts
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '20120206', true );
    wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_scripts' );
 
</code>

Monday, January 10, 2022

How to create own Custom Post Type in wordpress

Mostly people think that WordPress  is yet another blogging platform, but they don’t know that WordPress as evolved and, is being used for pretty much everything we can expect,  that includes as e-commerce platform, online marketplace, blogging, corporate websites, real estate portals, forums, SAAS dashboard etc.,

One of the biggest reason of this success is the custom post types feature provided by the WordPress.  In WordPress everything is a post, including every page and blog post. WordPress by default supports only few post types. However we can create as many custom post types as we want in the WordPress. In this article

we will show how can you create a custom post type in WordPress from scratch.


What is a Custom-post Type in WordPress?

Custom post types are the user defined post types that do not come bundled with the default WordPress installations.
The user has to add this post type by either custom developed WordPress theme or a custom made plug in to enhance the functionality of the WordPress blog beyond the normal. By default WordPress comes with the following post types
  1.     Post
  2.     Page
  3.     Nav Menu
  4.     Attachment
  5.     Revision
You can create your own post type and call them wherever you want ex. If you are developing a cooking – recipe website, you can create a custom post type called recipe which will accept cover images and recipe ingredients.

We can enhance it with many custom fields and even custom fields. There are many use cases where the custom post type makes sense like, portfolio, Testimonial, E-commerce Product Listing, Polls etc.

For creating a custom post types we have two options
1.    Using default functions.php file to hook a post type
2.    Creating a new plug-in for the functionality

Both the method works well with the implementations, however, it is recommended to make a plug-in for a custom pos type unless the plug-in itself is not highly dependent on the functionality of the included theme.

The main problem with registering the custom types in the functions.php is that we have to take the backup every time we update the theme or manually add the functionality to new theme every time we change the theme.

But, if you use plug-in to define the custom post type you don’t have to bother too about the custom post types when updating and changing the theme.
Let’s get started with the basic function,

// Custom post type function
function create_custom_post_type_recipes() {

    register_post_type( 'recipes',
    //Custom post types options
        array(
            'labels' => array(
                'name' => __( 'Recipes' ),
                'singular_name' => __( 'Recipe' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'recipes'),
        )
    );
}
// Adding a hook to trigger the function
add_action( 'init', ' create_custom_post_type_recipes ' ); 
 
In above code, we have added a function to register the custom post type recipes in WordPress. The function accepts the array of argument for configurations, the labels indicates singular and plural form of the post type display names.

The other options are used to extend the behaviour of the post type, like changing the url structure and its public visibility.

We can add many more feature to the post types including the translation ready labels,

/*
* Custom post type function
*/

function create_custom_post_type_recipes() {

// Set UI labels for Custom Post Type
    $labels = array(
        'name'                =&gt; _x( 'Recipes', 'Post Type Name',
                                           'themedomain' ),
        'singular_name'       =&gt; _x( 'Recipe', 'Post Type Singular Name',
                                         'themedomain' ),
        'menu_name'           =&gt; __( 'Recipes', 'themedomain' ),
        'parent_item_colon'   =&gt; __( 'Parent Recipe', 'themedomain' ),
        'all_items'           =&gt; __( 'All Recipes', 'themedomain'),
        'view_item'           =&gt; __( 'View Recipe', 'themedomain' ),
        'add_new_item'        =&gt; __( 'Add New Recipe', 'themedomain' ),
        'add_new'             =&gt; __( 'Add New', 'themedomain' ),
        'edit_item'           =&gt; __( 'Edit Recipe', 'themedomain' ),
        'update_item'         =&gt; __( 'Update Recipe', 'themedomain' ),
        'search_items'        =&gt; __( 'Search Recipe', 'themedomain' ),
        'not_found'           =&gt; __( 'Not Found', 'themedomain' ),
        'not_found_in_trash'  =&gt; __( 'Not found in Trash',
                                            'themedomain' ),
    );
   
// Few other options for Custom Post Type
   
    $args = array(
        'label'               =&gt; __( 'recipes', 'themedomain' ),
        'description'         =&gt; __( 'Recipe Details', 'themedomain' ),
        'labels'              =&gt; $labels,
        // Features that a custom post type should support into the post editor
        'supports'            =&gt; array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ),
        // Here we can create the custom taxonomies for the custom post type for easy listing. Like a recipe can be of different course, dinner, lunch or breakfast
        'taxonomies'          =&gt; array( 'course' ),
        // If we have a hierarchical custom post where we can set up the parent child relationship, we can use this option as true   
        'hierarchical'        =&gt; false,
        'public'              =&gt; true,
        'show_ui'             =&gt; true,
        'show_in_menu'        =&gt; true,
        'show_in_nav_menus'   =&gt; true,
        'show_in_admin_bar'   =&gt; true,
        'menu_position'       =&gt; 4,
        'can_export'          =&gt; true,
        'has_archive'         =&gt; true,
        'exclude_from_search' =&gt; false,
        'publicly_queryable'  =&gt; true,
        'capability_type'     =&gt; 'page',
    );
   
    // Registering your Custom Post Type
    register_post_type( 'recipes', $args );

}
 

add_action( 'init', 'create_custom_post_type_recipes', 0 );

The above code will add features like featured images, custom fields support, revision, etc.
We also added a custom taxonomy called course to allow better categorization of the recipes.

 The recipes we want to add does not include hierarchical relationship like parent and child, but if you want to add some sub recipe of sauces or a tangy starter with the recipe you are always welcomed to make them hierarchical.
The WordPress allows us to make our themes and plug-ins ready for translation. For this we has to use something called text domain. Here as you can see, we have many time returned word themedomain that is called the text domain.

You can change the textdomain in of your theme inside the style sheet named style.css which is inside your root directory of your theme.

Now we have accomplished the task of recognizing of our custom post type by the WordPress, but we still need to tell WordPress how should it display the custom post type.

There are two method of displaying your custom post type inside the website
1.    WordPress Default page and Archive template
2.    Custom Post Type single.php and archive.php

Display using default Archive Template

WordPress  out of the box supports the basic display of the custom post types. The easiest method to see it in the action is to follow the general WordPress hierarchical url pattern.
Use  http://yourdomain.com/recipes/

In case you are not using the custom permalinks you can also use the default post archive url like this,

http://yourdomain.com/?post_type=recipes

replace the post type value with your custom post type. Now visit the link, You will see the default archive.php page of your theme which is listing the post of your custom post type.

 

Using Custom Single and Archive Templates for Custom Post Type


If you don’t like the default appearance of the custom post type page, you can easily create a custom archive template.

For this you will have to create a file called archive-{posttype}.php  in the root directory of your theme, where you should replace the posttype with the name of your custom post type. In this case we will create a file called archive-recipes.php.

The easiest way to do is to copy the default archive page and make a new copy with name archive-recipes.php. Now edit the template according to your own requirements. So now whenever the request to your custom post type archive page is made WordPress will automatically pickup the archive-recipes.php and display it to the user.

Follow the same steps to create the single-recipes.php file. This files will be called whenever a user will request to view the single recipe.

This was all basic stuffs, now we will see one quick case how we can use it.

 

Displaying Latest posts from Custom Post Types on your Home Page


WordPress generally does not mix the content of your custom post type with the default post. Suppose you want to Display the latest three recipes on your homepage, only thing you have to do is add the following code inside your functions.php file
add_action( 'pre_get_posts', 'get_latest_recipes' );

function get_latest_recipes( $query ) {
    if ( is_home() && $query->is_main_query() )
       
    $queryObject = new WP_Query( 'post_type=recipes&posts_per_page=3' );
// The Loop!
if ($queryObject->have_posts()) {
    while ($queryObject->have_posts()) {
        $queryObject->the_post();
        ?>

        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br/>
    <?php
    }
        ?>

    }

Replace the query parameter recipes with your custom post type name.
We hope that this article will help you the way WordPress uses the custom post type feature.

 If you liked this article, then subscribe to our blog feeds.
 Any suggestions are welcomed in comment section.

Saturday, December 25, 2021

Starting Wordpress Development




How to start WordPress Development

Are you a web developer and has frequently seen the word WordPress with blogging topics? Want to take the WordPress development as a career, you can go ahead. WordPress was initially made as a blogging platform, but extensibility and wide user base of the platform has made it the real giant. WordPress today is the most used CMS in the world. There are many popular websites with millions of visitors are made with WordPress. So we can assume it is not going anywhere sooner.
So, first you should gauge your skills, 

At which level you consider yourself.
Have you ever used WordPress before?, are you a blogger who uses WordPress but don’t know its internals? Are you a web template maker who wishes to go ahead and continue the WordPress  theme development as a Career.
So, let’s decide your level

Beginner
  • Has no coding experience at all.
  • Has no or little knowledge of HTML/CSS/JS
  • No experience with any programming language or has no code editing skills

Intermediate
  •   Know the basic web development stuffs – has coded in HTML and css 
  •   Like to play with the structural part of the WordPress / html themes
  •  No programming knowledge 
Advanced Rookie developer (Open to alternate suggestions)
  •   You know basic frontend development (HTML/CSS/JS) 
  •   You know basic PHP and you can edit code.

Beginner Developer:

The complete beginner are those who has zero knowledge about the code or even html –css stuffs
You have a lot of the work to do, First get familiar with the web and how it works.
Know the basics about how browsers work and how contents are rendered into the browser. You can also setup the web development environment in your own computer; The only thing you should install is a software stack for php development,

Environment for Windows Users

 If you are using some version of the windows operating system, then you have many options to choose from. There are two options which I will show you.
1.       Wamp Server – Wamp server is the complete mysql , php development environment which allows you to code and develop  web applications on your own computer
2.       Xampp Server – Pretty much same as wamp

For Mac User

   If you are using some version of the mac OS, you can install MAMP which can be dubbed as Mac Apache Mysql PHP.
Using these local development softwares, you can quickly code, deploy and test your code locally. If you are complete beginner, you can use some recommended sources like Code Academy and Udemy.
As on now, most of the modern browser are well equipped with developer console and dom inspector tools which are great advantages compared to few years back. You can use chrome inspector, Firefox developer tool, scratch pad even debug the running JavaScript.

For Intermediate User:

These are the people who are not actually new to the web development, but somewhat familiar with the HTML and CSS works. You can use some fancy tools like Code editors, IDE or Basic text based code editors. You know how to use the browser inspect and debugging feature to minimal. You know what php is (but may not how it works), you can put some php variables in to templates as directed by a developer or shown in the template manuals.
In the above case, you are an intermediate user. The first thing you should do is install php development environment in your pc.(check above point)

Learn basic server-side web development. Make small php-mysql website, create registration form, some posting, user management (CRUD operations).  Once you get little confidence try moving up towards the image manipulation (use library) and file management.  Learn a little by little about functional and OOP based php web development methodology.  Some resources are,

Code Academy

 

Code Academy has some really quick and effective php development tutorials with basic code examples.

 

Codecource


Code course is a free source of the php web development tutorial. The course offers many different view of working on php with great content.

 

Treehouse :


Treehouse is a premium web development cources directory. The Tree house has more than 20-25 hours of recorded video tutorials

For Rookie Web developer

You know front end programming and you have the basic php coding knowledge, you are a php Rookie developer. You are familiar with how wordpress functions  and main loop works.
Start Learning Wordpress Themes and Plugins development.
Now, as you know php, file handling and how the general web development is done, you start learning WordPress theme development. You can use  online Tutorials available on the Youtube, you can subscribe to some premium tutorial such as offered by TreeHouse, Tut+ and Udemy, like

Theme Shaper (https://themeshaper.com/)


Theme Shaper is official website where, the team of wordpress theme development team from Automattic shares their thoughts and tutorial about latest theme development trends. There are many WordPress topics covered deeply.

 

Tut+ wordpress Theme development tutorial


Tut+ is a premium web-development tutorial website, there you can find many tutorials on developing new WordPress website and customization.

 

WordPress Codex


WordPress codex is the official functional reference to the WordPress framework code. The site may not look promising, but it is the best source for new beginner to start over using the WordPress in-built functions and hooks.

Strengthen your Foundation: 


Learn JavaScript and responsive web design basics.
As you start development with WordPress, you will come to know about the different tricks required with HTML/CSS and JS.
Try learning some advanced js framework like Jquery which is by default bundled with WordPress.  And we all know that it has played a crucial role in the core WordPress usability. Play with Jquery for a while.

Experiment with Plugin Hooks and actions, try to add new features to your website like, custom excerpt, custom post type, tracking view of the visitors of particular post, adding the custom advertisement between the post content etc.

 

Help and Guidance


There are many blooming WordPress community, you can ask your question on various places to find answers and get to the peers.

 

Stack Overflow: Stack overflow is a programmers google for solving their problems, here you can find answers of almost any of the currently used tech, each of the community has really large userbase and supportive culture

 

Reddit

Reddit has some dedicated channels for the WordPress development topics.

Start doing WordPress development now.