Categories
TUTORIALS VPS WEB DEVELOPMENT WEB SERVER

Things To Consider When Designing & Developing A Website

So you have decided to design and develop your own website? Great! But are you aware of all the things that you need to keep in the back of your mind when designing and developing your website? In this article, we will list some of the most important thing you need to consider when developing your website in 2019 & 2020.

1. Domain Name

The internet today is made up of over a billion of websites and web applications. With so many options at the tip of their hand, your website visitors will not be able to remember your website until and unless its name stands out from the crowd. So, pick a catchy website domain name that is easier for your website visitors to recollect in the future. Use the Namecheap’s search bar extensively to identify an easy to remember and available domain name. Ideally, a .com domain name is preferable over other domain name extensions as most of the non technical visitors by default assume the domain name to end with a .COM extension. It is also advisable not to use a name that is too long to remember or too many non interpret able characters such as vooooooooz.com (Here, it will be very difficult for your users to remember how many o’s are there in the domain name).

2. Web Hosting

Web hosting is the web server provider where your website will reside or hosted finally after web development activity is done. Where you host your website is very important as that becomes an important criteria in determining your website visitors satisfaction! Confused? You see, your website visitors will be very happy when your websites loads as quickly as possible. If it takes more than 10 seconds to load a web page, your website visitors will get frustrated and might close your website rather than waiting for it to completely load. As a result, the speed at which your web server delivers your website to its visitors plays a vital role in determining the ultimate customer satisfaction.

So how to determine which is the best web server to use?

Ideally, your web server must be located as close to your website visitor as possible. So for example, if your website visitors are mostly from the United States (US), you should host your website in a server located within the US. If your website is located in a far away location such as Australia, the amount of time required to deliver the web pages of your website from the server ot your website visitor will increase a lot!

What if your website visitors are coming from all across the world?

If you have a very generic website that appeals to all the people across the world, chances are you will have visitors coming into your website from across the globe round the clock. In such a case, where should we host the website? Well, the answer for this is to host your webserver across the globe!

Wait…what???

Yeah, you heard it right. If you are getting visitors from across the world, you will still need to deliver your web pages from the web server closer to your user’s location! But how to do that? Allow me to introduce you to the “Content Delivery Network” or CDN for short.

What does a Content Delivery Network or CDN do?

Content Delivery Network or CDN is a type of web service provided by certain set of CDN service providers whose main job is to host copies of your website across multiple web servers around the world. They will take care of determining where your website visitors are coming from and decide upon which CDN web server to use to serve web pages to them. In that way, you are ensuring that all of your visitors coming from across the world will get the same quality of website access as every other user from any other location in the world.

If you are just beginning with your website, you dont normally need to go for a CDN until you are able to determine the geographical locations from where majority of your website user base is located at. So, we will revisit again regarding CDN in the future and ignore it for now.

So now that we understand that our web servers need to be very fast and located closer to the website’s userbase, where do we look for a web server and how to determine a web hosting provider?

How to choose a web hosting provider?

There are different types of web hosting providers in the market. Some of them provide us with a managed hosting where they will manage the entire web server related issues and you will only need to worry about your website related parts. They also usually host not just your website on their server, but many other websites from other website owners as well in the same server. So, in other words, you will be sharing your website’s web server with other websites and hence they are usually called as the Shared Web Hosting service providers. One of the best example of such a Shared Web Hosting provider is the Namecheap shared hosting provider as shown below.

Shared Hosting with Namecheap

Using a shared hosting provider has its own set of advantages and disadvantages. One of the main advantage of using a shared hosting provider is that in that case the webmaster (aka website owner or website maintainer) need not worry about maintaining the web server part as it will be taken care of by the shared hosting service provider. On the other hand, one of the main disadvantage of a shared hosting provider is that since the same web server will be shared with other websites as well, the speed of the web server will be nondeterministic and usually slower. If one of the website in that shared hosting server gets high traffic, the other websites in the same server will be affected with its response time, thereby frustrating its users.

