Elementor is one of the most popular page builders used in the wordpress, but its free version doesn’t allow you to use saved templates via shortcodes. Luckily, with a bit of custom code, you can achieve this functionality and make your templates reusable throughout your site.

What Are Shortcodes in WordPress?

Shortcodes are small pieces of code that allow you to insert dynamic content into WordPress pages or posts. The shortcode will be dynamically renders a saved Elementor template with the template ID.

Step-by-Step Guide to Render Elementor Saved Templates

Step 1: Create a custom function in your active theme file functions.php file. Copy the below code and add in your functions.php file.

function codekosh_render_elementor_template($atts) {
    $atts = shortcode_atts(
        array(
            'id' => '',
        ),
        $atts,
        'elementor_template'
    );

    $template_id = intval($atts['id']);

    // Prevent recursion or invalid ID
    if (!$template_id || get_the_ID() == $template_id) {
        return '';
    }

    // Make sure Elementor is loaded
    if (!did_action('elementor/loaded')) {
        return '';
    }

    // Enqueue necessary frontend assets (important for guests)
    Elementor\Plugin::$instance->frontend->enqueue_styles();
    Elementor\Plugin::$instance->frontend->enqueue_scripts();

    // Buffer output to return as shortcode
    ob_start();
    echo Elementor\Plugin::$instance->frontend->get_builder_content_for_display($template_id);
    return ob_get_clean();
}
add_shortcode('elementor_template', 'codekosh_render_elementor_template');

Step 2: Create and Save an Elementor Template.

• Go to Templates > Saved Templates in the WordPress admin area.
• Click Add New, design your section, and save it.

• Note down the Template ID from the template list.

Step 3: Use the Shortcode

• Add the following shortcode wherever you want the saved template to appear as I have used under the elementor tabbing widget:

• Replace the ID of your saved template in the ShortCode.

The post How to Use custom Shortcodes to Render Elementor Saved Templates appeared first on .

Codekosh Solutions has the best tutorials for React app creation.
Today we will explain to you how to create the React app.

React is a popular JavaScript framework used to build front-end applications. Developed by Facebook, React has made its strong presence in the dev community to build fast applications using an intuitive programming paradigm that ties JavaScript with an HTML-like syntax – JSX.

In short, ReactJs is a popular and widely used front-end library application system for developing single-page applications. Since it’s a library, we can install this library to Create React App for developing single-page applications.

Create React App is a tool or generator for new developers, allowing them to develop and execute React projects. You don’t have to configure it manually. In other words, you don’t have to worry about configuring a build system like Webpack. You don’t have to worry about most of the complicated systems of modern front-end development. You can start the React code with basic knowledge of Javascript.

Requirements:

You need the following things to start the React application.
— Need to install the Node.js and NPM on your desktop. For Windows users, you can download the Node at Node.org.
— For the MAC/Linux you can use the commands to install the node.js in your machine.

For the MAC users, I recommended installing the “Homebrew” (if you haven’t already) to install the Node.js.
— Open your terminal and run the following command to install Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

— Install Node.js using the Homebrew library:

 brew install node

— Verify the Node.js installation:

node -v 
npm -v

For Linux users open your terminal and you can install the Node.js by following commands:
— Update your package list command:

 sudo apt update

— To Install Node.js and npm from the default Ubuntu repository:

 sudo apt install nodejs npm

Verify the installation:
Check the installed versions of Node.js and npm:

node -v 
 npm -v

This will show you your machine’s installed version of Node and NPM.

Steps to Create Your New React App
— Open your terminal to install the base project, run the following command:

 npx create-react-app codekosh-react-tutorials

— Now your base project is set up in the new directory as we are using the “codekosh-react-tutorials” You can give any name to your base project directory.

— Now go to the directory where you set up the base react app using the below command.

cd codekosh-react-tutorials

Starting the React App Development Server:
— To run your React project you need to execute the below command:

 npm start

When we run codekosh-react-tutorials, we just have to run npm start in the app directory to start serving the development server. We will see a new browser opening with localhost:3000.

Browser view:

See React in Action

Did you notice something interesting in this react js app creation tutorial guide?

You have just created your first React Project using React developer tools without getting much into the technical details.
Isn’t it the beauty of Create React App?

It’s not necessary to know everything to create a React app. It gives us the freedom to avoid the complex steps involved in writing React code.

