Forem: Shuaib Yusuf Shuaib

RegExp based HTML modification in PHP

Shuaib Yusuf Shuaib — Fri, 02 Jun 2023 11:00:15 +0000

The kinda way I use to modify HTML with RegExp using PHP.

HTML Tag Regex

/\<(?<tag>[a-z][a-z0-9\-]*)(\s+([\s\S]*?))?\/?\>(([\s\S]*?)\<\/(?P=tag)\>)?/

The above RegExp can be broken down as:

/: The regex opening delimiter.
\<: Matches the character < of an opening tag.
(?<tag>[a-z][a-z0-9\-]*): Matches HTML valid tag name, which should start with a character between a and z, could contain another characters between a to z, and numbers between 0 and 9, and could also contain the character - in it.
(\s+([\s\S]*?))?: Matches the entire attributes of the tag including spaces between them, but only if they were present.
\/?: Matches the character / of self closing tags.
\>: Matches the character >, which is supposed to be the closing character of the opening tag.
(([\s\S]*?)\<\/(?P=tag)\>)?: Matches the content or HTML inside the tag and the closing tag, but only if the tag is not self closing tag.
/: The regex closing delimiter.

HTML Tag Attributes Regex

/([\w\-]+)(\s*\=\s*(?|(?<quot>[\'"])([\s\S]*?)(?P=quot)|(?<quot>)([\w\-]+)))?/

The above RegExp can be broken down as:

/: The regex opening delimiter.
([\w\-]+): Matches the attributes key/name.
(\s*\=\s*(?|(?<quot>[\'"])([\s\S]*?)(?P=quot)|(?<quot>)([\w\-]+)))?: Matches the value of the attribute, which could be anything wrapped in a single-quote (') or in a double-quote ("). Also, could be naked (not wrapped in a quote). If not wrapped, the value must only contain characters in the range a to z or the capitals A to Z, and numbers in the range 0 to 9, and _ (underscore), and - (hyphen). This could also match nothing for boolean attributes.
/: The regex closing delimiter.

Example Usage

<?php

// HTML elements
$content = <<<EOL

<p>Text paragraph.</p>
<img src="http://example.com/image-200x320.png" width="200" height="320">

EOL;

// Tags matching RegExp
$tags_regexp = '/\<(?<tag>[a-z][a-z0-9\-]*)(\s+([\s\S]*?))?\/?\>(([\s\S]*?)\<\/(?P=tag)\>)?/';

// Attributes matching RegExp
$atts_regexp = '/([\w\-]+)(\s*\=\s*(?|(?<quot>[\'"])([\s\S]*?)(?P=quot)|(?<quot>)([\w\-]+)))?/';

// Match all the valid elements in the HTML
preg_match_all( $tags_regexp, $content, $matches, PREG_SET_ORDER );

// Loop through and make the necessary changes
foreach ( $matches as $match ) {

  // We are going to modify only image tags
  if ( 'img' !== $match[ 'tag' ] ) continue;

  // Match all the attributes
  preg_match_all( $atts_regexp, $match[2], $atts_match );

  // Combine the keys and the values
  $atts_match = array_combine( $atts_match[1], $atts_match[4] );

  // Build back a HTML valid attributes
  $atts = '';
  foreach ( $atts_match as $name => $value ) {
    $atts .= sprintf( ' %s="%s"', $name, $value );
  }

  // Replacement for the tag
  $amp = sprintf( '<amp-img%s></amp-img>', $atts );

  // Replace the complete tag match with the new replacement
  $content = str_replace( $match[0], $amp, $content );

}


// The AMPifyed HTML
/**
 * <p>Text paragraph.</p>
 * <amp-img src="http://example.com/image-200x320.png" width="200" height="320"></amp-img>
 */
echo $content;

The above could also be improved to make a complete HTML-to-AMP converter for simple pages.

BoidCMS – Flat file CMS for building simple websites and blogs.

Shuaib Yusuf Shuaib — Tue, 26 Jul 2022 21:05:00 +0000

BoidCMS is a free and open-source flat file CMS for building simple websites and blogs in seconds, developed using PHP and JSON as a database.

BoidCMS is a free and open source content management system designed to be simple, easy to use, and highly extensible. It comes with a range of features to help you create and manage your website with ease.

BoidCMS is a fork of WonderCMS

Content Types

BoidCMS comes with two pre-defined content types out-of-the-box.

Post

Posts are dynamic content items that are typically used for articles, blog posts, news updates, or any other kind of time-sensitive content that gets added to your website over time. They are listed on your homepage as individual posts and can be sorted by date, or other criteria.

Page

Pages are static content items that are used for content that doesn't change frequently, such as an "About Us" page, a "Contact Us" page, or a page with specific information that you want to share with your visitors. Pages can be accessed through a link, but they are not listed on your homepage. You can add them to the website navigation menu, footer, or any other section of your website to make them more visible to your visitors.

Requirements

PHP 8 or greater
Web server (Apache mod_rewrite)

Features

One Step Install: BoidCMS can be installed with just one step, making it easy for anyone to get started quickly.

Free and Open Source: BoidCMS is completely free to use and is released under the permissive MIT license, which means that anyone can download, modify and distribute the software without any legal or financial obligations.

Simple and Easy to Navigate Admin Panel: The admin panel is designed to be easy to navigate, with an intuitive interface that lets you manage your content quickly and easily.

Themes and Plugins Support: BoidCMS supports themes and plugins, allowing you to customize your website and add new features with ease.

Super Extensible: BoidCMS is designed to be highly extensible, with a flexible architecture that makes it easy to add new features and functionality.

CSRF Authentication: BoidCMS uses CSRF authentication to protect against cross-site request forgery attacks.

Custom Admin URL: You can customize the URL of the admin panel to make it more secure and harder to guess.

Custom Page Permalink: You can customize the permalink structure of your pages to make them more SEO friendly.

Custom Page Template: BoidCMS allows you to create custom page templates for your website, giving you more control over the look and feel of your content.

Blog Option: BoidCMS includes a blog option, allowing you to create and manage a blog on your website.

File Manager: The built-in file manager makes it easy to upload and manage files for your website.

SEO Friendly: BoidCMS is designed with SEO in mind, with features like custom permalinks and meta descriptions to help you optimize your content for search engines.

Content Type: BoidCMS supports custom content types, allowing you to create and manage different types of content on your website.

GDPR Compliant: BoidCMS prioritizes user privacy and ensures that it does not track or collect personal data by default, aligning with the principles of the General Data Protection Regulation (GDPR). It is an ideal option for websites that value user privacy and data protection.

Demo

Demo 1
Demo 2

Screenshots

Login page

Dashboard

Settings page

Create page

Update page

Delete page

Media manager

Plugins page

Themes page

Support

Ask questions, get support, and discuss BoidCMS.

Discussions

5 Online Websites To Help You Learn Web Development

Shuaib Yusuf Shuaib — Sat, 14 Aug 2021 00:00:00 +0000

If you are looking to learn web development online, there are more than enough resources out there to teach you everything you need to know. In fact, many (if not most) of the web developers in the world today have launched successful careers by learning web development online from scratch. But even the most ambitious self-starters run into the problem of deciding where to begin.

Below you will find my picks for the top 5 websites to help you learn web development online.

Why Learn Web Development Online

As a web developer, your credibility is more about the strength of your portfolio than it is about your credentials.

Your employment opportunities will often come from concrete skills and samples of your work rather than a degree from a university.

It’s not that a proper college education isn’t important or valuable as a web developer. Rather, it’s to say that if attending a university isn’t in the cards, you can learn everything you need to know about web development online.

The web development industry continues to grow exponentially so you won’t find a shortage of resources.

The most important thing to do is start.

This list should help.

Codecademy

Codecademy is a course-based online learning site that provides a unique hands on approach to learning code.

To start learning, you must select a path (like web development). Each path includes lessons that begin with the basics and ends with advanced practical application. Each lesson includes written instructions that help you write out actual code that progresses with each lesson.

It is a nice “learn by doing” approach that one does at their own pace.

They also offer what they call Codecademy Pro Intensives to take your learning to the next level by providing programs that will deliver job-ready outcomes. For example, you can build real-world projects and get professional developer feedback.

Pluralsight

Pluralsight offers a unique online platform for sharpening your coding skills for web development.

What’s unique about Pluralsight is that it allows you to take a Pluralsight IQ assessment to identify gaps in your knowledge so that you can concentrate on learning only those skills you need.

You can even choose learning paths to help guide your learning experience, but they also have stand-alone courses as well.

You can test it out with a free trial and their personal membership starts at $35 per month.

Codewars

Codewars is one of the more popular coding challenge websites that allow you to master your web developer skills by solving challenges in the programming language of your choice. You can even compare your solution with other for great understanding.

The Odin Project

The Odin Project is a great place to jumpstart your career in web development with a full stack curriculum approach that is backed by an open source community.

The curriculum is made up of a collection of online tutorials, blogs, and courses. For example, there is a web development 101 course made up of lessons that start and the basics and end with you building a practical web application. So you will have opportunities to build portfolio-worthy projects alongside a community of developers.

MDN Web Docs

MDN Web Docs is a valuable online resource created by an open community of developers which is updated regularly by employees of Mozilla, Apple, Google, & Microsoft.

You can easily search for what you are looking for and find pragmatic explanations from credible professionals.

They even include entire lessons for learning web development.

Their Hacks Blog is also a great reference for the web development industry.

More Places to Learn Web Development

Conclusion

When it comes to starting a career in web development, getting started can be the hardest part.

But once you do, you might be surprised at just how much you can learn in just a single day with the online resources available.

Then it is just a matter of mastering your skills toward your new career. Hopefully, these web developer resources can help you along the way.

Feel free to share some of your favorite online resources in the comments below.

Cheers!

How To Interlink Your Blog Articles To Help Seo And Increase Traffic

Shuaib Yusuf Shuaib — Mon, 05 Jul 2021 00:00:00 +0000

Your blog should be like a spider’s web, with each article linking to other articles in your blog.

This technique can deliver some nice traffic benefits. Here’s how to do it…

What Is A Pingback?

In some circles I’ve read there is no difference between a trackback and a pingback. Many people will use the term interchangeably and in fact I’ve been known to confuse the two myself.

Generally there is one main difference – a trackback is forced by a human blogger while a pingback occurs automatically by the blogging software.

I read a description online which I think is a good way to discern the difference however I don’t agree 100% with the distinction presented. It does offer a simple way to get your head around the semantics of using the two techniques –

Where trackback is “Here’s what I think of that” a pingback is more simply “I’m using that”.

Trackbacks are intentional attention grabbers that give an opinion of another blogger’s work. A pingback merely informs another blog that you are referencing their writing.

Internal Pingbacks

I experience pingbacks when I reference to my own blog posts within my blog. I use the blogging system WordPress which automatically sends pingbacks if I link to one of my previous articles, creating a link between the two blog entries.

Linking between your own articles is a good thing, and certainly pingbacking your own entries helps make the process efficient because it’s automatic, but there is a lot more you can do proactively to create links between your own blog posts. As with most things in blogging, there is a “smarter way”.

What Is Interlinking?

Interlinking means when you link one of your own pages to another internally within a website.

Since you control your site you can control your blog’s entire internal linking structure. This is important for traffic because of how search engines work.

If you want the search engines to rank every single page of your blog you need to make sure they can find every page.

Search engines use little software programs called “spiders” or “bots” that trawl around the web following links and “indexing” all the content of web pages.

If your site is internally linked well together then you make it easy for the little spiders to index every page of your blog.

Sitemaps

I will briefly mention sitemaps because they are a convenient way to tell the search engines where all your pages are. Most search engines do a pretty good job of finding pages but sometimes they have trouble indexing your entire site, especially if your site is new.

I’m not going to cover sitemaps in-depth because it is a whole topic on its own, however I do recommend you have one as the first step to create a good internal linking structure for your blog.

Here are some resources for building and learning more about sitemaps:

If you are a WordPress user, install the Google Sitemap generator plugin.

Google Looks At Each Web Page

Google ranks pages based on how many other pages link to it. That’s PAGES, not SITES, which means when you link one blog entry to another you are helping each blog article earn better search engine rankings so it will bring in more search traffic.

Simply linking to all your blog posts in every new blog post you make is not going to do much for your traffic and will turn away your readers (not a good strategy!), however a few well placed internal linking patterns can be very helpful over the long term.

During the first few months I blogged I wrote definition articles for many key terms in my industry, including RSS, PageRank and other Internet business and blogging topics.

I regularly link back to those articles when I mention the terms in a new blog post so that beginner readers can read my definition article to get a grasp of the concepts. Not only is this great for usability it helps my blog search rankings too.

Get Your Keywords Right

The most important thing when you link your blog entries together is to choose the right keywords. The keywords you use in the anchor text (the text your readers see as underlined links) help to define what search terms that article will rank well for.

Lets say your blog topic is “share trading” and you wrote a definition of the PE ratio (the price-to-earnings ratio).

Every chance you get you should reference back to it in new blog posts. Each time you do this you would use anchor text along the lines of “what is the PE ratio”, but be certain to mix it up with variations.

This helps that page rank higher for search phrases like “what is the PE ratio”.

Increase Your Pageviews

Even if I’ve totally confused you with all this talk about search engine rankings there is one very good plain and simple reason to interlink your blog articles as often as you can – to increase your pageviews.

Pageviews are how many individual pages each visitor to your blog reads. Obviously you want to increase the number of pageviews because that means your readers stay longer at your blog and read more of your content.

By interlinking your articles well, and that means placing links between your own articles in a logical manner, you create a nice pathway for a reader to navigate through your blog.

Cover The Basics

Some of the topics I covered may be too technical for beginner bloggers. If there is one piece of advice you should take away from this newsletter and implement on your blog it is to link back to your previous blog posts regularly.

Use logical anchor text links and don’t worry too much about keywords. If you label your links well for humans you generally label well for search engines too. It’s easy to get caught up with keywords so don’t spend too much energy worrying about how you link to your articles, just do it.

Whenever you write a new article think whether it would be appropriate to link to another article that includes relevant content.

It takes two seconds and can provide fantastic benefits in search engine rankings, pageview numbers and increases the length of time each visitor stays at your blog.

Best 5 Most Used Premium WordPress Plugins

Shuaib Yusuf Shuaib — Mon, 05 Jul 2021 00:00:00 +0000

Elementor Pro

Since its release in 2016, Elementor has quickly grown to become one of the most popular page builders for WordPress, with 5+ million active installs. You can even buy Elementor themes from ThemeForest. It’s easy to see why it’s so popular.

With Elementor you can build complex, pixel perfect page designs using drag and drop. Want to start designing from scratch? Choose from over 80 design elements and add text, buttons and even forms to your pages. Need a template? There are 100+ pre-designed templates to help get you started.

Pricing :

$49 per year

Divi

Divi is the most popular page builder for WordPress, according to BuiltWith, though it’s had a lot of time to climb the ranks — it was first released in 2013 as Elegant Themes’s flagship theme.

The Divi offers user-friendly visual page building that’s really fast. There are 46 modules for everything from text and email optins to filterable portfolios and galleries. A unique feature of Divi is its integrated a/b split testing and conversions rate optimization system, which lets you test different design — no other page builder offers this.

Pricing :

$89 per year

WP Rocket

WP Rocket is the most popular premium caching plugin for WordPress thanks to its huge list of features and user-friendly interface. Compared to free plugins like W3 Total Cache, which are confusing to configure, WP Rocket works as soon as you activate it and includes simple settings for further tweaking your site’s performance.

In addition to browser caching, WP Rocket also provides:

Minification and GZIP compression for HTML, CSS, and JavaScript files
Database cleaning
Lazy loading
Cache preloading
DNS prefetching
File deferring
Google Fonts optimization

Pricing :

$49 per year

Yoast Seo

When you log in to any WordPress site, more often than not you’ll find Yoast SEO installed. This plugin offers advanced SEO features that are easy enough for beginners to set up and configure.

The premium version of Yoast SEO includes:

Advanced XML sitemaps
Full control over site breadcrumbs
Set canonical URLs to avoid duplicate content
Title and meta description templating
Content and SEO analysis, including readability
Text insights
Automatic internal linking suggestions

Pricing :

$89 for each site per year

Amelia

Amelia is an enterprise-level appointment booking Premium WordPress Plugin, built with the newest technology. It can be your automated booking specialist which works 24/7. It provides a smooth booking experience for your customers, take care of the payments, and it will fully automate the interaction with the potential customers.

With Amelia you can receive a booking engine with lots of features, it’s easy to use, you can install it with a few clicks. You can customize it to fit your needs on your website, and it has a tons of demos what you can use.

Pricing :

$59 per year

How To ByPass WordPress Admin Login

Shuaib Yusuf Shuaib — Tue, 29 Jun 2021 00:00:00 +0000

We’ve all been there: You have a website that is running well for a while.

Then you want to install some updates or change some text on the home page.

But when you arrive at the WordPress wp-login.php page you cannot even remember the username of your WordPress admin account… So, here is the solution to quickly log into your WordPress dashboard without knowing the username or the password.

For now, we’ll have a look at two ways to login into your WordPress site: First one is to reset the users’ password via the Database; for this, you need access to your sites MySQL database (e.g. via phpMyAdmin). For the second alternative, we add a small script via FTP to bypass the WordPress login mechanism.

Reset Password via DATABASE

Even when you have access to your WordPress database, you can discover valid user names (and email addresses), but there’s no way to find out the users passwords.

However, you can use the Database to insert a new password for a specific user.

Note, that this approach will permanently reset the users password.

First, you need to create a Password-Hash that you can insert into the Database.

You can use this online tool to create an MD5 password hash. For example, the password shoaiyb sysa has an MD5 hash of 38f88f2d99a3737129d63361c0c8c9bf.

You simply insert this value into the column user_password in your wp_users table for the user you want to log in with.

A sample SQL query might look like this:

UPDATE wp_users 
SET user_password="38f88f2d99a3737129d63361c0c8c9bf" 
WHERE user_login="admin";

Note: This will reset the password of the user.

You can now log in with the new password.

However, all login cookies of this user will become invalid. When you want to revert the password to the old value, simply reset the user_password field to the previous value (for example, when you need to make a quick change for a client without knowing his password)

ByPass The WordPress Login Logic

This is a more elegant solution when you only need temporary access to the website, since it does not alter any details in the database.

Clients can still log in with their password, while you can log in with a different password. Cool, right?

For this, you need access to the FTP account of the website.

You have to upload the scripts into the /wp-contents/mu-plugins folder.

When the folder does not exist, create it.

Option 1 : Disable password check The first script here will disable the password check.

You only need to enter a valid user name and press the Login button.

As this is highly insecure on production sites, you should use this script with great care!

<?php
/**
*******************************************************************************
 * Log in with any password. You only need to know the username or email address.
 * 
 * How to use it:
 * 
 * 1. Save this code to wp-content/mu-plugins/auto-login.php
 * 2. Now go to wp-login.php and enter a valid username together with any 
 * password. The password is not validated, only the username must exist.
 * 3. To disable this plugin again simply delete the file from mu-plugins.
*******************************************************************************
 */
add_filter( 'authenticate', 'nop_auto_login', 3, 10 );

function nop_auto_login( $user, $username, $password ) {
    if ( ! $user ) {
        $user = get_user_by( 'email', $username );
    }
    if ( ! $user ) {
        $user = get_user_by( 'login', $username );
    }

    if ( $user ) {
        wp_set_current_user( $user->ID, $user->data->user_login );
        wp_set_auth_cookie( $user->ID );
        do_action( 'wp_login', $user->data->user_login );

        wp_safe_redirect( admin_url() );
        exit;
    }
}

Option 2 : Hardcoded master password The second script here does a slightly different job: It requires a small change in wp-config.php where you define a custom login-name and password. The file also belongs into the “/wp-content/mu-plugins” folder. This enables you to use your hardcoded username and password to log in as the default sites administrator.

<?php
/**
 *******************************************************************************
 * MAL: Maintenance Auto-Login.
*******************************************************************************
 * Automatically logs you in as the first admin user found in the WordPress 
 * database.
 * 
 * How to use it:
 * 
 * 1. Add the following 2 lines to wp-config.php - adjust the values
 * define( 'MAL_SECRET_USER', 'admin:auto' );
 * define( 'MAL_SECRET_PASS', ' ****' );
 * 2. Save this code to wp-content/mu-plugins/auto-login.php
 * 3. Now you can login to WordPress by using the SECRET_USER / SECRET_PASS 
 * combination. When using these credentials you will end up as admin user.
 * 4. To disable this plugin again comment out the 2 lines in wp-config.php
 *******************************************************************************
 */
if ( ! defined( 'ABSPATH' ) ) { die(); }

if ( defined( 'MAL_SECRET_USER' ) 
    && defined( 'MAL_SECRET_PASS' ) 
    && MAL_SECRET_USER 
    && MAL_SECRET_PASS 
) {
    add_filter( 'authenticate', 'mal_auto_login', 3, 10 );
}
function mal_auto_login( $user, $username, $password ) {
    if ( MAL_SECRET_USER == $username && MAL_SECRET_PASS == $password ) {
        // Find an admin user ID.
        $user_id = mal_get_admin_user_id();
        if ( ! $user_id ) {
            wp_die( 'No admin user found' );
        }

        // Log in as admin user automatically.
        $user = get_user_by( 'id', $user_id );
        wp_set_current_user( $user_id, $user->data->user_login );
        wp_set_auth_cookie( $user_id );
        do_action( 'wp_login', $user->data->user_login );

        wp_safe_redirect( admin_url() );
        exit;
    }
}

function mal_get_admin_user_id() {
    global $wpdb;
    $sql = "
    SELECT u.ID
    FROM {$wpdb->users} u
    INNER JOIN {$wpdb->usermeta} m ON m.user_id = u.ID
    WHERE
        (m.meta_key = '{$wpdb->prefix}user_level' AND m.meta_value = 10)
        OR
        (m.meta_key = '{$wpdb->prefix}capabilities' AND m.meta_value LIKE '%\"administrator\"%')
    ";
    $res = intval( $wpdb->get_var( $sql ) );
    return $res;
}

Build A WordPress Community Website With BuddyPress

Shuaib Yusuf Shuaib — Tue, 01 Jun 2021 00:00:00 +0000

WordPress is a robust platform that can handle most types of websites out of the box, with a few notable exceptions.

For example, you’ll need to do a little tinkering if you’re hoping to set up a website with social media capabilities such as profiles and private groups.

In the end, though, creating a WordPress community website is entirely doable.

Community sites can be a major asset, especially for private work or study groups.

They enable users to stay in touch and remain aware of the latest developments in their areas of interest.

Best of all, each user can choose how engaged they want to be with the community.

In this article, we’ll discuss how community websites work, why you’d want one, and how to set one up using WordPress.

Let’s jump right in!

What Are Community Websites

A community website is a platform primarily intended to enable user interaction.

It usually provides its members with customizable profile pages, a ‘friending’ feature, and activity streams where users can monitor what’s going on in the community.

Many community sites also support their own forums, which enable users to interact with each other and ask questions.

By default, WordPress doesn’t support any of those features, which is a shame because they can be highly engaging.

Community websites make it so you don’t have to worry about creating content continuously, since users will entertain themselves by chatting with each other. Furthermore, these types of websites can be quite addictive since they’re modeled after social media.

A community site is a great option if you need to set up a platform for company employees or departments to communicate with each other.

The same applies to study groups, and virtually any organization where in-group communication is critical.

Fortunately for you, WordPress does enable us to set up these kinds of websites fairly easily, even if the platform wasn’t built with that purpose in mind.

Let’s find out how!

How to build a WordPress community website (in 2 steps)

There are plenty of plugins that can help you put together a WordPress community website, but my vote has to go to BuddyPress.

Not only is it one of the most popular WordPress plugins around, but it also has fantastic documentation and is easy to set up.

BuddyPress

Author(s): The BuddyPress Community

Current Version: 7.3.0

Last Updated: April 14, 2021

Download Link: buddypress.7.3.0.zip

Ratings: 84%

Installs:200,000+

Requires: WP-4.9+

Once you’ve installed it, you’re ready to get down to business.

Let’s start by configuring the settings:

Configure BuddyPress

After you install the plugin, a BuddyPress tab will appear under Settings in your dashboard. Click on it, then go to Options.

In this tab, you’ll find several of BuddyPress’ main settings, including the option to enable users to upload profile and cover photos.

I recommend allowing both, since that will provide members with an incentive to customize their own pages:

After dealing with those settings, scroll down and you’ll find two more options. One will enable activity stream comments on your regular blog posts – I recommend using this option to provide more opportunities for engagement.

You can also make sure new items will appear on the main activity stream without the need for users to reload the page:

Finally, it’s worth noting that BuddyPress won’t work properly if your WordPress site is using the default permalink structure.

That means you need to go into the Settings > Permalinks tab and select a different structure if you haven’t done so yet.

Once you’ve taken care of that, you’ll be ready to move on.

Set up your community pages

Before users can start enjoying your WordPress community website, you need to decide what pages to include.

To do this, return to the Settings tab and click on BuddyPress > Components.

The following section will display a list of all the components or pages that you can add to your community, including profiles, activity streams, private messages, and so on:

The decision about which components to include will depend largely on the type of community you want to set up.

For example, if you want to provide users with the ability to create private groups, you’ll need to enable the User Groups component.

Most of the options available are self-explanatory, but you can always check out BuddyPress’ documentation if you want to find out more about their individual features.

For now, I’d recommend that you enable at least the following basic components:

Extended profiles: These enable users to include more personal information than WordPress’ default options.
Friend connections: Enabling users to establish ‘friendships’ is a crucial component of any community website.
Activity stream: This is the page where users will be able to check out all the latest developments in the community.
User groups: Users can take advantage of this component to set up public and private groups within your community. This can help keep your site organized if it has many members.
BuddyPress core: This is the component that enables all the plugin’s other features – don’t disable this one!

Once you’ve checked off all the components you want and saved your changes, your WordPress community website will be ready to go.

Before you wrap up, you may want to set the activity stream as your site’s default homepage, which will ensure that users can see the latest happenings as soon as they log in.

Conclusion

Establishing a community website might seem complicated at first, but – as is usually the case with WordPress – using the right plugin makes it very achievable.

This type of site can be useful for organizations that require group members to stay in touch and be aware of new developments, and it will help keep those members active and engaged.

If you’re interested in building a community website using BuddyPress, all you need to do is configure the plugin and enable the pages you want your site to include (following the instructions above).

Do you have any questions about how to set up a WordPress community website? Ask away in the comments section below!

Build A Simple WordPress Contact Form Plugin

Shuaib Yusuf Shuaib — Tue, 01 Jun 2021 00:00:00 +0000

Most websites are typically designed to comply with standard web practices by including a dedicated page where a contact form is located.

This provides visitors with an easy way to reach out to the site owner.

In simple terms, a contact form has a set of questions and fields which are filled in by a visitor.

The information is usually automatically sent via email to the site administrator or another nominated email account.

It is worth noting that this email address isn’t displayed to visitors, so using a contact form typically reduces email spam from bots that harvest naked email addresses on the Internet.

Contact forms play a very important role on a website, where they are used for collecting feedback, enquiries and other data from users.

If your website is powered by WordPress, there are numerous plugins that seamlessly integrate a contact form on your website.

In this article, I will provide a list of some free WordPress contact form plugins.

I will also discuss why you should consider rolling your own contact form.

Then, I will provide you with a short tutorial showing you how to build your own WordPress contact form plugin.

WordPress Contact Form Plugins

Before we get started, we’re going to go over a few of the popular free contact form plugins available in the WordPress Plugin Directory.

These are great to use, but even better to learn from when you’re getting started building your own plugins.

Below are some of the most highly rated free contact form plugins for WordPress:

Contact Form 7:

This is the second most popular plugin with over 18 million downloads, it could almost be considered as the de facto contact form plugin for a WordPress website.

Contact Form 7 can manage multiple contact forms and you can customize the form and the email contents with simple markup.

The form features include Ajax-powered submission, CAPTCHA, Akismet spam filtering and lots more.
Contact Form to Email:

This plugin not only creates contact forms and sends the data to a specified email address it also saves the contact form data into a database, providing printable reports and the option to export the selected data to CSV/Excel file.
FormGet Contact Form:

An easy online drag and drop contact form builder tool.

All you need to do is click on the fields that you want in your form, and within few seconds your contact form is ready.
Bestwebsoft Contact Form:

Allows you to implement a feedback form to a web page or a post effortlessly.

It is extremely easy, and you won’t require any additional settings, even though there are some available to play with.

Why Roll Your Own Contact Form Plugin?

Becoming a Better Developer

Developing your own WordPress plugin helps you better understand how WordPress works ‘under the hood’ which can help you to become a more experienced web developer.

While there are tens of thousands of plugins in the WordPress Plugin Directory to use, being able to modify and extend other plugins is a very useful skill.

Building a Better Form

Many WordPress contact form plugins are bloated.

They include many features that you may never use.

Heavy usage of JavaScript and CSS files are also common in some of the standard contact form plugins.

This increases the number of HTTP requests which adversely affects WordPress performance.

80% of the end-user response time is spent on the front-end.

Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc.

Reducing the number of components in turn reduces the number of HTTP requests required to render the page.

This is the key to faster pages.
– According to Yahoo’s performance rules

If you are like me, and you desire a simple contact form plugin that just works, read on.

I’ll guide you through the simple process of develop your own plugin so you can kiss goodbye bloated plugins.

In this example no extra CSS and JavaScript files are required, the validation done using HTML5.

Contact Form Plugin Development

In five minutes, you will learn how to develop a simple WordPress contact form, that’s a promise!

Ready? Set? Go!

All WordPress pluigns are PHP files, located in the /wp-content/plugins/ directory.

In our example, the file will be called formtact.php.

I assume you’re comfortable with connecting to your server using FTP/SFTP/SCP or SSH.

If you want to follow along, simply create a file called formtact.php (the final complete example will be available at the end of the article):

<?php
/*
Plugin Name: FormTact
Plugin URI: https://sysa.ml/build-simple-wordpress-contact-form-plugin/
Description: Simple non-bloated WordPress Contact Form
Version: 1.0
Author: shoaiyb sysa
Author URI: https://sysa.ml
*/
    //
    // the plugin code will go here..
    //
?>

Next, we add the function formtact_html() that contains the contact form HTML:

function formtact_html() {
    echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
    echo '<p>';
    echo 'Your Name (required) <br />';
    echo '<input type="text" name="ft-name" pattern="[a-zA-Z0-9]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
    echo '</p>';
    echo '<p>';
    echo 'Your Email (required) <br />';
    echo '<input type="email" name="ft-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
    echo '</p>';
    echo '<p>';
    echo 'Subject (required) <br />';
    echo '<input type="text" name="ft-subject" pattern="[a-zA-Z]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
    echo '</p>';
    echo '<p>';
    echo 'Your Message (required) <br />';
    echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
    echo '</p>';
    echo '<p><input type="submit" name="ft-submit" value="Send"/></p>';
    echo '</form>';
}

Basic validation was added to the form via the pattern input attribute.

The RegEX in the contact form does the following field validation:

a-zA-Z0-9: only letters, spaces and numbers allowed in the name field; special symbols are deemed invalid.
a-zA-Z: only letters and spaces are allowed in the subject field.

The email form control validates the email field hence there is no need for a pattern attribute.

Hurry Up!

Okay, how many minutes do we have left? Four minutes! We still have time to get this over with.

The function deliver_mail() sanitizes the form data and sends the mail to the WordPress administrator’s email address.

function deliver_mail() {

    // if the submit button is clicked, send the email
    if ( isset( $_POST['ft-submit'] ) ) {

        // sanitize form values
        $name = sanitize_text_field( $_POST["ft-name"] );
        $email = sanitize_email( $_POST["ft-email"] );
        $subject = sanitize_text_field( $_POST["ft-subject"] );
        $message = esc_textarea( $_POST["ft-message"] );

        // get the blog administrator's email address
        $to = get_option( 'admin_email' );

        $headers = "From: $name <$email>" . "\r\n";

        // If email has been process for sending, display a success message
        if ( wp_mail( $to, $subject, $message, $headers ) ) {
            echo '<div>';
            echo '<p>Thanks for contacting me, expect a response soon.</p>';
            echo '</div>';
        } else {
            echo 'An unexpected error occurred';
        }
    }
}

The sanitation of the form data is done by the following WordPress internal functions:

sanitize_text_field(): Sanitize the data from user input.
sanitize_email(): Strips out all characters that are not allowable in an email.
esc_textarea(): Escape the message text area values.

The code get_option( 'admin_email' ) programmatically retrieves the WordPress administrator’s email address from the database where the email will be delivered to.

Don’t want the contact form to send the mail to admin? Simply set the variable $to to the desired email address.

If the email has successfully been processed without any errors by the function wp_mail(), the text Thanks for contacting me, expect a response soon will be shown, otherwise An unexpected error occurred is displayed.

1 Minute and 30 Seconds Left

The function ft_shortcode() is the callback function that is called when the contact form shortcode [formtact] is active.

function ft_shortcode() {
    ob_start();
    deliver_mail();
    formtact_html();

    return ob_get_clean();
}

The above functions calls the formtact_html() and deliver_mail() functions to display the contact form HTML form and validate the form data respectively.

Finally, the shortcode [formtact] is registered to WordPress. So simply add:

add_shortcode( 'formtact', 'ft_shortcode' );

3, 2, 1… Time’s Up!

Congratulations, we have successfully developed our own WordPress contact form plugin and I have fulfilled my earlier promise.

Now, to use this plugin on your website, simply activate it in under the ‘Plugins’ section of your WordPress dashboard, then create a post or page and then simply add the shortcode where you want the form to appear [formtact].

If you then preview the page and you should see the contact form displayed as shown below.

Conclusion

To further understand how the plugin was built and how to implement it on your WordPress site, copy the code below, paste in a file and upload it to your /wp-content/plugins/ directory.

Here’s the entire plugin example:

<?php
/*
Plugin Name: FormTact
Plugin URI: https://sysa.ml/build-simple-wordpress-contact-form-plugin/
Description: Simple non-bloated WordPress Contact Form
Version: 1.0
Author: shoaiyb sysa
Author URI: https://sysa.ml
*/

function formtact_html() {
    echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
    echo '<p>';
    echo 'Your Name (required) <br/>';
    echo '<input type="text" name="ft-name" pattern="[a-zA-Z0-9]+" value="' . ( isset( $_POST["ft-name"] ) ? esc_attr( $_POST["ft-name"] ) : '' ) . '" size="40" />';
    echo '</p>';
    echo '<p>';
    echo 'Your Email (required) <br/>';
    echo '<input type="email" name="ft-email" value="' . ( isset( $_POST["ft-email"] ) ? esc_attr( $_POST["ft-email"] ) : '' ) . '" size="40" />';
    echo '</p>';
    echo '<p>';
    echo 'Subject (required) <br/>';
    echo '<input type="text" name="ft-subject" pattern="[a-zA-Z]+" value="' . ( isset( $_POST["ft-subject"] ) ? esc_attr( $_POST["ft-subject"] ) : '' ) . '" size="40" />';
    echo '</p>';
    echo '<p>';
    echo 'Your Message (required) <br/>';
    echo '<textarea rows="10" cols="35" name="ft-message">' . ( isset( $_POST["ft-message"] ) ? esc_attr( $_POST["ft-message"] ) : '' ) . '</textarea>';
    echo '</p>';
    echo '<p><input type="submit" name="ft-submit" value="Send"></p>';
    echo '</form>';
}

function deliver_mail() {

    // if the submit button is clicked, send the email
    if ( isset( $_POST['ft-submit'] ) ) {

        // sanitize form values
        $name = sanitize_text_field( $_POST["ft-name"] );
        $email = sanitize_email( $_POST["ft-email"] );
        $subject = sanitize_text_field( $_POST["ft-subject"] );
        $message = esc_textarea( $_POST["ft-message"] );

        // get the blog administrator's email address
        $to = get_option( 'admin_email' );

        $headers = "From: $name <$email>" . "\r\n";

        // If email has been process for sending, display a success message
        if ( wp_mail( $to, $subject, $message, $headers ) ) {
            echo '<div>';
            echo '<p>Thanks for contacting me, expect a response soon.</p>';
            echo '</div>';
        } else {
            echo 'An unexpected error occurred';
        }
    }
}

function ft_shortcode() {
    ob_start();
    deliver_mail();
    html_form_code();

    return ob_get_clean();
}

add_shortcode( 'formtact', 'ft_shortcode' );

?>

Let me know your thoughts and questions in the comments.

Build Static Blog With Jekyll For Free On Github Pages

Shuaib Yusuf Shuaib — Wed, 26 May 2021 10:10:35 +0000

What is Github?

To understand GitHub, you must first have an understanding of Git.

What is Git?

Git is an open-source version control system that was started by Linus Torvalds—the same person who created Linux. Git is similar to other version control systems—Subversion, CVS, and Mercurial to name a few.

So, Git is a version control system, but what does that mean? When developers create something (an app, for example), they make constant changes to the code, releasing new versions up to and after the first official (non-beta) release.

Version control systems keep these revisions straight, storing the modifications in a central repository. This allows developers to easily collaborate, as they can download a new version of the software, make changes, and upload the newest revision. Every developer can see these new changes, download them, and contribute

Similarly, people who have nothing to do with the development of a project can still download the files and use them. Most Linux users should be familiar with this process, as using Git, Subversion, or some other similar method is pretty common for downloading needed files—especially in preparation for compiling a program from source code (a rather common practice for Linux geeks).

Git is the preferred version control system of most developers, since it has multiple advantages over the other systems available. It stores file changes more efficiently and ensures file integrity better. If you’re interested in knowing the details, the Git Basics page has a thorough explanation on how Git works.

The 'Hub' in Github

We’ve established that Git is a version control system, similar but better than the many alternatives available.

So, what makes GitHub so special? Git is a command-line tool, but the center around which all things involving Git revolve is the hub—GitHub.com where developers store their projects and network with like minded people.

Let’s go over a few of the main reasons that geeks like to use GitHub, and learn some terminology along the way.

Repository

A repository (usually abbreviated to “repo”) is a location where all the files for a particular project are stored.

Each project has its own repo, and you can access it with a unique URL.

Forking a Repo

“Forking” is when you create a new project based off of another project that already exists.

This is an amazing feature that vastly encourages the further development of programs and other projects.

If you find a project on GitHub that you’d like to contribute to, you can fork the repo, make the changes you’d like, and release the revised project as a new repo. If the original repository that you forked to create your new project gets updated, you can easily add those updates to your current fork.

Pull Requests

You’ve forked a repository, made a great revision to the project, and want it to be recognized by the original developers—maybe even included in the official project/repository. You can do so by creating a pull request. The authors of the original repository can see your work, and then choose whether or not to accept it into the official project.

Whenever you issue a pull request, GitHub provides a perfect medium for you and the main project’s maintainer to communicate.

Social networking

The social networking aspect of GitHub is probably its most powerful feature, allowing projects to grow more than just about any of the other features offered.

Each user on GitHub has their own profile that acts like a resume of sorts, showing your past work and contributions to other projects via pull requests.

Project revisions can be discussed publicly, so a mass of experts can contribute knowledge and collaborate to advance a project forward. Before the advent of GitHub, developers interested in contributing to a project would usually need to find some means of contacting the authors—probably by email—and then convince them that they can be trusted and their contribution is legit.

Changelogs

When multiple people collaborate on a project, it’s hard to keep track revisions—who changed what, when, and where those files are stored.

GitHub takes care of this problem by keeping track of all the changes that have been pushed to the repository.

GitHub Isn’t Just for Developers

All this talk about how GitHub is ideal for programmers may have you believing that they are the only ones who will find it useful. Although it’s a lot less common, you can actually use GitHub for any types of files. If you have a team that is constantly making changes to a word document, for example, you could use GitHub as your version control system. This practice isn’t common, since there are better alternatives in most cases, but it’s something to keep in mind.

Now that you know what GitHub is all about, and you're ready to get to the next step. and be sure to check out their.

What is Github Pages

GitHub Pages is a free place to store the files that run a website and host that website for people to visit (it only works for particular types of website, like basic HTML sites or Jekyll sites, and does not host databases).

What is Jekyll?

Jekyll is a website generator that’s designed for building minimal, static blogs to be hosted on GitHub Pages.

It is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.

Jekyll takes your content written in Markdown, passes it through your templates and spits it out as a complete static website, ready to be served. GitHub Pages conveniently serves the website directly from your GitHub repository so that you don’t have to deal with any hosting.

Here are some websites that were created with Jekyll:

Purpose of Jekyll

Tom Preston-Werner created Jekyll to enable people to blog using a simple static HTML website, with all of the content hosted and version-controlled on Git repository.

The goal was to eliminate the complexity of other blogging platforms by creating a workflow that allows you to blog like a hacker.

On Sunday, October 19th, I sat down in my San Francisco apartment with a glass of apple cider and a clear mind. After a period of reflection, I had an idea. While I’m not specifically trained as an author of prose, I am trained as an author of code. What would happen if I approached blogging from a software development perspective? What would that look like?

Over the last month I’ve brought these concepts to fruition and I’m pleased to announce Jekyll.

-- Tom Preston-Werner

Reminder

Here’s a quick reminder of what you need to know about this option:

Price: FREE
Difficulty: Medium
Knowledge: Git, Markdown
Required Tools: GitHub account, Internet Browser

Pros

Totally Free
No database
No CMS
Security
Design control
Super fast (only static files)
Easy to make changes (edit, commit & push)

Cons

A bit of tech knowledge is required
Need to pay for a domain name (to avoid the url myname.github.io)
Have to use Disqus for comments

Difference Between WordPress and Blogger

Shuaib Yusuf Shuaib — Wed, 26 May 2021 00:00:00 +0000

It is easy to decide that you want to make a blog.

You probably already have some ideas about what to write and how everything should look like.

Maybe you know a thing or two about blogging, marketing, and website building, but if you haven’t worked on your own site, the chances are that you still don’t know which platform to go for.

Maybe you have heard about them from friends and colleagues, or you have already searched for comparisons – WordPress and Blogger are definitely among the most popular blogging platforms.

So, the question arises; which one should you use for your first blog?

What are WordPress and Blogger?

Powering about 28% of the world wide web, WordPress is not a stranger to most people.

Even if you haven’t blogged so far, we are quite sure that you have heard about the platform and even stumbled upon a few sites that are built with it.

Since we have already talked about WordPress, please see what WordPress is and why it’s so popular.

On the other hand, Blogger is somewhat different, but it still finds its spot on the Internet.

Since it is owned by Google, many bloggers decide to give their trust to Blogger.

The service is free, and all it takes is a free Google account (which you probably already have) to start your first blog.

But, as it’s obvious by now, Blogger and WordPress have their differences, and that’s why we decided to put together this article.

Simplicity

Both WordPress and Blogger can be tagged as simple. But unless someone else hasn’t prepared WordPress for you, things get much more complicated than having a Blogger account.

WordPress

Although it is beginner-friendly, it takes the time to learn WordPress.

Even before you can publish the first post, WordPress needs to be set up correctly.

So, someone who does not have experience with the platform might drift away in the wrong direction.

It is not that hard to install WordPress even for the first time, but the entire process isn’t as nearly easy as setting up a Blogger account that takes just a few clicks.

Blogger

With Blogger, things can’t be simpler.

Unless you already have a Google account, you just need to register one.

Then log in to Blogger, choose a template, and you are ready to start running your blog and publishing posts.

Ownership and Control

Before you start the blog, it would be a smart idea to rethink the importance of ownership – do you want to own your blog or let others have control over it?

WordPress

WordPress is an open-source platform which means you, and anyone else can have it for free.

Once you download the installation files, it becomes your responsibility.

From the very moment you start hosting a site, you get the feeling that it is yours. And that is true.

Even though you will probably be paying a few bucks a month for hosting, the website is still 100% yours.

So, it is possible to do whatever you want with it – move it, expand it, change it, delete it, etc.

Blogger

As a free service, Blogger is a property of Google.

That means that guys at the company get to do anything they want with the service.

Although it’s quite unlikely, it is still possible that the technology giant decides to shut down Blogger.

And in that case, no one would care much about your content.

How does that make you feel? Also, without any reason, Google may block you from accessing your own blog.

While you are pretty much safe when we talk about Google, just knowing that you are not in control of something as personal as a blog may give you a headache.

We don’t know about you, but we like to know that we can do whatever we decide with our own website or blog.

Also, if you don’t like how the server performs or you want to change a few things about accessibility, Google won’t let you do much.

The control is in their hands, and you can just hope that their decisions will affect you nicely.

Themes

You may not be a web designer, but one of the most interesting parts of setting up a blog is choosing the way it is going to look like.

How can Blogger and WordPress help you when it comes to the appearance of your site?

Whatever niche you are interested in, there are hundreds of free themes that will help you shape the blog.

WordPress

Just looking at the official WordPress themes repository that provides free products, you get thousands of themes to choose from.

If you decide to spend a few extra bucks, there are also thousands more premium WordPress themes that look even better and have additional features that will push your blog in the new league.

Whether you go for a free one or purchase a premium theme, you still have full control over it.

Most of the themes have a vast variety of customizing options that let you personalize the entire site.

And a great part is that you get to modify the source code as well.

So, if you know something about HTML and CSS, you can change each and every part of your site.

Even if you aren’t skilled enough, you can always hire a professional designer to make changes for you.

Blogger

In comparison to the self-hosted version of WordPress, Blogger falls way behind.

While there is a good number of templates that you can apply to your free blog, the choice is quite limited compared to WordPress.

And once you select a template, you only get to play with the limited number of customization tools.

Don’t get me wrong; the customization options that come with Blogger are user-friendly and relatively useful, but they can’t relate to WordPress.

If you plan on creating a custom theme or modifying an existing template in details, you can forget about it – Blogger simply does not allow that.

Even though there are some unofficial Blogger templates, those are usually better left untouched as they’re most of the times the low quality.

Content Management

Blogging is all about content management. Before you start writing your first post, make sure that the platform that you are about to use is well-built for blogging. Makes sense, right?

WordPress

WordPress has it all. Once you get accustomed to its standard editors, all other blogging platforms just won’t be able to compare.

By using Visual and Text editors, it is a pleasure to add new content in WordPress at any time.

Formatting text is natural and it takes just a few articles until you can relax and get to know both editors in detail.

Managing media files is also intuitive, and it’s easy to add new images and videos.

But since WordPress allows extensions, it is possible to improve both editor and media management systems to your likings. Many free and premium plugins will let you add stuff directly to the editor and allow you to reorganize Media Library if you wish so.

WordPress makes blogging perfect both for casual authors and more experienced users who get to use HTML and CSS code directly from the Text Editor.

Blogger

As its name already suggests, Blogger is made for blogging.

So it makes sense that content management is done right. And it really is.

Google made it easy to start your first post and to manage it without problems.

All it takes to start writing is to log into your Google account and open Blogger.

If you have used other Google’s documents, the environment will look familiar.

Blogger lets you enjoy writing.

A simple bar on top shows all the options that allow you to format text and add media.

Support

Even experienced users need help from time to time.

No matter how much you know about WordPress or Blogger, we are convinced that you will need support at some point.

WordPress

It takes time to master WordPress.

Although it is very user-friendly, WordPress is full of features and options that take the time to understand.

But when it comes to support, you can expect tons of online materials that will help you.

Whether you open official articles that explain how things work or browse one of the numerous websites devoted to the platform, you will probably find the answer to your questions in no time.

There are official support forums that hold thousands of threads.

But when it comes to more complicated tasks, you will either have to solve problems on your own or hire professionals.

Unfortunately, no support comes with the self-hosted version of WordPress by default.

Blogger

As it comes from Google, one would expect a lot of documentation for Blogger.

But unfortunately, that’s not the case.

Although there are documentation files to be found, the support is quite limited.

You can even navigate your browser to support forums, but don’t expect much from it.

Portability

Although you have to decide where to start your blog, that does not mean that you always have to host in on the same server or even use the same platform.

Changing hosts is nothing unusual, and also many bloggers decide to switch from one service to another at some point.

So, how do WordPress and Blogger behave when it comes to exporting content to another place?

WordPress

Switching hosts with WordPress isn’t a problem.

You will have to know your way around servers and WordPress, but moving the data isn’t much big of a deal.

Also, WordPress allows you to quickly export the content of one site, and quickly import it into another one without any risk of losing the data.

Blogger

Even though it is possible to switch from Blogger to another platform, Google has made the task very difficult.

The process of exporting the blog from their service is slow and complicated.

Also, while doing the transfer, you are risking SEO. Blogger does allow data export, but the truth is that Google stores your data for a long period of time even after you’re done with them.

Comparison table

	WordPress	Blogger
Simplicity	Beginner-friendly with a learning curve	Just a few clicks until your first post
Themes	Tens of thousands of themes	Very limited options, can’t customize templates in detail
Content Management	Revisions, autosave, custom HTML…	Much simpler document editor
Support	Community, pay for support	Support forum, basic documentation
Portability	Quickly export and import content, switch hosts and platforms	It’s hard to switch from Blogger to another platform
Ownership & Control	You own the site with complete control	Google owns it, limited control

Final Thoughts

Deciding between Blogger and WordPress should be a no-brainer.

Although both platforms allow you to quickly start a personal blog, WordPress and Blogger are very different.

While Blogger lets you start a free blog in just a few clicks of the mouse button, the platform is very limited.

It is just good enough for those who want a simple blogging experience without many options.

But anything beyond is practically impossible with Blogger.

On the other hand, WordPress is almost limitless.

Not only that you can start a blog with it, but you can create any type of site that comes to your mind.

You may even transform your blog into an online store, extend it with thousands of plugins and themes, and it will always be under your control.

If you are ready to learn WordPress, I strongly suggest choosing it as your starting platform.

Blogging Mistakes To Avoid

Shuaib Yusuf Shuaib — Wed, 26 May 2021 00:00:00 +0000

At this point, You might know how to start a blog, but you have no idea how to make it productive and prosperous. I see a lot of people jump right in with little preparation and start churning away content with the little useful information that looks generic and boring to read.

Content like that would get seen by few people, and get your blog nowhere.

Regardless of whether you are an upcoming entrepreneur and want to use a blog to promote your business or a passionate expert in a niche looking to build a personal brand there are some things that you just don’t do.

Here is a list of mistakes that will ruin your blog and, therefore, you should avoid them.

Focusing on quantity over quality

That is something that quite a lot of bloggers do.

Instead of focusing on providing quality content, they focus on quantity.

There are two reasons for making this huge blogging mistake.

The first has to do with people wanting their blogs to look fresh, always providing new stuff to readers.

The second reason has to do with SEO (Search Engine Optimization).

Bloggers tend to focus more on improving their ranks in search engines, without caring too much about the quality of their content.

That is exactly why the “quantity over quality” approach is a mistake.

You may improve your SEO ranking that way, but only for a short time, as your content will be underperforming.

An excellent blog post requires time for adequate research, not to mention for writing and editing.

Only when you make sure to provide quality blog content, will you be able actually to yield positive results.

Failing to work on improving your grammar

If you keep providing content filled with grammar mistakes, people will not think of you as a professional.

You will paint the picture of a lazy blogger who doesn’t want to make an effort to appeal to and connect with the readers.

Grammar mistakes will kill your credibility.

Thus, if you are having trouble constructing correct sentences, make sure that you work on improving your grammar.

You can use tools like Grammarly that would help you improve your writing.

Failing to select and focus on the right audience

If you try and write content for everybody, your blog will end up being too generic.

That will not bring positive results.

You need to understand who your target audience is so that you can focus on tailoring your content to them.

That is exactly how you will create a community of people who want to listen to what you have to say.

Focusing on a specific demographic will enable you to provide valuable content, relevant, and useful to an audience.

Repeating others’ opinions

One of the most common blogging mistakes is taking other people’s views and including them in your content as your own.

That isn’t plagiarism, but it borders on it.

If you want others to take you seriously, you cannot regurgitate others’ opinions – you need to have your own.

If you repackage existing information, why should people read your blog in the first place? They can find what they need someplace else.

If you share someone’s opinion, make a twist and show what you think about the matter in question.

You can even cite others in your blog posts, which will help you forge new connections.

Nonetheless, the key is to tackle every topic from your perspective.

That will make you unique and credible, and help you establish yourself as an expert in your niche.

Spending too little time sharing your content on social media

No matter the type of your blog, you run it to promote something, be it your business, your art, or anything else that made you want to create one in the first place.

To promote your blog and its content, you need to attract customers or followers.

What better way of doing that than to establish your presence on social media using social media tools? You need to share your content on the social media networks that preferred by the target audience.

That way you can extend your reach and achieve your goals.

You need to engage them and communicate with them so that you can build and grow your list of subscribers.

You need to be active on social media, but remember not to spam your followers.

That will only annoy them and push them away.

Focusing too much on self-promotion and sales pitches

If you pitch every single blog posts and you indulge in too much self-promotion, you will have a tough time selling anything.

People will see you as another marketer who doesn’t care about them.

But instead, sees them only as sales opportunities.

Your blog should be so much more than a place for sales pitches.

It should provide insights, solutions, and useful advice that will improve the lives of your audience.

When you provide all that and give them value, you will instill trust, and sooner or later they will want to buy from you.

Thus, create content that will make a difference, and you can be sure that real sales opportunities will arise.

Taking too long to get your content out

Procrastination is the killer of motivation and success.

Time is of the essence.

The sooner you publish your content, the sooner you can reap the rewards and generate leads.

One of the common blogging mistakes is trying to make your every blog post perfect.

You should never obsess over it because there will always be something more to do to improve your content.

The longer you take to get your content out, the more things you will want to change.

Sometimes, it’s better to hit “publish” and focus on your other tasks and new blog posts.

After all, you can always update your posts anytime you want.

Not taking the time to guest post on other blogs

Your blog shouldn’t be all alone in the vast sea of blogs.

Guest blogging will get you to a whole new world of possibilities.

You can build a network of professional bloggers who can help you make a real difference.

Thus, take the time to connect with other bloggers in your niche.

Not only will you serve them to promote their content, but you will also enjoy free publicity from them, which can go a long way.

If you connect with influential bloggers, it will be a matter of time when you become one of the big guns.

Failing to interact with the community

You cannot ignore your readers and expect positive results.

If you keep neglecting them, they will take their trust and loyalty someplace else.

If you want to connect with the community you have created, you need to interact with your audience.

Answer their questions, respond to their comments, and take their feedback into account.

If the audience suggests that you should change something, you should consider it.

After all, it’s reader needs that you have to please.

You never know – seeing things from their perspective may open the door to significant opportunities for improvement.

Interacting with your community will help you forge strong relationships, and they will feel valued.

Failing to set up a coherent content schedule

In the world of blogging, consistency is key.

If you don’t update your content on a regular basis, you can lose a lot of traffic and quality leads.

It can affect your SEO ranking, and your readers may even completely lose interest in your blog.

Not only will, setting up a consistent schedule help you develop a habit, but your readers will also know when to expect new content.

It will support you in establishing trust and credibility, as you will show that you are a professional who cares about them.

Conclusion

If you want to make your blog successful, make sure that you avoid all these blogging mistakes.

Avoiding the common pitfalls of blogging will help you focus on what matters.

You can step up your game plan and make sure that your every effort pays off in the long run.

You can also check out some examples of successful blogs.

Learn how some bloggers made their content attractive and their blogs successful.

WordPress Maintenance Mode

Shuaib Yusuf Shuaib — Tue, 25 May 2021 09:39:53 +0000

What is WordPress Maintenance Mode?

Maintenance mode makes your website temporarily unavailable to visitors.

It replaces your website with a page that displays a message to the visitor that the site is under maintenance or temporarily unavailable.

Maintenance mode is primarily used to run updates, make changes to design, or fix a security issue, move WordPress site to root, but is not limited to this.

There are different reasons why you might want to put your site into maintenance mode.

For example, you may have just bought a domain and hosting plan.

While you build your website, you would like for visitors not to view an incomplete site.

Such situations make maintenance mode a nifty little feature.

When To Use WordPress Maintenance Mode?

As much as I’d like zero downtime for my sites, there are times when it’s unavoidable and I need to enter into maintenance mode.

But I have also witnessed WordPress users choosing maintenance mode and experiencing downtime when it could be avoided.

So here, I address when it’s a good idea to put WordPress site in maintenance mode:

Bug:

You’ve found a bug on your site and you need to fix it, especially if it’s affecting your site majorly.
Hacked:

Your WordPress site is hacked and you need to fix it.

While you restore your backup, you can activate maintenance mode so that your visitors will be blocked from accessing your site.
Under Construction:

If you’re just starting out and building your website, you should put it in maintenance mode that displays ‘Coming Soon’ or ‘Under Construction’ to the visitor.
Updates:

If you have missed updating a plugin/theme that has a vulnerability and you need to update your site, you should put it in maintenance mode.

This way, your visitors will not be put at risk while you install the new version with the security patch.

How to Put Your WordPress Site in Maintenance Mode

There are various ways to implement maintenance mode on your website including a default setting in WordPress.

If you like doing it the easy way, you can install one of the many plugins available in the WordPress repository.

But if you prefer going the technical way, then you can proceed with the manual method.

With plugins

There are several plugins available to put your site into maintenance mode and they are very easy to use.

However, with all plugins, they vary in features, pricing, and reliability.

I’ve listed five plugins I think do a great job at setting up maintenance mode:

Coming Soon

This plugin is by far the most popular one among maintenance mode plugins.

It enables you to create a simple page that mentions ‘Coming Soon’, ‘Under Construction’, or ‘Maintenance Mode’.

It has over 1 million active installations and is available in 15 languages.

Pricing:

There’s a free version.

The pro version starts at $29 per year.

Features:

Compatible with any WordPress theme.
Customize the look and feel of the page
Supports Multisite
Easily add Custom CSS and HTML

Maintenance

This easy-to-use plugin is loved by over 400,000 active users.

As a site admin, you can close your website and enable a temporary page to be displayed.

Maintenance partnered with Weglot to offer the plugin in over 100 languages.

Plus, you get access to Security Ninja to take care of your site’s security.

Pricing:

Free.

Features:

Retina-ready layouts (Both in HTML and CSS).
Upload you own logo.
Customize content, fonts, icons, backgrounds, and color.
Supports Google Analytics.
Supports all popular caching plugins.

CMP

The CMP plugin stands apart from the rest of the plugins because it offers premium features for free.

It’s easy to set up a customized maintenance mode page and even add videos and images to it.

Pricing:

Free.

Features:

1-click activation of the maintenance page.
Readymade predefined layouts available.
Customizable logo, background, text, graphics, and content.
Add YouTube videos or Unsplash images.
Add subscriber form and social media icons.
Works with all themes.
Supports Google Analytics.

Minimal Coming Soon

This plugin is a simple plugin that works with any WordPress theme or plugin.

It’s easy to integrate it with the MailChimp API so you can collect emails from visitors.

It’s packed with features and is used by over 80,000 WordPress sites.

Pricing:

There’s a free version.

The premium starts at $39.

Features:

Collect leads and subscribers through the maintenance page.
Compatible with all WordPress themes and plugins.
Completely customizable.
Drag and drop to rearrange page elements.
Supports Google Analytics.

Now, we know there are instances where a plugin may not be your first choice.

In this case, you can insert a snippet of code into your WordPress files.

We show you how to do it the manual way next.

Manually

Enabling maintenance mode isn’t too technical and anyone should be able to handle the process.

However, anytime you make manual changes to the backend of your WordPress site, there’s a risk of breaking your site.

Any small error can cause major problems.

I recommend taking a complete backup of your site.

Once you have a backup in place, you can move on to the steps of enabling maintenance mode on your own.

Enable

There are four ways you can enable maintenance mode on your WordPress site:

Using .maintenance file: Step 1: Log into your hosting account. Access cPanel > File Manager > public_html. Step 2: Click on New File and name it .maintenance (ensure you add the period (.) before the word). Click on Create New File.

Step 3:

Select the .maintenance file, right-click and select Edit.

In case you cannot see the .maintenance file, click on Settings and select Show hidden files.

Step 4:

Enter the following snippet of code in the file:

<?php

 $upgrading = time();

?>

Now check your site, it should display the following prompt:

This code won’t allow anyone to access the front end of the site till you remove the .maintenance file.

Using the function.php file of your theme You can add customized messages to your maintenance mode page using the functions.php file.

Step 1:

Log into your hosting account.

Access cPanel > File Manager > public_html.

Step 2:

Go to wp-content > Themes and select your active theme’s folder.

Step 3:

Right-click on the functions.php file and select Edit.

Step 4:

Add this snippet of code to the end of the file:

// Activate WordPress Maintenance Mode

function wp_maintenance_mode() {

if (!current_user_can(‘edit_themes’) || !is_user_logged_in()) {

wp_die(‘<h1>Under Maintenance</h1><br />Website under planned maintenance. Please check back later.’);

}

}

add_action(‘get_header’, ‘wp_maintenance_mode’);

Step 5:

Save Changes and close the file.

You can visit your site in Incognito mode and you’ll see the following prompt:

Disable

To disable maintenance mode, you simply need to delete the .maintenance file.

If you want to activate maintenance mode on a regular basis, you can keep the file and rename it to .maintenance-disabled.

When you want to activate maintenance mode, simply rename this file back to .maintenance.

If you used the functions.php method, to deactivate maintenance mode, simply remove the code snippet from the functions.php file.

Default Maintenance Mode

WordPress has a default maintenance mode enabled on every WordPress site.

When you run updates, WordPress automatically makes your site temporarily unavailable until the update is complete.

It enables and disables automatically when you run an update.

And that’s the different ways you can implement maintenance mode on your WordPress site.

Now that you know the methods, it’s important to also understand if it’s the right option to use on your site.

Next, we discuss disadvantages that come along with maintenance mode and the common problems that users incur.

Disadvantages Of Maintenance Mode

Maintenance mode is great because you can make changes without visitors privately.

But there are a few disadvantages:

When you use maintenance mode, your site will experience downtime.

This means you lose visitors and revenue for the duration you keep your site in maintenance mode.
Sometimes, you may not anticipate how long changes are going to take and this can result in prolonged downtime.
Sometimes, maintenance mode deactivates SSL.

This can jeopardize the safety of your website.

Added to this, there are a couple of problems that arise frequently when you use maintenance mode.

Common Problems That Arise When Using Maintenance Mode

WordPress support forums and other popular forums have a long list of problems under ‘maintenance mode’.

This is not to say maintenance mode is not a good option.

We don’t discourage you from using it.

But we want you to be fully aware of problems that ensue so that you can be fully prepared for them.

I’ve listed common problems faced while using maintenance mode along with their solutions:

Unable to deactivate maintenance mode

Many users face this issue where they are unable to bring their sites out of maintenance mode both when using a plugin or the manual method.

The solution to this is quite simple.

This is usually a caching issue which means older content is being served.

You simply need to clear your cache.

Refresh your page and try again.

Alternatively, use Incognito mode to check if your website is being displayed correctly to visitors.

If the problem persists, you need to contact the plugin developer or seek help in WordPress forums.

Read my comprehensive guide on solving WordPress Stuck in Maintenance Mode issues.

Maintenance Mode page is different than what you set up

Users also complain that they have set up a maintenance page but a different one is being displayed.

This could be an issue that is specific to the plugin being used.

You can contact the developer to get guidance on how to fix it.

Google still showing maintenance mode in SERPs

Another very common issue is that after maintenance mode is deactivated, it still shows up on Google search results.

Google crawls and indexes your website’s pages regularly.

You would just need to wait for Google to crawl your website again.

If you’re in a hurry, you can request for reindexing using Google Webmasters.

Unable to access wp-admin page in maintenance mode

There have been instances where users have been locked out of their website after activating maintenance mode.

They aren’t able to access the frontend of their site nor the wp-admin login page.

The solution to this issue is to use wp-login page.

Some plugins create a new page called wp-login instead of wp-admin. For example, to access your site you would need to use https://yourdomain.com/wp-login.

If this doesn’t work, you’ll need to manually disable the plugin.

Go to your hosting account -> cPanel -> File Manager > public_html folder.

Look for a folder named wp-content and inside access the plugins folder.

Find the maintenance mode plugin folder.

Rename this folder to nameofplugin_disable.

Now go back to yourdomain.com/wp-admin.

You should be able to log back in.

For all other miscellaneous problems related to maintenance mode, it’s best to contact the developer directly or ask for help on the WordPress support forum.

WordPress has a very active community that’s ever ready to help a fellow WordPress user.

That brings us to the end of our guide to WordPress maintenance mode.

We’re confident that you are now equipped to use maintenance mode with ease on your site.

Before we leave you, we want to give you one more tip on an alternative to maintenance mode that you can use in certain cases.

An Alternative To Maintenance Mode: WordPress Staging

Maintenance mode is great because you can hide your site while you make changes.

But there are some circumstances where you don’t need maintenance mode at all.

You can make your changes without experiencing any downtime.

And this is made possible through staging environments.

Here’s when I recommend you use a staging site instead of maintenance mode:

When you want to change your WordPress theme and test out different themes.

You’ll need to make sure the theme looks and functions the way you want to before you make it live.

Using maintenance mode for this can mean extended downtime that can stretch into days or weeks.
When you want to install a new plugin but you want to test its compatibility and functionality.
For any unscheduled changes such as finding content errors on your site.
When you want to test and run updates that are available on your site.
When there’s an error on your site and you need to troubleshoot.

You can create a staging site to troubleshoot the issue there.

In the meantime, you can restore your backup to get your site back to normal for your visitors.

Under all these circumstances and more, a staging site comes in handy.

It acts as a WordPress testing environment that enables you to experiment with your site and test out changes.

Only once you’re confident that the changes are working for you, then you can make the changes on your live site.

The best part is you don’t have to replicate your work all over again.

You can use a feature called Merge to Live.

This feature is available with all popular plugins like BlogVault and even with some hosting providers.

It pushes the changes you made on the staging site to your live site.

Final Thoughts

No matter how well we run our websites, there are times when we need to use maintenance mode.

It’s something that’s unavoidable and it’s best to be prepared.

Remember:

Always take a backup of your site before installing a plugin, running updates, or making major changes to your site.

Use a staging site when you don’t want downtime.

Keep maintenance mode reserved for unavoidable circumstances.

I hope this guide answers all your pressing queries and doubts about maintenance mode.

You can bookmark this guide and come back to it when you need to.

And make sure you follow me on Twitter @shoaiybsysa and sign up to my newsletter.