If you do not want to go for shared hosting, there are other types of web servers available to you. One such option is the Virtual Private Server (VPS).

In case of a Virtual Private Server (VPS), you will be the sole person in control of an entire virtual private server and it will not be shared with anyone else. This results in an increase and deterministic response time, all the time by your website to your website visitors. The other advantage of a VPS server is that since you have access to the complete VPS computer, you can install any software that you choose to, something that may not be possible when using a shared web hosting service provider. The downside, however is that this VPS will not be managed by the service provider and you will be completely responsible for maintaining the VPS server. There are many Virtual Private Server (VPS) providers in the market that are highly competitive and cost effective. One such service provider is the Vultr VPS service provider which provides a VPS server for as low as $2.5 per month! We highly recommend this VPS server if you are looking in to a VPS server option.

3. Design A Responsive Website For Mobiles

Now that we have covered the infrastructure part of a website – domain name and the web server, let us now start looking into the design aspects of a website.

Over 70% of the website traffic these days come from smartphones and tablets. As the mobile data rates continue to fall along with the fall of smartphone prices with excellent technical specs, this number of mobile visitors is only going to increase in the future. So what does this mean to your website?

Make your website responsive and mobile friendly!

What do we mean by a responsive website?

In the early days of web development, where there were not many devices with varying form factor – that is the size of the screen did not vary a lot, designing a website for these computer devices where reasonably easy. But with the advent of smartphone since 2007 – the year iPhone was launched, most of the website traffic started coming from these smartphones and every year this is only increasing. With the introduction of smartphones, web developerf faced a new challenge – huge range of smartphone computing device screen sizes!

By default, what the operating system of these smartphones do – such as the iOS of iPhone or Android is to shrink the size of a website to just fit enough into the screen size of the smartphone.

However, problem with such a scheme is that many of the links and buttons of the websites where user was supposed to take action on, became extremely difficult to click on thereby reducing the user experience (UX) of the website. This can be extremely frustrating to your website visitors and hence, an alternative design had to be thought of to handle mobile visitors to the website. This is when the Responsive Website Design was born!

In a Responsive Web Design, the website is designed in such a way that the size of the buttons, links, texts or images and the overall layout of the web page are determined depending on the size of the device’s screen and rendering accordingly, automatically!

The advantage now is that the visitors of your website need not have to fight with their smartphones and tablets to interact with your website. So always build your website using responsive design strategy.

One of the easiest way to design a responsive website if you do not have the time to learn every aspect of a responsive design is to use a frontend website framework such as Twitter’s Bootstrap. Using Bootstrap framework while building the frontend of your website will ensure that your website is always responsive!

4. Search Engine Optimization (SEO)

Finally, we also need to ensure our website is optimized for search engines such as Google, Bing, Yahoo, DuckDuckGo etc.

What is Search Engine Optimization (SEO)?

Most of the people use search engines such as Google or Bing to find answers to their queries. In return, the search engine will display a list of websites that is expected to answer those queries. In the early days of our website, when not many people will know about its existence will mostly end up on our website mainly through these search engines. If our website has answers to the queries asked by the search engine’s users and the searach engine thinks our website’s answers are better than other websites’ answers, it will display our website link above other websites, there by increasing the probability of the search engine user to click our link and visit our website.

So then, what are the parameters that we need to take care of to ensure the search engine such as Google places our website at the top of the search result? It is these set of parameters that becomes the basis of Search Engine Optimization (SEO).

Search Engine Optimization (SEO) as the name suggests, is the optimization methodology used on our websites to ensure that the search engines can easily traverse throughout our website’s web pages, analyze the content of our website for quality and hopefully determine the best position of our website in its results displayed to its users. The position given to our website in the search result for a particular query is called the search engine ranking of our web page for that query.