Now you know how to start, test, and build a Create project. Consider these commands and understand their usage, as you will need them for your project development.
We hope this article turned out to be beneficial!

Happy coding!

The post How to create the first react app appeared first on .

Setup Sub – Domain in Digital Ocean:

1. 1. Login to your digital ocean account.
   2. Click on the domain – e.g I want to make portfolio.codekosh.com – so I m click on codekosh.com from added domain list. As I have marked in reg.
      
   3. Now you need to add the “A” record and CNAME record.
      A record e.g: portfolio and CNMAE www.portfolio and point to your droplet.
      Create your CNAME record.
      

How To Set Up Apache Virtual Hosts on Ubuntu

Setting up Apache virtual hosts on Ubuntu allows you to host multiple websites on a single server, each with its own domain or subdomain. This setup is particularly useful for web developers, businesses, or individuals who want to run multiple websites through domain and subdomain on the same server without conflicts. Here’s a comprehensive guide to walk you through the process by codekosh.com.

Step 1: Install Apache

If Apache isn’t already installed on your Ubuntu server, you can install it using the following below commands.

sudo apt update
sudo apt install apache2

Step 2 — Creating the Directory Structure

Step to create a directory structure that will hold the site data that you will be serving to visitors.

Your document root, the top-level directory that Apache looks at to find content to serve, will be set to individual directories under the /var/www directory. You will create a directory here for each of the virtual hosts.

Create a directory structure to store the website files for each virtual host. Within each of these directories, you will create a public_html directory. The public_html directory contains the content that will be served to your visitors.

Use this command, with your own domain name, to create your directories.

sudo mkdir -p /var/www/example.com/public_html

Replace example.com with your domain name.

Step 3: Assign Permissions

You’ve created the directory structure for your files, but they are owned by the root user. If you want your regular user to be able to modify files in these web directories, you can change the ownership with this command.

sudo chown -R $USER:$USER /var/www/example.com/public_html

The $USER> variable will take the value of the user you are currently logged in as when you press ENTER in terminal. By doing this, the regular user now owns the public_html subdirectories where you will be storing your content.

You should also modify your permissions to ensure that read access is permitted to the general web directory and all of the files and folders it contains so that the pages can be served correctly.

sudo chmod -R 755 /var/www

Your web server now has the permissions it needs to serve content, and your user should be able to create content within the necessary folders. The next step is to create content for your virtual host sites.

Step 4: Create Sample HTML File for host (Optional)

With your directory structure in place, you can start focusing on individual virtual host site and the content within that site. Start by creating an index.html page for your subdomain e.g portfolio.codekosh.com.

Run this command to open and create the index.html. This example uses nano:

nano /var/www/subdomain.example.com/public_html/index.html

You can add some html stuff in your index.html file to load the file in broswer by your subdomain.

To save and close the index.html file in nano, start by pressing CTRL+X. Press Y when prompted to save the file, then press ENTER when you are finished to exit.

Step 5: Creating New Virtual Host File

Apache on Ubuntu uses separate configuration files for each virtual host. You can create a new configuration file for each site in the /etc/apache2/sites-available/ directory.

sudo nano /etc/apache2/sites-available/subdomain.example.com.conf

Enter the following configuration in the config file:

	
	    ServerAdmin admin@example.com
	    ServerName example.com
	    ServerAlias www.yoursubdomain.example.com
	    DocumentRoot /var/www/yoursubdomain.example.com/public_html
	    ErrorLog ${APACHE_LOG_DIR}/error.log
	    CustomLog ${APACHE_LOG_DIR}/access.log combined
	

Save and close the file.

Step 6: Enable the Virtual Host file

In previous step that we have created the virtual host file, you must enable them. Apache includes some tools that allow you to do this.

You’ll be using the a2ensite tool to enable each of your sites.

sudo a2ensite subdomain.example.com.conf

Before reloading your server, you have to disable the default site defined in 000-default.conf by using the a2dissite command.

sudo a2dissite 000-default.conf

Next, command to test the configuration errors:

sudo apache2ctl configtest

When you are finished the above process, restart Apache to make these changes take effect.

sudo systemctl restart apache2

Optionally, you can check the status of the server after all these changes with this below command.

sudo systemctl status apache2

That’s it! You should now be able to access your website using the subdomain name you configured. Repeat steps 2-6 for each additional virtual host you want to set up.

The post How to Create a Subdomain in DigitalOcean appeared first on .