DEV Community: Muhammad Shoaib

How to Include JavaScript and CSS Stylesheets in WordPress?

Muhammad Shoaib — Mon, 13 Jul 2020 08:34:21 +0000

Are you facing trouble incorporating JavaScript and CSS Stylesheets on your WordPress website? If yes, then you have come to the right place. We are presenting a step-by-step guide to walk you through the process of including JavaScript and CSS Stylesheets into your WordPress correctly.

Additionally, our article provides plenty of examples that will make the process easy! Our guide is particularly useful for those who are WordPress beginners or self-taught WordPress coders. Before we walk you through the process, we would like to highlight some common mistakes that people make when coding in WordPress.

Common Mistakes Made When Adding A Script In WordPress
One of the most common mistakes that developers make when coding for stylesheets is that they add the scripts directly into the WordPress plugins and themes. Some even use the wp_head function to load their stylesheets, which is not suitable at all in this case.

This function might create conflicts as you try to integrate more themes and plugins into your WordPress. The wp_head function used in this context will most likely cause your WordPress site to slow down, and the performance to deteriorate as well.

Let’s look at the right way to include JavaScript and CSS stylesheets in WordPress.

Why Enqueue Scripts And Styles In WordPress?

If you have been working on WordPress for a while, you should know that enqueuing the javascript and CSS code is the correct approach. The enqueuing system provides a way to load JavaScript and CSS stylesheets in a programmable way. By using the two functions mentioned below, you can direct WordPress on details regarding which file to load, when to load it and where to load it along with its dependencies.

wp_enqueue_script function
wp_enqueue_style function

Moreover, you may also use the built-in WordPress libraries that enable JavaScript through this tool. This will save you the hassle of going loading a third-party script repeatedly onto your system, which may result in conflicts as well.

How To Enqueue Scripts In WordPress?

You will need to understand the “wp_enqueue_script” function before you can get to loading stylesheets. Luckily, loading scripts in WordPress is super easy. All you need to do is add the code (or a similar one) into the WordPress theme’s function.php file or in your plugin file.

Example 1:

<?php
function wpb_adding_scripts() {
wp_register_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
//

The code above allows you to register your script through the wp_register_script() function. The function “wp_register_script()” will take in 5 parameters that are listed below:

$handle: A unique name for your script, in our case it is called “my_script”
$src: This parameter dictates the location of your script.
$deps: Deps stands for dependency. The code above uses jQuery; therefore, jQuery is added in the dependency part. If jQuery has not been loaded, WordPress will automatically load it through this.
$ver: You may use this parameter if you are adding a new version number.
$in_footer: If you want to load the script in the header, you need to make the value of this parameter “false.” If you want to load it in the footer, then “true.”

Once all the values have been provided, all you need to do is call the function “wp_enqueue_script(),” and the whole script will be called. The last line of example code shared above is an action hook to load the script. Therefore, this needs to be placed where the script is required to save memory footprint.

The extra step that you need to undergo to register is an added security layer for your script. Other site owners will have to de-register without changing the main plugin code.

How To Enqueue Stylesheets In WordPress?

Similar to enqueuing scripts, you can enqueue stylesheets in WordPress as well. Follow the example below to get a clearer idea.

Example 2:

<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', FILE));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
//

Notice that we are now using the function “wp_enqueue_style” to add stylesheets. However, the action hook for both styles and script is the same. If you are using the enqueue scripts function, use get_template_directory_uri() to call the function to be enqueued. Otherwise, you can use get_stylesheet_directory_uri() if you are using a child theme.

Why Use the Enqueuing Approach?

It is essential to follow the best practices for WordPress for several reasons. Most importantly, unless you enqueue the code, you can end up causing conflict in between the other plugins and themes. This can cost you major compatibility issues; your webpage may not load slowly or not at all, and the style sheet may appear on all web pages.

Therefore, it is best to follow the standard procedures when coding for WordPress. If you are still unsure about some of the steps, you can consult an expert software developer or hire a software development company to help you walk through the process of building Stylesheets in WordPress.

Conclusion

When you code for WordPress, make sure you follow the standard procedures, and you code methodologically to avoid any compatibility issues later. Hopefully, our article helped give you valuable insight into the world of JavaScript and CSS coding and helped with the process of adding styles to your WordPress.

Taking a Closer Look at WordPress Coding Standards

Muhammad Shoaib — Wed, 29 Apr 2020 12:22:56 +0000

WordPress is a huge online platform for creating and managing websites. It is an open-source platform, so many developers are working on it. WordPress offers a big library of customized themes and plugins to help you get started. It is interesting to note here that almost 30% of the websites in the world are using WordPress right now. It doesn’t matter what type of business you are to work with; whether digital marketing services providers, non-profit organizations, blogs, or a newspaper, WordPress is suitable for all. BBC America, Tribune Media, Vogue, Mashable, Flickr are some of the names. This list also includes some of the Fortune 500 companies as well. This gives you an idea of its popularity among developers and businesses alike.

Since WordPress is an open-source platform, any developer can contribute to its source code to make it better. With a platform of this magnitude, it is can easily become a huge mess of different coding styles from all the contributions. The result of this mess would create a lot of issues for the platform. Developers wouldn’t be able to understand each other’s codes. It would become hard to navigate through the coding structure, and error resolution would take so much time that the result will be a huge chunk of lags in website operations.

WordPress really put in a lot of thought into this issue. It came up with guidelines for developers and contributors who want to work on its code. These guidelines would become the coding standards, which really helped in streamlining the process. Coding standards make it easier to manage and maintain such a diverse collection of code. Developers can easily understand the code written by others as it would have followed the standard. It also helps individual developers to understand their own code. One look at the code will give you an overview of the whole code. You will easily locate any potential error in the code if it follows the coding standard.

This article is aimed at understanding what the coding standards are for WordPress. It will help sort out all kinds of issues for developers. Every developer should take a look at these standards before contributing to the WordPress platform. You should also go through these standards if you are looking for a WordPress website design company to work on your website project.

First, let’s take a look at what is a good coding standard.

● It should make the code easily understandable.
● It should provide a guide for the naming convention.
● It should explain style for every line of the code.
● It should set a standard for spacing, indentation, quotation, and tags.

When we talk about WordPress, it is a PHP-based CMS platform. It also uses HTML, CSS, and JavaScript. So, it offers different coding standards for each separate language. You should study these standards and other best practices if you are a developer and you want to be a contributor to WordPress. In the end, you would have gained so much knowledge about WordPress coding standards, even if you’re not sure about contributing right now.

Let’s start with the most basic one that is HTML.

HTML Coding Standards

Validation

WordPress coding standard states that every HTML page should be checked through Validator. It should be done so to maintain a well-formed markup in the HTML pages. This rule is of great help in resolving coding errors through automatic testing. It saves a lot of time than manual testing.

Spacing in Self-Closing Tags

There are some tags in HTML code that are self-closing. It is best to follow a proper spacing standard in self-closing elements of a code. The WordPress coding standard states that a forward slash should be preceded by one space as laid out in W3C rules.

Correct one:
Incorrect:

Brace Style

A Brace or a bracket is used to denote statements or declarations such as block, function, or array. Before WordPress coding standards, there used to be a lot of differences between developers on the use of braces. So, WordPress solved a lot of confusion regarding this matter. It states that a brace should be put on the same line instead of on the next line. It also recommends that developers should lookout for a single line and multi-line blocks in the statements. A brace should be placed if the statement contains even a single multi-line block. But a brace can be avoided if there is no multi-line block in the statement. Other than that, it recommends that a brace should be placed for loops that don’t matter whether it has a single line or a multi-line block.

Tags and Attributes

Tags provide a basic structure to an HTML document. It surrounds all the content and helps the browser in understanding the type of content. For example,

Opening tag:
Closing tag:

This tag denotes an HTML document. Similarly, an attribute is what gives further information on the tag. So WordPress coding standard recommends that lower case letters should be used for writing tags and attributes. Moreover, value for attributes should also follow a lower case style if the machine interpretation of data is needed. But in the case of human readability, it should follow an upper case style only.

Classes and Functions

WordPress coding standards recommend a proper method for naming classes and functions in an HTML code. That is, names of functions should always be in lower case. Similar is the case with variables as well. As per the standard, multiple words, if used, should be separated by an underscore. The class name should be written in the upper case letter. Developers should write the file names in the lower case letters and a hyphen should be used to separate multiple words.

Quotation and Indentation

In XHTML, all attributes should have a value, and all values should have a quote. But WordPress coding standard for HTML does not think of it to be the case. Although it recommends having the attributes quoted to avoid security vulnerabilities. On the other hand, proper indentation allows the code to be compatible across all the different platforms. It also helps in maintaining the readability of the entire code. To help maintain compatibility and readability, WordPress states that tab should be used instead of space for indentation.

Coding Standard for CSS

The aim of establishing a standard for CSS coding in WordPress is to maintain a unified look for the overall code. It works as a benchmark for developers and contributors. In this way, WordPress ensures that the code is compatible, legible, and has a consistent outlook from the first line to the last one. Although WordPress has set a coding standard for CSS, it recognizes the need to eliminate some inconsistencies in the core CSS code. Let’s look into it in more detail.

CSS Structuring

While there are a lot of different methods for structuring in CSS, the main purpose of all of them is to make the code as legible as possible. It helps in maintaining a flow to the document. WordPress coding standard recommends using tabs for indentation. There should be 2 blank lines in between the section and 1 blank line between blocks. Each selector should have a comma or a curly brace at the end. Use 1-tab indentation before writing a property value and put a semicolon at the end. The closing brace should be aligned left on the same level as the selector.

Standard for Selectors

The coding standard for selectors in CSS is the same as for PHP. Selectors should be written in lower case letters with a hyphen separating the multiple words. Selectors should be human-readable. The values of attribute selectors should be written in double-quotes.

Properties in CSS

Specificity in properties makes the design less flexible. WordPress coding standard recommends that a colon and space should be placed after the properties. Lower case letters should be used while writing properties with an exception for the names of the fonts. Prefer using rgba for color codes while avoiding upper case letters as well. Using shorthand for value is also recommended in the WordPress coding standard for properties.

Coding Standard for JavaScript

The main aim of WordPress coding standards is to give the document a unified look. It is easy to lose consistency while so many different developers are contributing to the code. Following the WordPress, JavaScript standards help in maintaining a smooth flow in the code. So let’s look at a few of them.

Source Code Refactoring

The basic purpose of refactoring in JavaScript is to update the source code. It is done so to maintain the code. There are many inconsistencies in the WordPress JavaScript core. They are working on improving it regularly. WordPress recommends best practices for coding JavaScript but offers some relaxation. So, it doesn’t recommend refactoring the old JavaScript files as necessary.

Spacing in JavaScript

Well-placed spacing allows for better optimization for browsers. WordPress coding standards direct developers and contributors to use tabs for indentation. In this segment, we will discuss some of the coding standards for spacing. No space should be left where the line ends. Long lines make readability of code difficult. Although it is not a strict rule, a line should not exceed 80 characters anywhere. Use braces for blocks like if/for / try and are not placed on single lines. Any comma or semicolon should not have space before them. There should be space on both sides of? and: in a ternary condition. A new line should be placed after the end of every file. WordPress coding standard recommends keeping a check on the buildup of white space.

Variables

Variables are the most important part of a JavaScript without which it can’t do much. WordPress coding standards for JavaScript set forward some guidelines for everyone to follow. Some of these guidelines are related to the use of const and let in ES2015. It replaces var with const and let. Const is appropriate to use in the declaration if its value is not going to be reassigned. In the case of var, it was necessary to declare a variable at the top of a function. In this case, a function should have a var statement at the beginning delimited by a single comma. It can create a lot of issues if a function has not declared a variable by a var.

Acronyms and Abbreviations

WordPress coding standard for JavaScript recommends that acronyms should be written in upper case letters to reflect a word. For abbreviations, it follows the camelcase style. The position of acronyms and abbreviations is also significant. The camelcase rules should be followed if either one of them is at the start of the variable name.

Coding Standard for PHP

WordPress coding standard for PHP is still evolving to improve on some inconsistency issues found in the core code. Here are a few guidelines regarding PHP.

Avoid Shorthand

Use separate lines for opening and closing tags of PHP. Make sure to sure that you never ever use shorthand tags for PHP. For example,

Correct:

<?php
echo ‘Hi, everyone!’;
?>

Naming Standard

Developers can avoid a lot of mess if things are named following the coding standards. Variables should be written in a lower case letter. Camelcase should never ever be followed. Use the underscore to separate multiple words. Class names should be written in upper case letters. Similar is the case with acronyms and constants. File names should be written descriptively and in lower case. Files that have template tags should have -template added in the name to make it self-explanatory.

Quotes and Spaces

As per the WordPress coding standard for PHP, double quotes should be used for evaluating something. Single and double quotes end the attribute value if the text is not run through esc_attr(), resulting in security issues in the code. It is recommended to remove the trailing space at the end of a line. Commas should always be followed by a space. Logical, string, and comparison operators should also have space after them.

SQL queries

Most SQL queries have no issue if written on a single line. It can also be divided into multiple lines in case of a complex query. In such a case, put an appropriate indent for each line. Coding standards recommend using upper case letters for the SQL statements.

Conclusion

To conclude the discussion, coding standards help organizing the code for others to understand it easily. Some of the guidelines in these coding standards are not strict. A proper understanding of WordPress is necessary to understand what parts can be left out. You should contribute towards making WordPress a better platform by sharing your insights in such a case. It will also help newbies in navigating through the code easily. As mentioned earlier, WordPress is a huge open-source platform, so play your part in keeping it well-organized. Happy coding!

PHP vs Python in 2020?

Muhammad Shoaib — Mon, 06 Apr 2020 09:01:21 +0000

Backend development is undeniably among the top-rated skills today. Web and mobile app development have dominated the market in the past year, and this trend is expected to stay in 2020. One of the major reasons for the popularity of these skills is the value they provide – any startup or new business these days requires a web presence and a mobile application for better reach. Both of these are concerned with backend development.

Today, we’ll be comparing for you two of the best languages: PHP & Python, to help you decide the best one for you.

Python vs PHP – making the choice

A number of factors need to be considered in the process of choosing the right web development language:

• Ease of Learning

One of the most important criteria to consider while choosing a framework is its ease of learning – its syntax. Python, in this regard, is favorable as it has a simple and straightforward syntax. So much so that it is now commonly used for teaching programming fundamentals to beginners. It is a general-purpose language, with shorter programs that are easier to write than other programming languages. Simpler syntax, extremely readable code and short programs gives it an edge to be used for developing applications. Less code also implies quick development times and easy maintenance.

PHP was essentially designed for web development and thus it is more sophisticated or complex, if you will, and can present a learning challenge for novice programmers. It is also quite old, which means that a lot of tutorials and content available for PHP learning might be outdated. Although the developer community is making efforts to provide support for those new to the language, PHP poses difficulty in the learning aspect and Python is a level up in this regard.

• Installation

When it comes to installation, Python can give some challenges whether you work for a software house in Pakistan or are a self-employed programmer. If you have OS X on your system, then note that a system version of Python is pre-installed on your computer. However, this version is of no use, as it is outdated and hence cannot be used for application development. Thinking of installing new packages? Well, that won’t work either! You’ll have to get your hands on a new version to get started. Installing Python on Windows is even more challenging as it will require using a Windows package manager which is definitely some extra work. Working on Linux? No problems with Python.

PHP, on the other hand, can be installed with convenience whether you’re using Windows, OS X, or Linux. You can access it from various shared hosting sites and it doesn’t cost much either.

• Library Support

In the library support aspect, Python wins over PHP. Whatever the type of applications, Python has extensive library support available. With the evolving trend of Machine Learning, a lot of companies are focusing on developing web applications that are backed with machine learning. The best part – Python has amazing machine learning libraries that are not only faster and more functional, but also allow developers to seamlessly integrate their applications with the web framework. Some of these libraries include Keras, Theano, TensorFlow, etc.

In comparison, PHP does not have strong library support with only a single library known as Packagist – The PHP Package Repository.

• Speed

The speed of a web application is something not entirely related to the framework on which it is built. Slow database queries, relying too much on network queries, and excessive disk reading are factors that will slow down your speed every time. However, generally, PHP is considered to be a faster language than Python. More so with the release of PHP 7.x versions which give programs that are 3 times faster as compared to a normal Python program. This comes as a great benefit with respect to performance-critical applications. For example, in a banking system where millions of visitors are using the application daily, such a delay can significantly affect the system’s overall performance. So, PHP takes the lead over Python from the speed perspective.

• Debugging

If you’re an experienced developer you know how important an efficient debugger is for your code. After all, your work doesn’t end with developing code; finding where it went wrong and fixing the issues is equally crucial to develop a fully-functional program. Both Python and PHP provide great debuggers. The PDB (Python’s Debugger) is user-friendly and integrates easily into your development environment. With simply a push on the “debug” button, you’re all set to debug your code.

PHP provides XDebug which may require a bit of setup, but that isn’t a big deal at all. Both the debuggers come with common debugging features such as breakpoints, path mapping and so on, and both are fantastic.

• Documentation

There is an ample amount of documentation available for both Python and PHP. Python’s documentation is extremely straightforward and precise and does not allow comments. PHP, on the other hand, has extremely helpful documentation explaining complex concepts in a simple language and includes a developers’ comments feature. However, commenting can help but also cause confusion, as the comments that appear on top are the older ones and their context may not be up-to-date. Due to this, Python has a slight edge over PHP, but not a very significant one.

• Price

Price may seem to be a deciding factor for selecting a development platform, but many frameworks and languages hugely favor programmers in this regard. Both Python and PHP have been designed to aid developers by making them free and open source. This makes both of them popular among other paid web development frameworks.

In a Nutshell

The trend of cross-collaborative teams has become widespread in recent times, where individuals with different skill sets come together to develop various projects. In such teams, PHP can present challenges as it is somewhat complex for inexperienced people. Python offers a broader landscape as it is not specific to web development and is easy to learn as well. Nonetheless, it really depends on what your project needs are. Our recommendation – Python is a bit more favorable for web-based applications as compared to PHP. However, we would also say – fully evaluate your needs and then come to a conclusion.

Understanding API and why it matters for you

Muhammad Shoaib — Mon, 13 Jan 2020 13:01:02 +0000

API stands for Application Programming Interface. It is a concept in software technology that deals with multiple applications interacting with and obtaining data from one another. In simpler words, your internet experience runs on APIs.
APIs help you compare the best prices for air tickets, allow you to embed a map into your store’s website (just like for Peshawari Chappal) and process your online credit card payments.

Type of APIs

There are multiple types of APIs, which includes:

Public APIs: companies like Shopify and Slack release these APIs for developers. These companies share a certain set of inputs that allow you to achieve the desired output.

Private APIs: Used internally at a company. When a company has multiple software products, these private APIs allow the software to interact with each other. You can change the components of a private API to suit the requirements of your company.

How does an API relate to social?

All major social media sites have APIs. While you are not allowed to use them to copy the company’s original service and sell it as your own software, you can build on them to improve the experience.

For instance, Twitter’s API allows you to access certain features of a public profile. You can design a program using an API that would help you to search for someone’s username and it will pull up the profile page. Instead of you having to visit the Twitter office every time you have a request, the API makes it easier for you to run the program and pull up the relevant profile.

Are APIs important to you?

As I said earlier, your internet experience runs on APIs. Instead of accessing five different apps or services, five separate times, you can use a single software to access all five at the same time. In other words, APIs streamline your process.