Our aim hence, will always be to figure out a way to get our articles to the top of as many search query results as possible. This is usually achieved by ensuring quality of the content of the website, ease of navigation across the web pages throughout the website – both for search engine bots as well as our website users, proper use of appropriate HTML tags depending on the content, easy readable hyperlinks & URLs, good amount of highly authoritative websites linking back (aka backlinks) to our web pages there by signalling the search engines that our articles are highly recommended by them etc.

Categories
HTML JAVASCRIPT LAMP PHP STATIC WEBSITES TUTORIALS WEB DEVELOPMENT WEB SERVER

Beginners Tutorial – What Is A Website?

We have all heard about different websites present on the internet such as Google, Youtube, Facebook, Twitter etc. But what exactly is a website? What is it made up of?

Imagine you just found a 100 year old book in your attic that contains a wealth of information about the world wars. It also has a collection of photographs that revealed some secrets that are lesser known to the public. You wanted to share this information with the world, but how?

One way is to go to the newspapers and get it published, but it can still not reach all the people across the world. What would be an easy and best possible way to share this information to people around the world? Publish it on the internet!

When you publish it on the internet, anyone from around the world having a computer or a smartphone with an access to the internet will be able to consume your content.

You can publish this information on social networking websites such as Facebook, Twitter or Youtube or create your own website to publish it.

A website example

So, a website, simply put, is a collection of information present in different formats such as texts, images, videos, graphs that is published on the internet to helps its users consume them.

But just like you, there are millions of people who are sharing information on the internet, so how do you make your contents accessible from other people’s information? This problem is very similar to having thousands of building in a city and needing to find a particular building. How do we do that? We will discuss about this in the future articles

Categories
HTML JAVASCRIPT LAMP PHP PYTHON TUTORIALS WEB DEVELOPMENT WEB SERVER

Basic Structure Of A Web App/Website

A website or a web app is usually made up of the following 3 web components:

These components are arranged as shown in the following diagram.

Structure Of A Web App
Location of the web app components on the internet

Web App Back-End component

All the core logic of a web app or website is usually implemented in the web app’s back-end component. This includes all the algorithms of the web app, code to perform any storing and retrieval of data from the database, url based route handling etc. All these code forms the back-end of a web app or website and runs on a specialized computer called the web server.

Backend component of the above image

The code for back-end programming can be written using several different programming languages such as PHP, Python, Java, Javascript, Ruby etc. Each of these programming languages comes with their own advantages and disadvantages like for example choosing a language like Python comes with the great benefit of having several readily available libraries useful for data crunching activities, however they can be relatively slow compared to other programming languages. So which backend programming language to choose largely depends on the type of functionalities required for the particular web app that is going to be developed.

Web App Front-End Component

All the visual and interactive elements of a web app or website comes under the Web app’s front-end component. Whenever the user of a web app or website visits the website, he will only see and interact with the web app’s front-end component. So as far as he is concerned, a web app for him is usually just the front-end component. It is what he sees and interacts with in his web browser.

Front end component of the above image

However, these front-end components will not usually store all the relevant data of a web page within itself but instead, will query for them by sending requests to the web app’s back-end component that was discussed earlier. These requests are usually sent using the HTTP protocol.

The programming languages used to write web app’s front end component includes HTML, CSS & Javascript. Among these, HTML is a markup language that a web browser will use to interpret what HTML components needs to be drawn on the browser screen to represent the website. CSS is a styling language used to customize the style (like change the color, size, background color etc.) of these HTML components. Finally Javascript is a programming language that can be used to add interactive functionalities to these HTML components.

With the help of these 3 programming languages, your front end should be highly interactive and user friendly for any non technical person to start using your web app.

Database component

A database is a specialized software used to store and retrieve data efficiently on a computer or a server. The database can sit in a web server along side the server software or can be present in its own seperate dedicated database server.

Database component

