WordPress is a free content management system used to build and maintain websites. Its ease of use and unique blogging features have helped it become the most popular blogging tool on the web.
Pre- requisite
Localhost local server(WAMP, XAMPP)
WordPress
X CROSS PLATFORM
APACHE
MYSQL/MARIADB
PHP
WINDOWS
APACHE - WEB SERVER
MYSQL - DATABASE
PHP
Localhost
In computer networking, “localhost” refers to the computer that a certain program is running on. For example, if you’re running a program on your own computer (like a web browser or local web development environment), then your computer is the “localhost”.
To run the website in localhost, there is a requirement of server. WAMP and XAMP are the local servers.
Wordpress
To create wordpress based website you need wordpress file, which can be downloaded from Wordpress’s site.
TO DOWNLOAD SERVER:
Download xampp from google
Install the Software
Get the XAMPP file which is compatible for your system.
Step 1: Start xampp server,that you have installed in your system.
Start the service ( Apache and MySQL )
Now the xampp server is ready to be used.
Step 2: Copy the wordpress file, that you have downloaded from the the wordpress’s site and paste it to the the location- C:\xampp\htdocs
Extract the zip file and rename it.
Step 3: Go to browser, and type “localhost” to the address bar:
The homepage of localhost will be appeared:
To create a website in wordpress, you have to create database first.
1. In Localhost home page, go to phpmyadmin option:
2. Create database:
click on new on your left side above all other databases or click on database option to create.
This will create your database.
Step 4: After that, type localhost / foldername of your website in the address bar
Installation of wordpress
Select the language and continue….
After this, the following window will appear. In this you must have to five things that is marked below:
The database name will be the same database that you have created earlier.
Note: In Local host, the username = root And password must be blank.
After this, Installation is completed.
Site Title we add out website name that we are looking to be names.
Username: we add our username when we use to login on website dashboard.
Password: we add our password to use along with username to login in website dashboard
After filling the above form, click the Install WordPress button.
Now the dashboard will appear.
Download XAMPP:
Go to the official XAMPP website at https://www.apachefriends.org/index.html.
Download the version of XAMPP compatible with your operating system (Windows, macOS, Linux).
Install XAMPP:
Once the download is complete, run the XAMPP installer.
Follow the installation wizard's instructions.
Choose the default installation path or customize it if needed.
Complete the installation process.
Start XAMPP:
After installation, open the XAMPP Control Panel.
Start the Apache and MySQL modules by clicking on the "Start" buttons next
Download WordPress:
Go to the official WordPress website at https://wordpress.org/download/.
Download the latest version of WordPress.
Extract WordPress Files:
Locate the downloaded WordPress zip file.
Extract the contents of the zip file.
Move WordPress to htdocs:
Navigate to the XAMPP installation directory.
Inside the XAMPP directory, find the htdocs folder.
Move the entire extracted WordPress folder into the htdocs folder. You can rename the WordPress folder if desired.
Create Database:
Open a web browser and go to http://localhost/phpmyadmin.
Log in with the default username (usually "root") and password.
Click on "Databases" and create a new database for WordPress. Remember the database name.
Configure WordPress:
Open a web browser and go to http://localhost/wordpress (replace "wordpress" with the name of the folder you moved into htdocs).
Select your preferred language and click "Continue."
WordPress will ask for database details. Use the database name, username ("root"), and password (leave it blank) set during XAMPP installation.
Click "Submit" and then "Run the install."
Fill in the WordPress installation form with your site details, such as site title, username, password, and email address.
Click "Install WordPress."
After installation, you'll be prompted to log in to your WordPress dashboard using the username and password you just created.
Log in to your WordPress dashboard.
In the left-hand menu, click on "Posts" and then click "Add New".
Add a title for your post in the title field.
Enter your post content in the main text area.
You can format your text using the formatting toolbar above the text area.
Add categories and tags to your post on the right-hand side if desired.
Once you're finished, click the "Publish" button to make your post live on your website.
Creating a Page:
From the WordPress dashboard, click on "Pages" and then click "Add New".
Add a title for your page in the title field.
Enter your page content in the main text area.
You can format your text using the formatting toolbar above the text area.
Once you're finished, you can either publish your page immediately by clicking the "Publish" button, or you can save it as a draft to continue working on it later.
Log in to Your WordPress Dashboard:
Enter your website's URL followed by "/wp-admin" in your browser's address bar.
Log in with your username and password.
Navigate to the Themes Page:
Once logged in, you'll be in the WordPress admin area. Look for "Appearance" in the left-hand menu and click on it.
From the dropdown menu, select "Themes."
Choose a Theme:
You'll see a list of available themes on the Themes page.
Browse through the available themes or use the search bar to find a specific one.
Click on the theme you want to activate to see more details.
Activate the Theme:
After selecting a theme, you'll see an "Activate" button. Click on it to activate the theme.
WordPress will now apply the selected theme to your website.
Adding Pages to the Menu:
Go to the WordPress dashboard and click on "Appearance" and then "Menus".
If you haven't created a menu yet, click on the "create a new menu" link and give your menu a name, then click the "Create Menu" button.
On the left side, you'll see a box labeled "Pages". Check the pages you want to add to your menu and then click the "Add to Menu" button.
Your selected pages will appear in the menu structure on the right side. You can drag and drop them to rearrange the order if needed.
Once you've arranged your menu items as desired, select the menu location where you want the menu to appear (this will vary depending on your theme).
Finally, click the "Save Menu" button to save your changes.
Installing Elementor Plugin:
Log in to WordPress Dashboard:
Open a web browser and navigate to your WordPress admin login page (usually http://yoursite.com/wp-admin).
Enter your username and password, then click "Log In."
Navigate to Plugins:
Once logged in, you'll be on the WordPress dashboard.
From the left sidebar menu, hover over "Plugins" and click on "Add New."
Search for Elementor:
In the "Add Plugins" page, type "Elementor" into the search bar.
Press "Enter" to search for the Elementor plugin.
Install Elementor:
You should see the Elementor plugin listed in the search results.
Click on the "Install Now" button next to the Elementor plugin.
WordPress will download and install the plugin automatically.
Activate Elementor:
After installation, the "Install Now" button will change to an "Activate" button.
Click on the "Activate" button to activate the Elementor plugin for your website.
Create a New Page:
From the WordPress dashboard, navigate to "Pages" > "Add New."
Give your page a title and click on the "Edit with Elementor" button.
Edit with Elementor:
You'll be taken to the Elementor editor interface, where you can design your page visually.
On the left side of the screen, you'll find the Elementor panel with various elements and widgets you can use to build your page.
Add Elements:
To add elements to your page, simply drag and drop them from the Elementor panel onto the canvas.
Elements include headings, text, images, buttons, videos, and more.
Edit Elements:
Click on any element on the canvas to select it.
You can then edit the element's content, style, and settings using the Elementor panel on the left or by directly interacting with the element on the canvas.
Customize Layout:
You can customize the layout of your page by adding sections and columns.
Click on the "+" icon in the Elementor panel to add a new section.
Drag and drop columns into the section to create a layout.
Preview and Publish:
Once you've designed your page, you can preview how it looks by clicking on the "Preview" button at the bottom of the screen.
If you're satisfied with the design, click on the "Publish" button to make your page live on your website.
Explore Advanced Features (optional):
As you become more familiar with Elementor, you can explore its advanced features, such as global widgets, dynamic content, theme builder, and more.
These features allow you to create complex and dynamic designs for your website.
Log in to WordPress Dashboard:
Open a web browser and navigate to your WordPress admin login page (usually http://yoursite.com/wp-admin).
Enter your username and password, then click "Log In."
Navigate to Plugins:
Once logged in, you'll be on the WordPress dashboard.
From the left sidebar menu, hover over "Plugins" and click on "Add New."
Search for the Plugin:
In the "Add Plugins" page, type "Call Now Button" into the search bar.
Press "Enter" to search for the "Call Now Button – The #1 Click to Call Button for WordPress" plugin.
Install the Plugin:
You should see the plugin listed in the search results.
Click on the "Install Now" button next to the plugin.
WordPress will download and install the plugin automatically.
Activate the Plugin:
After installation, the "Install Now" button will change to an "Activate" button.
Click on the "Activate" button to activate the "Call Now Button" plugin for your website.
Configure Plugin Settings:
After activating the plugin, navigate to "Settings" > "Call Now Button" from the left sidebar menu.
In the plugin settings page, you can configure various options, such as button text, button position, button color, phone number, and more.
Customize the settings according to your preferences.
Save Changes:
Once you've configured the plugin settings, scroll down to the bottom of the page and click on the "Save Changes" button to save your settings.
Add Call Now Button to Your Website:
The "Call Now Button" should now be displayed on your website according to the settings you configured.
You can check your website's front-end to see the button in action.
Depending on your settings, the button will be displayed in the specified position (e.g., fixed position, floating, etc.) with the specified text and color.
Test the Button:
Test the "Call Now Button" to ensure it's functioning correctly.
Click on the button to initiate a call to the specified phone number (if you have a mobile device connected to make calls).
Adjust Settings as Needed:
If you need to make any changes to the button settings, you can always go back to the plugin settings page and modify them accordingly.
Remember to save your changes after making adjustments.
Log in to WordPress Dashboard:
Open a web browser and navigate to your WordPress admin login page (usually http://yoursite.com/wp-admin).
Enter your username and password, then click "Log In."
Navigate to Plugins:
Once logged in, you'll be on the WordPress dashboard.
From the left sidebar menu, hover over "Plugins" and click on "Add New."
Search for the Plugin:
In the "Add Plugins" page, type "My Sticky Elements" into the search bar.
Press "Enter" to search for the "All-in-one Floating Contact Form, Call, Chat, and 50+ Social Icon Tabs – My Sticky Elements" plugin.
Install the Plugin:
You should see the plugin listed in the search results.
Click on the "Install Now" button next to the plugin.
WordPress will download and install the plugin automatically.
Activate the Plugin:
After installation, the "Install Now" button will change to an "Activate" button.
Click on the "Activate" button to activate the "My Sticky Elements" plugin for your website.
Configure Plugin Settings:
After activating the plugin, navigate to "Sticky Elements" from the left sidebar menu.
In the plugin settings page, you can configure various options, such as contact form settings, social icon settings, chat settings, appearance settings, and more.
Customize the settings according to your preferences.
Save Changes:
Once you've configured the plugin settings, scroll down to the bottom of the page and click on the "Save Changes" button to save your settings.
Add Sticky Elements to Your Website:
The "Sticky Elements" should now be displayed on your website according to the settings you configured.
Depending on your settings, you'll have floating contact forms, call buttons, chat buttons, social icon tabs, etc.
Test the Elements:
Test the sticky elements to ensure they're functioning correctly.
Click on the contact form, call button, chat button, or social icon tabs to see if they're working as expected.
Adjust Settings as Needed:
If you need to make any changes to the sticky elements settings, you can always go back to the plugin settings page and modify them accordingly.
Remember to save your changes after making adjustments.
Installation: You need to have a WordPress website set up to use Smart Slider 3. You can install the plugin from the WordPress Plugin Directory or upload it manually.
Interface: Smart Slider 3 has an intuitive interface with a drag-and-drop builder, making it easy to create and customize sliders.
Templates: The plugin provides pre-built slide templates to help you get started quickly. You can choose a template and then customize it according to your needs.
Responsive Design: Smart Slider 3 offers options to ensure that your sliders look great on all devices, including desktops, tablets, and smartphones.
Animation Effects: You can add animation effects to slides and layers to make your slider more dynamic and engaging.
Install and Activate Smart Slider 3:
Go to your WordPress dashboard.
Navigate to "Plugins" > "Add New."
Search for "Smart Slider 3" and install it.
Activate the plugin.
Create a New Slider:
After activating the plugin, go to "Smart Slider" in your WordPress dashboard.
Click on "New Slider" to create a new slider.
Choose a Slider Type:
Smart Slider 3 offers different types of sliders. Choose the one that suits your needs (e.g., Simple Slider, Fullwidth Slider, Carousel, etc.).
Add Slides:
Once you've chosen a slider type, you'll be taken to the slide editor.
Click on "Add Slide" to create a new slide.
Customize the slide content, background, and settings as desired.
Customize Slide Content:
You can add text, images, buttons, videos, and other content to your slides.
Use the drag-and-drop editor to position and style the elements on the slide.
Configure Slider Settings:
Go to the "Slider Settings" tab to configure global settings for your slider, such as autoplay, navigation controls, and transition effects.
Preview and Publish:
Once you've finished customizing your slider, click on "Save" to save your changes.
Preview your slider to see how it looks on your website.
Finally, click on "Publish" to make your slider live on your WordPress site.
Install and Activate the Plugin:
Go to your WordPress dashboard.
Navigate to "Plugins" > "Add New."
Search for "Translate WordPress – Google Language Translator" in the search bar.
Install the plugin and then activate it.
Access Plugin Settings:
After activating the plugin, go to "Settings" > "Google Language Translator" in your WordPress dashboard.
Here, you'll find the plugin settings interface.
Choose Translation Method:
In the plugin settings, you'll have options to choose the translation method. You can opt for Google's automatic translation or manual translation using language files.
Select Languages:
Choose the languages you want to make available for translation on your website. You can select from a wide range of languages supported by Google Translate.
Placement Options:
Decide where you want the language switcher to appear on your website. You can choose to display it as a dropdown menu, flags, or inline.
Customize Appearance:
Customize the appearance of the language switcher to match your website's design. You can adjust colors, styles, and sizes.
Language Switcher Widget:
Optionally, you can add the language switcher widget to your website's sidebar or footer by going to "Appearance" > "Widgets" and adding the "Google Language Translator" widget to a widget area.
Save Settings:
Once you've configured the plugin settings according to your preferences, make sure to save your changes.
Test Translation:
Visit your website and test the language switcher to ensure that translations are working correctly.
Monitor Performance:
Keep an eye on the performance of the translation feature on your website. Make adjustments to settings as needed to improve user experience.
Install and Activate the Plugin:
Go to your WordPress dashboard.
Navigate to "Plugins" > "Add New."
Search for "Cool flipbox" in the search bar.
Install the plugin and then activate it.
Access Plugin Settings:
After activating the plugin, go to "Settings" > "Cool flipbox" in your WordPress dashboard.
Here, you'll find the plugin settings interface.
Create a New Flipbox:
In the plugin settings, you'll find options to create new flipboxes.
Click on "Add New" or "Create New Flipbox" to begin creating a new flipbox.
Configure Flipbox Settings:
Customize the flipbox by adding content to the front and back sides.
You can add text, images, buttons, or other elements to each side of the flipbox.
Choose Flipbox Animation:
Select the animation effect for the flipbox. Options may include flip, slide, fade, etc.
Adjust Flipbox Appearance:
Customize the appearance of the flipbox, such as colors, fonts, sizes, and spacing.
Placement Options:
Decide where you want to display the flipbox on your website. You may have options to embed it directly into pages or posts or use shortcodes.
Save Settings:
Once you've configured the flipbox settings according to your preferences, make sure to save your changes.
Preview and Publish:
Preview the flipbox to see how it looks on your website.
If everything looks good, publish the flipbox to make it live on your WordPress site.
Test Flipbox:
Visit your website and test the flipbox to ensure that animations and content display correctly.
Customization and Further Tweaks:
Experiment with different settings and options to customize the flipbox further.
Monitor user interaction with the flipbox and make adjustments as needed for better engagement.
Log in to Your WordPress Dashboard:
Enter your website's URL followed by "/wp-admin" in your browser's address bar.
Log in with your username and password.
Navigate to Plugins:
Once logged in, you'll be in the WordPress admin area. Look for "Plugins" in the left-hand menu and click on it.
Add New Plugin:
From the Plugins page, click on the "Add New" button at the top of the page.
Search for WooCommerce:
In the search bar on the right, type "WooCommerce" and press Enter.
WooCommerce should appear as the first result. Click on the "Install Now" button next to it.
Activate WooCommerce:
After installation, you'll see an "Activate" button. Click on it to activate the WooCommerce plugin.
WooCommerce is now installed and activated on your WordPress website.
Access the WooCommerce Settings:
After activating WooCommerce, you'll see a WooCommerce option added to your WordPress admin menu. Click on it.
Go through the initial setup wizard if prompted. This wizard helps you configure basic settings for your store.
Add a New Product:
Once you've completed the setup wizard (or skipped it), click on the "Products" tab.
Click on the "Add Product" button to create a new product.
Enter Product Details:
On the Add Product page, enter the product details.
Add a title for your product in the Product Name field.
Enter a detailed description of the product in the Description field.
Set the product's price in the Product Data section.
Add Product Image:
Scroll down to the Product Image box and click on the "Set product image" link.
Upload an image from your computer to represent the product.
You can add additional images in the Product Gallery section if needed.
Publish the Product:
Once you've entered all the necessary details, click the "Publish" button on the right side of the page.
Your simple product is now published and available for sale on your WooCommerce store.
Optional: Configure Product Variations (if applicable):
If your product has variations such as size or color, you can set them up by selecting the "Variable product" option under Product Data.
Configure attributes and variations according to your product's options.
Access the Attributes Page:
From your WordPress admin dashboard, navigate to Products > Attributes.
Add New Attribute:
Enter a name for your attribute, such as "Color" or "Size," in the Name field.
Click the "Add Attribute" button to create the attribute.
Configure Attribute Terms:
After adding the attribute, you'll see it listed on the Attributes page.
Click on the name of the attribute you just created to configure its terms (e.g., colors or sizes).
Enter each term (e.g., Red, Blue, Small, Medium, Large) on separate lines in the "Value(s)" field.
Click the "Save attributes" button to save your changes.
Navigate to the Product Edit Page:
Go to Products > All Products and click on the product you want to add variations to or create a new product.
Enable Variations:
In the Product Data section, select the "Variable product" option from the dropdown menu.
Add Attributes to Product:
Scroll down to the Attributes tab in the Product Data section.
Select the attribute you created earlier from the dropdown menu.
Check the "Visible on the product page" and "Used for variations" checkboxes.
Click the "Save attributes" button.
Create Variations:
After adding attributes, go to the Variations tab.
Click on the "Add Variation" button to create a new variation.
Choose "Create variations from all attributes" and click "Go."
WooCommerce will generate variations based on the attributes and their terms you've configured.
Assign Values to Variations:
For each variation, you can set specific values such as price, stock, and SKU.
Expand each variation to set these values accordingly.
Configure Variation Properties:
Set properties for each variation such as price, stock status, SKU, and any custom attributes.
You can also set a specific image for each variation if the variations have distinct visual differences (e.g., different colors).
Save Changes:
After configuring all variations, click the "Save changes" button to save your product.
Create Color and Size Attributes:
Create two attributes: "Color" and "Size" with their respective terms (e.g., Red, Blue for Color; Small, Medium, Large for Size).
Assign Attributes to Product:
Go to the product edit page and enable variations.
Add both "Color" and "Size" attributes to the product.
Generate Variations:
Create variations based on the attributes.
WooCommerce will generate variations for each combination of colors and sizes.
Configure Variation Properties:
Set prices, stock, and any other properties for each variation (e.g., Red, Small).
Save Changes:
Save the product after configuring all variations.
Install the Plugin:
Log in to your WordPress admin dashboard.
Navigate to Plugins > Add New.
Search for "Swatches by ClipMyDeals".
Click "Install Now" and then "Activate" the plugin.
Configure Attribute Swatches:
Go to WooCommerce > Swatches.
Click on "Add New" to create a new swatch.
Choose the attribute you want to create swatches for (e.g., Color, Size).
Add swatch options by entering the name, color, or image for each option.
Save the swatch.
Assign Swatches to Products:
Edit a product where you want to use attribute swatches.
In the Product Data section, select "Variable product".
Go to the Attributes tab and add the attributes you've created swatches for.
Configure the variations and assign swatches to each variation.
Save the product.
View Swatches on Frontend:
Visit the product page on your website.
You should see the attribute swatches displayed for customers to select their preferred options.
Install the Plugin:
Log in to your WordPress admin dashboard.
Navigate to Plugins > Add New.
Search for "Buy Now Button for WooCommerce".
Click "Install Now" and then "Activate" the plugin.
Configure Buy Now Button:
Go to WooCommerce > Settings > Buy Now Button.
Enable the "Enable Buy Now Button" option.
Customize the button text, color, and position according to your preference.
Save changes.
View Buy Now Button on Product Pages:
Visit any product page on your website.
You should see the Buy Now button displayed alongside the Add to Cart button.
Test Buy Now Functionality:
Click on the Buy Now button to ensure it redirects customers to the checkout page with the selected product added to the cart for immediate purchase.
Install WooCommerce Plugin (if not already installed):
Log in to your WordPress admin dashboard.
Navigate to Plugins > Add New.
Search for "WooCommerce".
Click "Install Now" and then "Activate" the plugin.
Install WooCommerce Stripe Payment Gateway Plugin:
Go to Plugins > Add New.
Search for "WooCommerce Stripe Payment Gateway".
Click "Install Now" and then "Activate" the plugin.
Configure Stripe Payment Gateway:
Go to WooCommerce > Settings > Payments.
Enable Stripe by clicking on the toggle switch.
Click on "Manage" next to the Stripe option to configure settings.
Enter your Stripe account details (API keys) in the provided fields.
Configure additional settings such as enabling payment request buttons, saving cards for future payments, etc.
Save changes.
Install UPI QR Code Plugin:
Go to Plugins > Add New.
Search for "UPI QR Code" or "UPI Payments".
Click "Install Now" and then "Activate" the plugin.
Configure UPI QR Code Plugin:
Depending on the specific UPI QR Code plugin you've chosen, settings may vary. However, most plugins will require similar steps.
Look for plugin settings either under WooCommerce settings or as a separate menu item.
Enter your UPI ID or account details.
Configure other settings such as QR code size, display text, etc.
Save changes.
View Payment Options on Checkout Page:
Visit any product page on your website and add a product to the cart.
Proceed to the checkout page.
You should now see both credit card payment options (through Stripe) and UPI payment options (through QR code) available for customers to choose from.
Test Payment Gateway Functionality:
Place a test order using each payment method to ensure that transactions are processed correctly.
Make sure that payments are reflected in your Stripe dashboard for credit card payments and in your UPI account for UPI payments.
What is Hosting?
Hosting is a service that allows individuals and organizations to make their website accessible via the World Wide Web.
Websites are hosted or stored on servers, which are specialized computers that are always connected to the internet.
Types of Hosting:
Shared Hosting: Multiple websites share resources on the same server.
VPS Hosting: Virtual Private Server provides dedicated resources within a shared environment.
Dedicated Hosting: Entire server resources are dedicated to a single website.
Cloud Hosting: Websites are hosted on a network of interconnected virtual and physical cloud servers.
Visit GoDaddy Website:
Open your web browser and go to the GoDaddy website (www.godaddy.com).
Select Hosting Plan:
Browse through the hosting plans offered by GoDaddy (Shared, VPS, Dedicated, etc.).
Choose a plan that suits your needs and click on "Select" or "Get Started."
Select Domain (if required):
If you don't have a domain yet, GoDaddy may offer you the option to register a new domain or use an existing one.
Follow the prompts to select or register a domain.
Review and Add to Cart:
Review your selected hosting plan, domain, and any additional services.
Click on "Add to Cart" or "Continue to Cart."
Checkout:
Proceed to checkout and complete the payment process by providing your payment details.
Follow any additional steps required for account creation or verification.
Access GoDaddy Account:
Log in to your GoDaddy account using your credentials.
Navigate to Hosting Dashboard:
After logging in, you'll land on your account dashboard. Find your hosting plan and click on it to access the hosting dashboard.
Set Up cPanel:
Most hosting plans come with cPanel (Control Panel) for managing your hosting account.
Look for the option to access cPanel and click on it.
Explore cPanel:
Inside cPanel, you'll find various tools and features for managing your hosting account.
Explore different sections such as File Manager, Domains, Email, Databases, etc.
Install Applications (Optional):
Many hosting providers, including GoDaddy, offer one-click installers for popular applications like WordPress, Joomla, Drupal, etc.
Use the one-click installer to install applications if needed.
Configure Settings:
Review and configure settings such as domain management, email accounts, database creation, etc., as per your requirements.
Upload Website Files (if applicable):
If you already have a website, use the File Manager or FTP to upload your website files to the server.
Manage DNS (if using GoDaddy Domain):
If you're using a domain registered with GoDaddy, you can manage DNS settings directly from the GoDaddy dashboard to point your domain to your hosting server.