Databases are usually used in a web app (or website) to store all relevant data of that web app such as user data, session data, web app specific data etc. There are many different forms of databases available such as relational databases, NoSQL databases, Document Oriented databases, Graph databases etc. Each of these variants of databases have certain unique features that are useful in certain specific situations. The most common database type used in web apps are usually relational databases such as MySQL, PostgreSQL. However Document Oriented databases such as MongoDB are also used frequently.

So these 3 components forms the fundamental elements of a web application. Of course there can be more than these 3 components required as your web app continues to grow. You may need to add multiple servers, load balancers to manage higher traffic, caching mechanisms etc. We will discuss more on these modules further in future articles, but having the knowledge of above three fundamental components of a web app should give you the best start to learn and start working on the development of your first web application.

Do comment below if you liked the article or if you have any questions regarding the above topic and I will be happy to answer your questions. Until then, happy learning! 🙂

Categories
JAVASCRIPT STATIC WEBSITES TUTORIALS WEB BROWSER WEB DEVELOPMENT WEB SERVER

This one value in Javascript is not equal to itself!

We know that Javascript supports all kinds of values such as strings, numbers, constants etc. All these values are deterministic values in that their weights always remains the same. For example, an integer value of 25 is always equal to 25 in Javascript no matter what. Similarly a string value of “Hello” is also always equal to another string “Hello”.

In other words, these values in Javascript can always be compared with another value to determine if they are the same or different. To understand this better with an example, let us open up our browser console. In my case I am using Google Chrome browser console where we will create 3 variables with these values:

We can note from the above Javascript demo video that when the variable a and c are compared, since both their values are same holding a value of 2, they return true when compared with each other. On the other hand when variable a was compared with b, since their values were different, the comparison resulted in a return value of false.

This is true for all type of values present in Javascript – be it string, integers, floats, booleans anything you can think of.

However, there exists one special value in Javascript that is never equal to another variable having the same value. In other words its value is never equal to itself. This value is the NaN value!

NaN in Javascript stands for “Not a Number” and it is that one special value in Javascript which does not return true if it is compared with itself.

Why does NaN not equal to itself in Javascript?

Now you might be wondering why a NaN value does not equal to itself? The answer for this lies in the way Javascript language has been designed.

NaN or Not a Number is a special value in Javascript which is used to represent a nonsensical value – that is it is the value returned whenever a non sensical operation is performed. Now this is where it gets interesting. Why does a non sensical value not be the same all the time or at all the place? In other words, why is this happening here:

Why is it returning false?

The answer is that NaN as mentioned earlier is a value that is used to represent a non sensical values. So if the result of an operation performed is something that cannot be represented by ordinary or normal values, Javascript returns a value of NaN.

Now, if two operations results in non sensical values, they are not necessarily equal. Each of these operations can be returning two non sensical values of different weights. However, they both need to be represented by the value of NaN. Hence, the Javascript treats two NaNs as two different values and never equal to each other.

I learnt about this and many other similar anomalies in the book Eloquent Javascript. This is a very good book to learn and understand such interesting things about Javascript so I will definitely recommend this to anyone interesting in learning Javascript in depth.

If you are also aware of any other similar interesting things about Javascript do let me know in the comments below. Until then, happy coding! 🙂

Categories
100DaysOfCode BROWSER EXTENSION TUTORIALS WEB BROWSER

Use Your Web Browser As A Notepad

Did you know that you can turn your web browser into a notepad like text editor for quickly jotting down some notes while browsing the web?

Yes, it is possible to turn a new browser tab of your favorite browser such as Google Chrome, Firefox or Opera into a text editor in an instant. You do not need to have any programming experience to make this work. You will just need to remember the below little piece of string that you need to type into your favorite web browser to turn it quickly into a notepad.

Below are the steps you need to follow to turn your favorite web browser into a notepad like quick text editor:

  1. Open up a new tab in your web browser
  2. Type in the following piece of code into the URL bar (or the address bar) of your browser tab:
data:text/html, <html contenteditable>

Hit enter and voila! Your browser tab has turned into a notepad! You can now start typing anything you want in the browser tab window and verify that the browser has indeed turned into a note pad!

How does a web browser turn into a text editor?

By typing the above mentioned code into the URL of your web browser we were able to turn the browser tab/window into a text editor. But how did this work?

It works because the above mentioned code instructed the web browser that the current document’s content is of raw text data type – done through the use of keywords data:text/html

On the other hand, by typing in the markup code:

<html contenteditable>

We are instructing the web browser such as Google Chrome or Firefox or Opera to turn this web document into an editable HTML document. This results in browser allowing us to type in any kind of text we want into this browser window from now on!

Thus, we found that by simply typing a simple piece of code:

data:text/html, <html contenteditable>

into the address bar (URL bar) of our web browser, we were successfully able to turn the browser tab into a text editor.

However, it is a little bit difficult to remember this piece of code as it looks a bit cryptic. So to avoid having to remembering this, we will look at how we can create a new Google Chrome extension that can be used to open a browser tab as a notepad every time it is clicked. But that is a topic for my next article.

This article explained how and why typing in some magical code into the address bar of your web browser would convert it into a text editor. Hope it was informational and you learnt something new from it. There are many such simple tricks we can use to convert our web browser into a high performance tool by customizing it to our needs. We will decode each of these tricks as we go further, one step at a time.

Until next time, happy coding! 🙂

Categories
BROWSER EXTENSION HTML JAVASCRIPT TUTORIALS WEB DEVELOPMENT

Write A Google Chrome Extension In 5 Minutes

What is a Google Chrome Extension and what does it do?

Google Chrome extension is a Google Chrome browser extension that acts like a plug-in which adds additional functionalities to your default Google Chrome web browser experience.

Google Chrome web browser comes with a default set of functionalities that are applicable to a wide range of use cases as utilized by all the websites out there. But if you have a requirement for additional browser functionalities that are not already supported by default in your browser, you can try to make use of the available Google Chrome browser extension APIs to create a browser extension that would fulfill your such requirement.

In other words, Google Chrome Extensions extends the functionality of the default Chrome browser by introducing new set of functionalities into it.

What programming language is used to write a Google Chrome Extension?

In order to write a Google Chrome browser extension, you just need to have basic web development knowledge. The programming languages used to develop Google Chrome browser extension are HTML, CSS and Javascript. Using just these 3 languages along with the provided Google Chrome Browser Extension Application Programming Interfaces (APIs), you will be able to develop your Google Chrome browser extension in no time!

With this background information in hand, let us now figure out how to write a new Chrome browser extension.

Getting started with developing Google Chrome extension

All Google Chrome browser extensions must have one required file, the manifest.json file. It is using this manifest.json file that the Google Chrome web browser can identify and display all the available information about your Google Chrome extension.

The manifest.json file will have entries related to your Google Chrome browser extension such as its name, description, version number of the extension, author name, permissions and many other metadata, all stored in JSON format.

So let us now go ahead and create a new directory which I called coolExt where we will store all the files related to this Google Chrome extension. Under this newly created directory, create our manifest.json file with the following content:

manifest.json (The only file required to get Chrome extension started!)
{
    "name":"Cool Extension",
    "description":"My new cool extension",
    "manifest_version":2,
    "version":"1.0",
    "author":"@digitallyamar"
}

You can see that this file contains a set of JSON key:value pairs. Here, each of these JSON key values such as “name”, “manifest_version”, “author” etc are already defined by Google’s Chrome API and hence we cannot alter it but use it as is. On the other hand, the values of these are determined by us according to how we want to describe and design our Chrome browser extension!

With the manifest.json file and its contents in place, it is now time to test our Google Chrome extension. In order to do so, open up your Google Chrome browser and in the address bar type: chrome://extensions

This should now open up a new Chrome Extensions window listing any Google Chrome extensions you might have already installed. At the top of this window, you should see an button called “Load unpacked“, click on it and browse to the “coolExt” directory where we have the above manifest.json file saved in and open it. This should now result in our Google Chrome extension getting installed into our Google Chrome browser and displayed as an installed extension in chrome://extensions

Google Chrome Extension Development In Action

There we have it! A basic version of our simple Google Chrome extension is created and installed into our Google Chrome browser. Although at the moment the Google Chrome extension is not doing much other than just describing itself and some other meta information, we have successfully created the basic framework for our Chrome extension.

We will in the next article continue to develop on this basic Chrome extension to bring in some interesting functionalities to our browser and to some of the websites we will visit. But that will be in the next article, so for now hope you got a basic understanding of how Chrome extensions are built under the hood. Checkout for the next article and if you have any comments on queries with respect to this article, do let me know in the comments below.

Until next time, happy coding! 🙂

Categories
HTML STATIC WEBSITES TUTORIALS WEB DEVELOPMENT WORDPRESS

Difference Between Link & Anchor Tag In HTML

HTML provides us with 2 different tags called the Anchor tag (represented by <a>) and the Link tag (represented by <link>). But what is the difference between the two? Can they be interchanged with one another? We will explore these queries in this article.

What is an HTML Anchor tag?

An anchor tag is used in an HTML file to help us link our HTML file’s texts to certain other web pages. In other words, it helps in the creation of hyper texts (<a>these are the hyper texts</a>) in HTML documents.

These other web pages that is linked into by the anchor tags can be present within the same website, or can be residing in a different website on a different web server altogether. But what is important is that the Anchor tags <a></a> are responsible for linking different web documents together through hyper texts and help user navigate from one web page to other in a simple mouse click!

It must be noted that all anchor tags are present only within the <body></body> section of an HTML page. They are never used in the <head></head> section of the HTML page. This is because the primary function of the Anchor tags <a></a> is to let web page users to move from one page to the other page. As the web page users can never see the content of <head> section, anchor tags are never used there!

So, in other words, we can say that Anchor tags <a> are used in the user visible part of an HTML web page so that the web page user can click on the Hyper Texts created by these Anchor tags and move from one web page to another.

What is an HTML Link tag?

On the other hand, our web page is not just made up of HTML web pages, but consists of one or more of Cascading Style Sheets (CSS) that are used to style the web page. It also consists of one or more Javascript files to provide interactive functionalities to the web page. These CSS files and the Javascript files are thus part and parcel of the web page and hence need to be linked to the web page. This is achieved using the <link> HTML tag.

The <link> HTML tag is hence used to link up all external resources such as CSS and Javascript files associated with a web page. This linking does not need to be seen by the final user as he only needs to get an integrated HTML web page rendered. As a result, the linking of these files, done through the use of <link> tag is done in the <head> meta section of the web page.

So these were the difference between Link tag Vs Anchor tag in HTML. Each of these tags have very unique functionalities to fulfill in their own roles and cannot be used interchangeably as we suspected in the beginning of the article.

With this, hope it became clear on the differences between Link and Anchor tags’ purpose in the creation of an HTML document. If you have any more queries or doubts between Link and anchor tags, let me know in the comments below and I will try to clarify your doubts.

Until next time, happy coding! 🙂

Categories
HTML TUTORIALS

List Of HTML Empty Elements

What are HTML Empty Elements?

Empty elements of HTML code are those HTML elements that have start tags but do not have an associated end tags. So these are the HTML elements which can contain only attributes associated within them but no content by themselves.

Sometimes, HTML Empty elements are also called as Void Elements of HTML.

Some of the interesting features of Empty Elements of HTML includes:

  • They can never have raw text or CDATA associated within themselves.
  • They can never have any additional child nodes in the DOM tree.

A list of HTML Empty Elements are as follows:

  • <br> Insert A Line break
  • <hr> Insert A Horizontal line
  • <img> Insert an image from a file in the path defined by its “src” attribute
  • <meta> Defines the metadata of a web page
  • <source> Insert a media file
  • <link> Used only in a document header to link in an external resource
  • <input> Used to declare an input element to accept user input.

Hope this gave you good idea about what HTML tags are considered HTML Empty elements. I will continue to write further on more such lesser known information related to web development in future articles as well.

Until next time, happy coding! 🙂

Categories
TUTORIALS WEB DEVELOPMENT

Who is an Information Architect?

An information architect is a person who is responsible for organizing the content of the website in a logical and easily findable way.

We know that a website is made up of lots of contents, images, videos and many other interactive functionalities created using Javascript.

While the design of a website as to how to appears and how the user of the website interacts with it is decided by web designers and web developers, the real crux of a website is its content. It is the content that matters the most in a website.

Having these contents of a website laid out in an easily accessible and logical way is very important for the success of the website.

One of the most important and significant metric of a website is the amount of time a user spends on a website. The more a user spends his time, more the opportunity for the respective website to showcase its value and hence more the chance it gets to convert it to profitability.

In order to achieve this metric, it becomes extremely important that the website contains a lot of useful and relevant information for its users. But just having very good content by itself is not sufficient, it also becomes important to lay these contents in a very logical way such that the website’s users can move from content to content, post to post in a progressive way. In addition to this, having very good search-ability or discoverability of these contents also becomes extremely important.

It is exactly these objectives that an Information Architect performs upon the contents of a website. Information Architect of a website makes sure that all the content are laid out along the website in a logically coherent way such that the user can transit form one article to another in a structural pattern. In addition to this, Information Architect of the website will also ensure that all these contents are made easily discoverable by providing sufficient inputs to get it easily searchable and discoverable by the users of the corresponding website!

Hope this article clarified the role of an Information Architect of a website. If you have any other inputs or opinions that you think needs to be added, do let us know in the comment section below.

Until next time, happy coding! 🙂

Categories
JAVASCRIPT TUTORIALS WORDPRESS

How To Enable Javascript Code In WordPress Page

WordPress CMS by default blocks any Javascript code from running as part of the website’s Page or Post. This is done to to prevent any malware attacks or website hijacking through vulnerabilities created by enabling Javascript on the WordPress Page and Post level.

However, it is still possible to enable running of Javascript if the WordPress website owner knows what he is doing. The website owner can enable Javascript on WordPress using two methods:

Method 1: Installing a third party WordPress Plugin

By installing an external WordPress Plugin that allows adding Javascript per post, any non technical WordPress site owner can also enable Javascript on the WordPress Posts and Pages level.

Method 2: By editing function.php file of the active WordPress Theme

In this method, you would need to ftp to your installed and currently active WordPress theme directory and look for the file called functions.php. You will then need to hook a new PHP function that gets loaded right after the WordPress Post’s <head> section gets loaded. Below is an example of how to write such a hook function in your functions.php file.

function wp_hook_js() {
 ?>
    <script type="text/javascript">
        //Add your Javascript code here
    <script>
 <?php
}

add_action('wp_head', 'wp_hook_js');

In the above code you can see our new function wp_hook_js() that contains our Javascript code. However, in order for this function to get called, we use the add_action() function. From the above code, you can see that we are hooking up our wp_hook_js() function to ‘wp_head’. This is a hook that gets called whenever a WordPress Post or Page gets loaded.

Thus by using either of these two methods i.e. by using a WordPress Plugin or by editing our theme’s function.php file and adding a hook function, we can ensure our Javascript code gets executed each time a WordPress Post or Page gets loaded.

In addition to this, you can add custom CSS to your post using “Additional CSS” option under Theme Customization option you get when you go to the “Appearance” option in the WordPress Admin dashboard.

This is all that is required to be done in order to get custom Javascript codes running at the WordPress Page or WordPress Post level. Hope this article was helpful in giving an insight on how to get it all working.

Until next time, happy coding 🙂 !!