age 1 of 42

Lesson 11 – Develop Responsive Web Design (Part 5)

Objectives:
1. Identify Content Management System (CMS).
2. Install the CMS to client server using FTP.
3. Upload web content to CMS.
4. Publish final website with CMS.

Content:

Content management system (CMS) is identified

CMS stands for content management system — a software platform that allows users to create, edit,
store and publish digital content on a website, through a user-friendly interface.

Types of CMS In Web Design & Development

While most content management systems allow users to create, modify and manage content, not all
systems were designed with the same purpose.

There are several different types of CMS in web design and development:

1. Enterprise Content Management (ECM)

An enterprise content management (ECM) system is a platform that enables the management of an
organization’s structured and unstructured data. This means that it handles document management, as
well as files such as web page content, images, video and multi-media files.

An ECM system is a complex automated system that includes software, along with a set of strategies and
tools that help store, organize and deliver content to the right audiences.

The Box is one of the enterprise management systems [Source: Box]

 age 2 of 42

2. Document Management System (DMS)

A document management system (DMS) is a less refined and advanced version of an ECMS — it
manages how simpler documents are created, reviewed and collaborated on. It typically manages
documents in traditional formats including PDF, Word and Excel.

An example of a DMS is ClickUp [Source: ClickUp]

3. Web Content Management System (WCMS)

A web content management system (WCMS) is similar to an ECM, but created specifically for web
content. A WCMS features a publishing tool and allows users to manage website information by creating
and maintaining content, such as product pages, without any knowledge of programming languages.

An example of a WCM system is Joomla [Source: Joomla]

 age 3 of 42

4. Component Content Management System (CCMS)

A component content management system (CCMS) allows users to manage digital content on a
component level. A component is a piece of content such as a word, paragraph, video or image, that is
independent.

The difference between a regular CMS and a CCMS is that instead of managing content one full page at a
time, a CCMS lets you manage components of content.

An example of a CCMS is Storyblok [Source: Storyblok]

How Does A CMS Work?

As mentioned, a CMS is a software application that allows you to create and modify digital content. This
software application has two components:

A content management application (CMA): An interface that allows content creators to create, modify,
publish or remove content from a website without the need for coding skills

A content delivery application (CDA): The backend of a website that facilitates content management
and delivery by taking the content a user creates and displaying it to website visitors

Here’s how to get started with a CMS:

1. Choose A CMS

Research your CMS options and weigh the deliverables. From an easy-to-use interface to advanced
search capabilities and multilanguage support, different platforms offer different benefits. The right CMS
is the one that aligns with your website’s needs and requirements.
 age 4 of 42

2. Pick A Domain Name

Choose a domain name for your website. You can browse available names on GoDaddy and purchase a
domain name for as low as $1. Ensure the name you choose is easy to pronounce, memorable and on-
brand.

3. Purchase Hosting

Choose a hosting provider based on the features offered and a pricing plan that aligns with your budget.
Some of the most popular hosting providers include Bluehost and HostGator.

4. Install The CMS

The next step is to install the CMS. This step may vary depending on the platform you choose, but it is
typically simple and quick to set up, as most CMS have pre-defined steps for installation.

5. Install Plugins

Next, you need to install plugins to extend the functionality of your website, such as SEO tools or a
plugin to create forms. You can choose between free and paid plugins, depending on your goals.

6. Customize Your Website

If you want a unique website that represents your brand, customize your site design by choosing among
available free and paid themes, or hire a web designer to create a custom theme for you.

7. Upload Content

The final step is to upload your content. Typically, templates will have pre-designed content pages as
drafts that you can edit and update with your info. You can also create your custom pages and create
your own content types.

Simply fill out the SEO fields and hit publish!

Benefits of Using A CMS

A content management system offers the following key benefits:

1. Requires No Coding Skills

One of the biggest benefits of a CMS is that anyone can use it, as it doesn’t require coding skills. With a
CMS, you can build a website page by page, even if you’re not skilled in web design and web
development. You can easily create pages, and content, customize the design and more.

2. Facilitates Easy Collaboration

 age 5 of 42

A CMS allows multiple users to use the system simultaneously and collaborate on projects. This means
that one user could be working on creating or updating content, while a developer could be working on
security protocols at the same time.

3. Offers Built-In Features

Another benefit of a CMS is that it comes with a wide variety of built-in features that you can add to
your website to extend its functionality and optimize the content.

For example, you can install SEO plugins to ensure your website content is fully optimized for search
engines. If you’re using WordPress, you can install All In One SEO or SEOPress.

4. Allows Access to Multiple Users

A CMS allows you to create accounts for as many users as you need. Simply create a separate account
for each user, and they can log into the CMS and manage or update content.

5. Enables Content Scheduling

When you use a CMS, you can schedule content easily without any technical skills. With a few clicks, you
can schedule anything from blog posts to landing pages and emails to be published or sent at certain
times.

6. Provides Instant Updates

You can easily update your CMS website by yourself, without the help of a developer. You can make
changes on your own, from replacing an image to redesigning the website. Just log into your account, go
to your dashboard and edit/update any web page.

Top 5 CMS Platforms

When it comes to CMS platforms, there are numerous options. While the basics are similar, each
platform has certain advantages, depending on what you’re looking for.

Here’s a breakdown of the most popular CMS platforms:

1. WordPress

Without a doubt, WordPress is the most popular website builder and CMS platform out there for any
type of website or business. We would know; we specialize in custom WordPress sites.

Building a website is free on WordPress, but you need to purchase hosting and a custom domain. Over
40% of websites across the globe are built in WordPress, including well-known brands such as The New
York Times.

Building a site using WordPress is quick and easy, and you can customize it using ready-made themes
and plugins from the WordPress directory. No need for a wireframe as you can set up your website
 age 6 of 42

within minutes. Posting or updating content or creating pages is very easy, as the CMS is simple and
user-friendly.

Pros:

 Free website builder

 Affordable hosting
 User-friendly
 SEO friendly
 Large number of plugins available

Cons:

 You need to install multiple plugins for additional features

 Frequent updates can disrupt the operation

Pricing: WordPress offers a free plan and a range of paid plans, including Personal (starting at
$4/month), Premium ($8/month), Business ($25/month) and eCommerce ($45/month).

[Source: WordPress]

2. Shopify

Close to four million websites are built on Shopify, a leading platform in the eCommerce industry.

The platform’s CMS is intuitive and easy to use, with lots of built-in features for everything your e-store
could possibly need. Our Shopify experts recommend this platform to medium-sized or fast-growing
businesses.

There are multiple plugins to add if you want to customize your website, such as Plug In SEO, which
helps you optimize your store for search engines, or Wishlists Plus, which allows users to pick their
favorite products and bookmark them.

You can also extend the platform’s functionality by integrating third-party apps such as Mailchimp for
adding to or updating your subscribers list.

Among the biggest brands in the world that use Shopify is Red Bull.
 age 7 of 42

Pros:

 Easy to use
 Customizable
 Hosting is included
 SEO tools are available
 Great customer service and 24/7 support via chat, email and Shopify Academy

Cons:

 Content editor isn’t as flexible as other website builders

 Shopify charges transaction fees and subscription fees for the apps you’re using

Pricing: The Basic plan starts at $29/month. There’s also a Shopify plan starting at $79/month and
Advanced plan starting at $299/month.

[Source: Shopify]
3. Drupal

Drupal is highly praised for its reliability and performance, although it is not as simple as WordPress.

Drupal comes with thousands of free themes, modules and advanced security features that allow you
to customize your website. The open-source platform does require some web development experience,
so it is ideal for large businesses and government agencies that require large databases and are content-
heavy.

For example, the official Australian Government uses Drupal, and so does the electronic car
brand Tesla.

Pros:

 Open-source and free code

 age 8 of 42

 Easy to create your own content (web forms, blog posts, pages)
 High security
 Excellent performance that supports high traffic
 Easy to scale

Cons:

 Requires basic coding skills

 Advanced interface, created for web professionals

Pricing: Open-source code is free on Drupal, so you only need to pay for hosting.

[Source: Drupal]

4. Magento

Magento, now known as Adobe Commerce, is another CMS leader in the eCommerce industry,
with more than 250,000 companies worldwide using the platform. Our certified Magento
developers recommend this solution to enterprise-level businesses.

Magento makes content management easy. The Page Builder allows you to simply choose a page layout
and add your content. Some pages such as Home and About Us are already there by default.

The flexible, open-source platform allows you to modify the source code to fit your website needs and
requirements, but it does require a bit of a learning curve. Typically, this CMS is reserved for a certified
Magento development agency, which can take advantage of the numerous extensions it offers.

One of the major brands that use Magento is Coca-Cola.

Pros:

 Plenty of features available

 Open-source platform can be modified to your requirements
 Scalable
 age 9 of 42

 A large community of users

 Regular security updates

Cons:

 The platform has a steep learning curve

 Can cause your website to slow down if you don’t have a dedicated server

Pricing: Magento is available in several pricing options. The open-source Magento Community Edition is
free, so you pay for hosting only. The Enterprise Edition is proprietary, so you pay an annual fee, starting
at $22,000/year.

[Source: Magento]

5. Joomla

Like WordPress, creating a website on Joomla is free, but you need to pay for hosting and purchase a
domain name.

The platform is simple and easy to use. It features over 10,000 free extensions and templates, so you
can customize your website. It allows multi-user permissions as well, so multiple users can work in the
CMS simultaneously.

Over 2 million websites across the globe use Joomla, including the Swedish furniture giant Ikea.

Pros:

 Free open-source code/no licensing fees

 Easy to install
 SEO friendly
 Wide range of extensions available
 age 10 of 42

 Premium templates available

 Active community

Cons:

 Creating professional web design requires a professional developer

 Limitations on customization

Pricing: Joomla offers free open-source code, so you only need to pay for hosting.

[Source: Joomla]

CMS is installed to client server using FTP

Don’t forget to set up FTP accounts for all your sites to streamline the process and ensure smooth
operations. With an FTP account, you can easily manage data transfers in your WordPress files through
the cPanel dashboard. This allows you to upload, download, and modify files with ease, ensuring smooth
interaction with the Apache server while maintaining proper permission settings.

Get a Clear Understanding of What FTP is and How it Works with WordPress.

FTP, or File Transfer Protocol, is a standard network protocol used

to transfer files between a client computer and a server over the
internet. It allows for the seamless transfer of files from one
location to another, whether it be a single file or an entire folder.

Additionally, FTP provides support for various layers of security to

ensure the safe and secure transmission of files. It allows for the
seamless transfer of files from one location to another, whether it
be a single file or an entire folder.
 age 11 of 42

In the context of WordPress, FTP support allows you to directly access your website’s files and folders on
the server. With FTP, you can easily manage and update your website’s content. It’s an essential tool for
website administrators and expert developers to efficiently make changes and resolve issues.

Whether you need to upload files, edit code, or troubleshoot problems, FTP support is a crucial feature
that ensures seamless website management. This can be particularly useful when you need to make
manual changes or upload large files that cannot be handled through the WordPress Admin
Dashboard alone.

For example, if you have a large file that needs to be uploaded, you can create a folder on your
computer and then transfer it to your website using FTP. This way, you can easily manage and organize
your files outside of the WordPress platform.

Additionally, if you have multiple websites hosted on different servers, you can use a FTP client to
connect to each server and make changes directly on the server’s files. Overall, using FTP and organizing
your files in folders can greatly.
For example, if you have a large file that needs to be uploaded, you can create a folder on your
computer and then transfer it to your website using FTP. This way, you can easily manage and organize
your files outside of the WordPress platform.

To establish an FTP connection, you will need the best FTP client software installed on your computer to
access and transfer site files from one folder to another. Some popular options
include FileZilla, Cyberduck, and WinSCP.

Once you have set up the software and entered your website’s FTP credentials (host address, username,
password), you will be able to navigate through your site’s files and directory structure just like
browsing folders on your local machine. This will allow you to easily manage and organize the files on
your website. This will allow you to easily manage and organize the files on your website.

Learn About the Benefits of Using FTP as a Beginner in WordPress.

As a beginner in WordPress, using FTP can provide several benefits that enhance your overall experience
with managing your website.

 Direct file manipulation: With FTP access, you gain direct control over your site’s files. This allows you to
easily edit and manage your files. This allows you to easily edit code files such as themes or plugins
without relying solely on the WordPress admin interface.
 Uploading large files: Uploading large media files through the WordPress dashboard can sometimes be
limited by file size restrictions or timeouts. By utilizing FTP, you can bypass these limitations and
efficiently transfer larger files to your server.
 Troubleshooting: When encountering issues with plugins or themes that may cause conflicts or errors
within WordPress, accessing them via FTP enables you to quickly disable problematic components by
renaming their respective directories or files.
 Backup management: Using an FTP client makes it convenient to download copies of important website
data directly from the server for backup purposes. This ensures that even if something goes wrong with
your website, you have a local copy of your files readily available.
 age 12 of 42

Familiarize Yourself with Key Terms and Concepts Related to FTP.

To effectively navigate the world of FTP, it is essential to familiarize yourself with some key terms and
concepts related to site files.

1. FTP Client: This refers to the software you use on your computer to connect to an FTP server and
transfer site files. It allows you to transfer files between your local machine and the server.
2. FTP Server: The remote server where your website’s files are stored.

Choosing the Right FTP Program for WordPress

Explore Different FTP Programs Available for WordPress Users.

You have several options at your disposal. Let’s explore some of the popular FTP programs that are
widely used by WordPress users to manage their site files.

1. FileZilla: It is a free and open-source FTP program that allows users to transfer site files easily. It offers a
user-friendly interface and robust features, making it a popular choice for managing and organizing site
files efficiently. It supports multiple platforms, making it accessible to both Windows and Mac users.
With its drag-and-drop functionality, transferring files to and from your WordPress site becomes a
breeze.
2. Cyberduck: Another popular choice among WordPress users is Cyberduck. This FTP program is known
for its simplicity and compatibility with various operating systems, including Windows and macOS.
Cyberduck also integrates seamlessly with other cloud storage services like Amazon S3 and Google
Drive, providing you with more flexibility in managing your files.
3. WinSCP: If you are a Windows user looking for a reliable FTP program, WinSCP might be the right choice
for you. It not only supports secure file transfer protocols like SFTP and SCP but also allows you to
synchronize your local files with those on your WordPress site effortlessly.

Understand the Criteria to Consider When Selecting an FTP Program.

When deciding which FTP program suits your needs best, there are certain criteria that you should
consider:

1. User Interface: A well-designed user interface can significantly enhance your experience while using an
FTP program. Look for programs that offer an intuitive layout, clear navigation menus, and customizable
settings.
2. Security Features: Ensuring the security of your file transfers is crucial when selecting an FTP program.
Look for options that support secure protocols like SFTP (SSH File Transfer Protocol) or SSL/TLS
encryption.
3. Performance: The speed at which files are transferred between your computer and the server can
impact productivity. Consider programs that offer efficient transfer speeds to save time during the
upload and download process.
4. Compatibility: Check if the FTP program you are considering is compatible with your operating system.
Some programs may only support Windows, while others cater to both Windows and macOS users.
Creating an FTP Account for Your WordPress Site
 age 13 of 42

Setting up an FTP account specifically for your WordPress site is a crucial step in managing and
maintaining your website. With the right credentials and security measures, you can ensure smooth file
transfers and seamless updates.

Step-by-Step Instructions

To create an FTP account for your WordPress site, follow these simple steps:

1. Accessing Your Hosting Account: Log in to your hosting provider’s website using your login credentials.
If you are unsure how to access your hosting account, reach out to their support team for assistance.
2. Navigating to FTP Settings: Locate the section or tab to manage your website’s FTP accounts once
logged in. This may vary depending on your hosting provider’s interface.
3. Creating a New FTP Account: Look for the option to add a new FTP account or user. Click on it to
proceed with the setup process.
4. Choosing Username and Password: Select a unique username for your new FTP account. It is advisable
not to use common usernames like “admin” or “user” as they can be easily targeted by malicious actors.
Generate a strong password that includes a combination of letters, numbers, and special characters.
5. Assigning Directory Permissions: Determine the level of access you want to grant this new user by
setting directory permissions accordingly. Be cautious when granting write permissions as it allows users
to modify files on the server.
6. Linking User with Website: Associate this newly created user with your WordPress site by specifying the
appropriate directory path or linking it directly with the root folder of your website.
7. Ensuring Proper Security Measures: To enhance security, consider enabling Secure File Transfer
Protocol (SFTP) instead of traditional File Transfer Protocol (FTP). SFTP encrypts data during transfer,
making it more secure against potential threats.
8. Saving and Testing the Account: Once you have filled in all the necessary details, save the new FTP
account. To ensure everything is set up correctly, test the account by logging in using FTP clients such as
FileZilla or Cyberduck.
By following these step-by-step instructions, you can create a dedicated FTP account for your WordPress
site and streamline your file management process.
Remember to keep your login credentials safe and regularly update them to maintain the security of
your website.

Step-by-Step Guide: Setting Up FTP for WordPress

Setting up an FTP account for your WordPress website can provide you with greater control and
flexibility. In this step-by-step guide, we will walk you through the process of setting up an FTP
connection in WordPress, including configuring relevant settings and troubleshooting common issues
that may arise during setup.

Configuring Your FTP Program

Before diving into the steps, it is essential to choose a reliable FTP program that suits your needs. Once
you have selected one, follow these steps to configure it:

1. Launch your chosen FTP program and locate the “Site Manager” or “Preferences” option.
2. Click on “New Site” or a similar button to create a new connection.
3. Provide a name for your site (e.g., MyWordPressFTP) to easily identify it later.
 age 14 of 42

4. Enter the hostname or server address provided by your hosting provider.

5. Choose “FTP – File Transfer Protocol” as the protocol type.
6. Select “Use explicit FTP over TLS if available” or “Require explicit FTP over TLS” for secure connections.
7. Set the port number to 21 unless instructed otherwise by your hosting provider.
8. Specify your WordPress username and password in the appropriate fields.
9. Save the configuration settings.

Troubleshooting Common Issues

While setting up an FTP account is generally straightforward, some common issues may arise along the
way. Here are a few tips to troubleshoot such problems:

1. Double-check your login credentials: Ensure that you have entered the correct username and password
combination for your WordPress account.
2. Verify server details: Confirm that you have correctly entered the hostname or server address provided
by your hosting provider.
3. Check firewall settings: If you encounter connection issues, make sure that any firewall software
installed on your computer allows access to the necessary ports (typically 20 and 21 for FTP).
4. Disable passive mode: If you experience problems with directory listing or file transfers, try disabling
passive mode within your FTP program’s settings.
5. Contact your hosting provider: If all else fails, reach out to your hosting provider’s support team for
assistance. They can help troubleshoot any server-related issues that may be affecting your FTP
connection.
By following these steps and troubleshooting tips, you can set up an FTP account for your WordPress
website and gain greater control over file management.

Uploading Files to WordPress Using FTP

To upload files directly to your WordPress site, you can utilize an FTP client. This method allows for a
more efficient and organized approach to managing your website’s files and folders on the server.

Understanding File Structure and Organization

When using FTP to upload files to WordPress, it’s essential to have a clear understanding of the file
structure and organization within the server. This knowledge will help you navigate through directories
and ensure that your uploaded files are placed in the correct locations.

Within your WordPress installation, you’ll typically find key folders such as wp-admin, wp-content, and
wp-includes. These folders house important files that contribute to the functioning of your website. By
accessing these directories via an FTP client, you gain direct control over them.

To get started with uploading files, first connect to your server using an FTP client like FileZilla or
Cyberduck. Enter your FTP credentials (username, password, host) provided by your hosting provider.
Once connected successfully, you’ll see a split-screen interface displaying local files on one side (your
computer) and remote files on the other (server).

Maximizing Efficiency with Batch Uploading Techniques

 age 15 of 42

One advantage of using an FTP client is the ability to maximize efficiency by utilizing batch uploading
techniques. Instead of manually transferring each file individually, you can select multiple files or entire
folders for simultaneous upload.

Here’s how you can make use of batch uploading:

1. Select desired files/folders: In the local file view pane of your FTP client, navigate to the location where
your files are stored on your computer. Select either specific files or entire folders that you wish to
upload.
2. Upload selected items: Once selected, drag and drop them into the appropriate directory in the remote
file view pane representing your WordPress site on the server. The transfer process will begin
automatically.
Using this method saves time compared to uploading one file at a time. It also ensures that related files
are uploaded together, maintaining the integrity of your website’s structure.

Testing File Uploads

After uploading files to your WordPress site via FTP, it’s crucial to verify their successful transfer. This
can be done by creating a test file and placing it in the desired folder within your WordPress installation.
To create a test file:

1. Right-click within the remote file view pane of your FTP client.
2. Select “New File” or similar option.
3. Name the new file something unique, like “test-upload.txt” or “check-this-file.jpg.”

Enhancing WordPress Website Speed with FTP

Optimizing your WordPress website’s speed is crucial for providing a seamless user experience. One
effective way to achieve this is by utilizing FTP to optimize files and enhance the performance of your
site.

Compressing Images

Large image files can significantly slow down your website’s loading time. By compressing images, you
can reduce their file size without compromising on quality. This process involves removing unnecessary
data from the images, resulting in faster loading times for your visitors.

To compress images using FTP:

1. Connect to your website’s server using an FTP client such as FileZilla.

2. Navigate to the directory where your images are stored.
3. Select the images you want to compress and right-click on them.
4. Choose the option to compress or optimize the selected images.
5. Once the compression process is complete, upload the optimized images back to your server.

Minifying Code
 age 16 of 42

Another technique to improve website speed is by minifying code. Minification involves removing
unnecessary characters like white spaces, line breaks, and comments from HTML, CSS, and JavaScript
files. This reduces file sizes and allows browsers to load them faster.

To minify code using FTP:

1. Access your server through an FTP client.

2. Locate the files containing HTML, CSS, or JavaScript code that you want to minify.
3. Download these files onto your local machine.
4. Use a text editor or online tools specifically designed for code minification.
5. Copy and paste the code into these tools or use plugins available for popular text editors like Sublime
Text or Visual Studio Code.
6. Once you’ve minified the code, save it as a new file with a different name.
7. Upload these optimized files back onto your server.

Caching

Caching is a technique that stores frequently accessed data in temporary storage, allowing faster
retrieval. By implementing caching mechanisms on your WordPress website, you can significantly
improve its speed and reduce the load on your server.
To enable caching using FTP:

1. Connect to your server via FTP.

2. Locate your website’s root directory.
3. Look for a file called .htaccess or create one if it doesn’t exist.
4. Open the `..htaccess file in a text editor.
5. Add the following code to enable caching:

1 # Enable caching for images, CSS, and JavaScript files

2 <IfModule mod_expires.c>
3 ExpiresActive On
4 ExpiresByType image/jpg "access plus 1 year"
5 ExpiresByType image/jpeg "access plus 1 year"
6 ExpiresByType image/gif "access plus 1 year"
7 ExpiresByType image/png "access plus 1 year"
8 ExpiresByType text/css "access plus 1 year"
9 ExpiresByType application/javascript "access plus 1 year"
10 </IfModule>

Once you are done with the coding part, consider the following steps to update the changes:

1. Save the changes to the .htaccess file.

2. Upload the modified .htaccess file back to your server using FTP.
3. Caching is now enabled for your website, which should help improve its performance.
 age 17 of 42

Uploading and Downloading Files via FTP in WordPress

Downloading Files from Your WordPress Site Using FTP

To download files from your WordPress site using FTP, you’ll need to set up an FTP account and
establish a connection to your website’s server. Once connected, follow these steps:

1. Open your preferred FTP client software.

2. Enter the necessary credentials (username, password, host) to connect to your website’s server.
3. Locate the directory where your site files are stored on the server.
4. Navigate through the directories until you find the specific file you want to download.
5. Right-click on the file and select “Download” or simply drag and drop it onto your local computer.

By utilizing FTP access, you gain direct control over transferring files between your website’s server and
your local machine. This method is particularly useful when dealing with large files that may exceed
upload limits imposed by web hosting providers.

Efficiently Managing and Organizing Downloaded Files

Once you have downloaded files from your WordPress site via FTP, it’s important to manage and
organize them effectively for easy retrieval in the future. Consider implementing these strategies:

 Create a dedicated folder on your local computer specifically for storing downloaded files from your
website.
 Use descriptive names for downloaded files to quickly identify their purpose or content.
 Organize downloaded files into subfolders based on categories or date of download.
By organizing downloaded files systematically, you can save time searching for specific items later on.

Uploading Modified Files Back to Your Website

After making modifications to downloaded files locally, you might need to upload them back to your
WordPress site using FTP. Follow these steps:

1. Open your FTP client software once again.

2. Connect to your website’s server using the appropriate credentials.
3. Navigate to the directory where the modified file should be uploaded.
4. Select the modified file from its location on your local computer.
5. Right-click on the file and choose “Upload” or drag and drop it into the desired directory on the server.

By uploading modified files via FTP, you can ensure that your website reflects the changes you made
locally.
Remember to exercise caution when modifying files directly on your website’s server. Always keep
backups of original files before making any changes to avoid unintended consequences.
 age 18 of 42

Understanding the Difference Between FTP and SFTP/FTPS

Differentiate Between FTP, SFTP, and FTPS Protocols.

FTP (File Transfer Protocol), SFTP (SSH File Transfer Protocol), and FTPS (FTP over SSL) are all methods
used to transfer files between a client and a server. However, they differ in terms of their security
features and how they establish connections.

1. FTP: FTP is the oldest protocol among the three. It transfers files in plain text format, making it less
secure compared to SFTP or FTPS. The data transmitted through FTP can be intercepted by hackers,
potentially compromising sensitive information such as login credentials or personal data.
2. SFTP: SFTP is an extension of SSH (Secure Shell) protocol that provides secure file transfer capabilities.
It encrypts both commands and data during transmission, ensuring confidentiality and integrity. By
utilizing public key cryptography, SFTP offers strong protection against unauthorized access or
eavesdropping.
3. FTPS: FTPS adds an extra layer of security to traditional FTP by incorporating SSL/TLS encryption
protocols for data transmission. It uses certificates to verify the identity of the server and establish a
secure connection. This makes it more secure than standard FTP but less flexible than SFTP due to
potential firewall issues.

Understand the Security Implications of Each Protocol.

When considering which protocol to use for setting up an FTP account for your WordPress site,
understanding their security implications is crucial:

1. Security Strength:

 While all three protocols provide some level of security, SFTP offers the strongest protection due to its
use of SSH encryption.
 Both FTPS and SFTP are more secure than plain FTP since they employ encryption mechanisms.
 Encryption ensures that sensitive information remains confidential during file transfers.

2. Authentication Methods:

 All three protocols support various authentication methods such as username/password combinations
or public/private keys.
 However, SFTP’s reliance on SSH keys makes it more secure against brute-force attacks compared to
FTPS or FTP.

3. Firewall Compatibility:

 FTPS and FTP may encounter issues when passing through firewalls due to the use of multiple ports for
data transfer.
 SFTP, on the other hand, typically uses a single port (usually port 22) for both command and data
transmission, making it easier to configure with firewalls.
Choose the most appropriate protocol based on your specific needs.
 age 19 of 42

Website contents are uploaded to CMS

Method 1: Upload WordPress files in the admin dashboard

For this method, we'll focus entirely on how site administrators can upload files to their site. Of course,
you'll need to log in to your WordPress dashboard and have at least 'Author' permissions.

We'll first look at the default approach of using the Media Library uploader. Next, we'll show you how to
use a plugin to get even more WordPress file upload options.

Using the default Media Library uploader

Uploading files to the Media Library is a simple process. After logging into the admin area, go to Media
→ Add New. Then click Choose File. Select the file you want from your local storage and click Upload.

This method allows you to add one file at a time. To upload multiple files at once, click Switch to the
multi-file uploader.

This uploader allows you to simply drag and drop files from your local storage. And they will be
uploaded to the site. Alternatively, simply click Select Files.
 age 20 of 42

To extend the default WordPress Media Library uploader's features, you can get a plugin. You can't go
wrong with Document Library Pro.

Uploading files with a WordPress plugin - Document Library Pro

For the optimum user experience, the best way to upload files to WordPress is to use Document Library
Pro. The file library plugin makes it super easy to upload, manage, and display files in minutes.

The tool offers a file upload interface that mirrors the typical WordPress post or page creation process.
This mean you can add different attributes like an excerpt, category, tag, etc. This can come in very
handy in some store types.

You also get a bulk CSV file uploader supported by a drag-and-drop uploader. After uploading your files,
Document Library Pro then allows you to display them in interesting ways.
 age 21 of 42

You can either display them in a searchable download library. Or simply present them within a table.
This increases the file library navigation significantly.

To use this plugin, you need to first get your copy here. After that, you'll receive an email with a
downloadable ZIP file and license key.

Next;

1. Log into your WordPress admin area and go to Plugins → Add New → Upload Plugin.
2. Select the plugin ZIP file. Click Install Now Then Activate Plugin.
3. Use the setup wizard to apply the basic settings and activate your license key.

Now, go to Documents → Import. Click Select Files to upload files from your local storage. The plugin
allows you to see multiple files at the same time. And you can also use the drag-and-drop feature.
 age 22 of 42

Or do you have a CSV file with multiple files? You can complete a bulk import in the CSV upload section.
Ensure the file is in the correct format. The plugin will create a new document for each row in the CSV
file. You can learn more about this in this guide.

Displaying your files in a searchable download library

This section is for site owners who want user to be able to find and download files on the front end.
Document Library Pro allows you to serve your users file downloads in different ways.

Before displaying your files in a library, it's important to add some data. To do this, go to Documents →
Add New.
 age 23 of 42

Here, fill in all the important information fields like author, file size, and category. You can also add a
featured image and excerpt.

Upload the file under the Document Link tab. To add a previously uploaded file, simply use the 'A
custom URL' option.

When you're done, click Publish and you're good to go.

Next, go to Documents → Settings. This is where you set all the default options for your file libraries.
 age 24 of 42

For example, you can select the data fields you want to display in your file library in the Document
fields section. You can choose one or all of these options: content, excerpt, featured image, and
comments.

You can now add a file library with the [doc_library] shortcode.

Depending on the option you chose, these files will appear either in a grid layout:
 age 25 of 42

Or table layout:

You can also choose which files to display based on categories, tags, and other attributes. Follow this link
to see the detailed list of shortcode options for displaying different file lists.
 age 26 of 42

Method 2: Upload files to WordPress from the front end

Wondering how to create a file upload form in WordPress without a plugin? We guess you really don't
want to. Without a plugin, you'll need to write quite a lot of PHP code. Or otherwise employ a
WordPress developer, just to accept WordPress file uploads. That will take more time and money than
the cost of a plugin, while also bringing worse results.

There are two excellent plugins to consider, depending on your needs.

Upload files to WordPress without displaying them on the front end

You can do this with a form builder plugin like Gravity Forms. The plugin makes it very easy to accept file
submissions through your site forms. This is ideal for job boards, membership sites (profile photo
upload), eLearning platforms, and online competitions.

All you have to do is get the plugin. Once you've set it up, go to Forms → New Form. In the editor,
click Add Fields → Advanced Fields in the right menu. Then drag and drop the File Upload field into the
form.

Upload files to WordPress and display them on your website

And for even better results, we highly recommend accepting file submissions with Document Library
Pro. Why? The plugin not only allows your users to upload files. After accepting their submissions, you
may also want other users to access the files in a searchable database.

All you need to do is insert a 'Submit file' form anywhere on your website. To add the form, simply
create a page and add the shortcode: [dlp_submission_form]
 age 27 of 42

The form will contain all the fields which are enabled for your documents, such as the title, excerpt,
author, and so on.

Of course, you want to first install and activate the plugin on your site. You can follow the same process
in the previous section to do this.

Finally, let's walk you through how to allow users to upload files when placing orders in a
WooCommerce store.

Method 3: Allow users to upload WordPress files when ordering products online

WooCommerce Product Options is the best WordPress file upload plugin for online stores. The tool
allows your customers upload almost any type of file, such as an image upload on the product page. This
answers the question; "How do I upload only certain types of files to WordPress?" It is also beginner-
friendly and in just a few clicks, you can enable file submissions for WooCommerce sites.

Product Options lets you to set a maximum file size and decide whether the upload field is required or
not. Additionally, you can combine the file upload fields with several other extra product options. And
there are lots more features to explore.

Ready to add file uploads to your WooCommerce product pages? Start by getting your copy of
WooCommerce Product Options here.

Once you've installed and activated the plugin, go to Products → Product Options → Add Group.
 age 28 of 42

On the next page, set the group name and select the products or product categories you want the
product options to apply to. Then click Add option.

Add an options name and select File upload under the Type section.
 age 29 of 42

Next, scroll down to edit the file upload field settings. For example, the Label appears beside the
WordPress file upload field on the store's front end.

Pay attention to the Required box. Check this box to make the field required to be able to add the
product to the cart.

Once you're satisfied with your selections, click Save.

Now when you go to the WooCommerce single product page, you'll see your newly added file upload
fields.
 age 30 of 42

Now when a shopper uploads files on a product page, they'll see the files in their cart and during
checkout.

After clicking Add to cart, the shopper will see a link to the uploaded file in their cart. They can click the
link to review the file in a different tab.
 age 31 of 42

The link is also available on the checkout page and in their order confirmation email notification.

As the store owner, you can also find the file link on the individual order page by going
to WooCommerce → Orders.
 age 32 of 42

This makes it very easy to manage file uploads on your WooCommerce product pages and deliver the
buyer's exact order.

Do more with WordPress file uploads

Uploading files to WordPress is a straightforward process. Whether you are uploading images, videos, or
audio files, WordPress has got you covered. In this tutorial, we've shared some powerful tips for
WordPress file uploads. With these tips, you can take full advantage of the media library and enhance
the visual appeal of your website.

Of all the available upload methods, we discussed the easiest and most efficient:

 Upload files in the WordPress admin areaThis is the most common way to add files to
WordPress. You can either use the Media Library, an FTP client, or the Document Library
Pro plugin which comes with drag and drop file upload, plus CSV bulk import.
 Let users upload files to WordPress from the front endAgain, you can do this using Document
Library Pro's front end file upload form, and then optionally display the uploaded files on your
website.
 age 33 of 42

 Accept file uploads on WooCommerce product pages Finally, you can enhance your ecommerce
products with file upload fields. WooCommerce Product Options is the best tool for achieving
this.

Final website with CMS is published

How to Publish a Website on WordPress.com

If you’re an aspiring blogger, photographer, small business owner, or you simply have something you
want to share with the world, you may well have considered starting your own website.

You’ve probably done a lot of thinking and planning. You might even have put together some ideas for
pages, gathered some media, and written some blog posts. Now that you’re ready to share your content
with the whole internet, you need to find the best possible way to publish your new web baby.

Let’s start with the basics.

First, you’ll need web hosting to make your website available 24/7 to the public. You’ll need to publish
your website on the web host’s server for it to be available for users to enjoy. Once you have a place for
your website to be published, you’ll also need a domain name. Your domain name will be the address
that users will type into their browser to access your website. For example, our domain name here is
WordPress.com.
Next, you need to work on your site’s user experience. You need to structure your content so as to
make it easy for visitors to use and navigate through your site. That can be done by designing your
website with the help of a customizable theme, arranging information into a clear structure, and adding
videos and images.

In this article, we’ll show you how to publish your website using the WordPress website builder.

Why use WordPress for publishing your website?

The WordPress website builder is your best option for publishing your website, as it offers extensive
features and excellent compatibility all around the web.

Let’s take a closer look into why you might want to consider using WordPress for publishing your
website:
 WordPress is hands-down the most popular website builder out there. Over 40% of the
websites worldwide use WordPress as their website platform.
 You can use in-built features for your website. If you were starting your site entirely from
scratch, many features would only be available with the help of a dedicated developer due to
the complex coding involved. WordPress.com comes with powerful display, media, and security
features right out of the box. This ensures that you won’t have to wrestle with HTML, FTP, PHP,
JavaScript in order to make your content accessible on the internet.
 WordPress.com takes care of web hosting for you. You can also choose a domain name directly
through the platform. This way, you won’t need to go through the hassle of setting up DNS
servers or learning how to use a dedicated hosting cPanel. All platform and security updates will
be automatically taken care of.

The best part is that you can publish a website with WordPress.com in a few steps.
 age 34 of 42

How to publish a website with WordPress.com

Here, we’ll show you step-by-step how to build and publish a website on WordPress.com. By following
the steps outlined below, you’ll be able to get your website online in no time.

Step 1: Sign up to WordPress.com

You might already have content – blog posts, photos, videos, and so on – that you want to publish. The
next step is to get it online. If you haven’t done so already, go to WordPress.com to start creating your
website.
We recommend going with the WordPress.com plugin-enabled plan for maximizing your chances of
success. The WordPress.com plugin-enabled plan offers the best value for small businesses looking to
start their website with WordPress.com.

In addition to all of the features you get with the entry-level plan, the plugin-enabled plan offers
additional features like the ability to install plugins, advanced search engine optimization (SEO) tools,
automated site backups and one-click restore, SSH file transfer protocol, and database access.

Step 2: Choose a domain name

Your site’s domain name is the address where visitors can access your website. It’s the first thing that
any visitors will know about you or your site, so picking a good domain name is crucial!

You can choose any domain name that you’d like for your website. It can contain any combination of
letters and numbers. Domain names also have domain name extensions (for example, use .com or .net)
at the end of the address, which you can use to communicate additional info about your site – .co.uk if
you want to emphasize you’re based in the UK, .io if you’re tech-focused, etc.

After deciding on your domain name, you must register it to be able to use it as an address to access
your website. Since no two domain names on the internet can be the same, you must think of a unique
domain name.

You can get most domain names at around $15 to $25 per year, according to how unique and in-
demand the domain name is.

Choosing the right domain name is a hard decision for most people as domain names are most
commonly the first thing a user sees when visiting your website. A good domain name has the potential
to increase web traffic and user interest, but a bad one will do more harm than good for your brand or
business.

Here are some pointers to help you choose a good domain name for your website:
 Length. Less is more when we’re talking about domain names. A two-three word domain is
easier to remember than something that’s long and complex.
 Keywords. Keywords are important if you want users to find you via search and understand
what you do. For instance, you can use keywords such as “football” in the domain name itself if
you’re running a football-related website. This will let your users know what they’re in for.
 Brand name. Your brand should also be represented by the domain name of your website so
that people can associate your website with your brand. If you use your unique brand name in
 age 35 of 42

your domain name, you can increase visits to your website, stand out and maybe also gain a
little more recognition.

Step 3: Build and publish your website

Now that you’ve signed up for WordPress.com and chosen a domain name, you can start building your
website.

Choose Your Identity

In addition to a domain name, you’ll also need to come up with a Site title. This is what will show up in
search results and browser tabs.

Here’s how you can do this using the WordPress.com website builder:

 Log into your WordPress.com account and go to My Site → Manage → Settings.

 Click on the General tab.
 Enter your website’s name in the Site title field.
 Optionally, you can enter a Site tagline to briefly explain what your website is about. It’s a great
way to capture the visitor’s attention when they first land on your website.
Once you’ve entered the site title, click the Save settings button to continue.
 age 36 of 42

Design Your Homepage

Choosing the type and number of elements on your homepage will determine the overall look and feel
of your website. A simple blog might just need a single-column text post and a few contact details; a
photography portfolio will require a gallery for showcasing your images; and so on.
You can let your imagination do the work and start out with a blank page. You can also use any of
WordPress.com’s pre-built page layouts to create a stunning homepage for your website quickly. All you
have to do is load up the design and then customize the whole layout based on what you need. You can
add your own images and content to the layout.

Create More Pages

After creating the home page, you can add more pages to your website to which you can add more
content. Most websites have an About Us page and a Contact page.

Here’s how you can add a page to your WordPress website:

 Log into your WordPress.com account and go to My Site → Site → Pages.

 Click the Add new page button.
 age 37 of 42

 You can start with a blank page or choose a layout.

You can use the WordPress.com block editor to add blocks to your pages. Different blocks let you add
different features to your website.

For example, if you wanted to add a contact form to your Contact page, you could simply add the form
block to it. Once you’ve built the page, click the Publish button to continue.

Set Up Your Menu

A menu displays a list of links across the top of your website for readers to navigate to different sections
of your website. You can add your newly created pages in the previous steps to your website menu.

Here’s how you can use the WordPress website editor to set up your menu:
 age 38 of 42

 Go to My Site → Design → Customize → Menu from your WordPress.com account.

 Click the Primary tab.
 Click the Add items button to add more pages or posts to your primary menu.
 To reorder menu items, click the Reorder link.
You can also choose the menu location and set menu options from the same screen. Once you’re done,
click the Save Changes button to continue.

Add Your Social Media Presence

If you’re big on social media, you can use that on your website to promote your social media pages even
more. It’s not rare to see social media buttons similar to this on most websites around the web.
 age 39 of 42

You can add these icons to your website’s menu using the Social links menu. Additionally, if you want to
add these to a piece of content on any page, you can use the Social icons block to help you with that.
Most popular social media platforms are supported by WordPress.com’s editor.

Grow Your Website

Once you’ve published your website, you can start growing it by enhancing SEO and adding more
content to it. Here are some ideas to help you get started with a step in the right direction:

1. Help search engines find your site using helpful tools that work seamlessly with WordPress.com
2. Blog regularly to drive more traffic to your website.
3. Use keywords on your site to increase website visibility in search engine result pages.
4. Use appropriate tags to make it easier for people to find the content they’re looking for.
5. Connect to the community and spread the word to increase your readership.
6. Read and comment on other blogs to start conversations.
7. Link to other blogs to build community.
8. Share on social media to get the word out about your website and content.
9. Bug your real-life friends to check out your website and blog.
10. Let people know about your posts by sharing it with them over email.

Publish your website today

Following these steps will help you publish your website in no time. By using WordPress.com to power
your website, you’ll have plenty of room to grow and add features to it as you go.

If you still are unsure about publishing your website confidently, keep these pointers in mind:
 Choosing an identity or a name for your website is the first thing that you should focus on.
 age 40 of 42

 How you arrange and design elements on your website really decides the overall feel and look of
your website, so make sure everything works as well as it looks.
 You need to create more pages to provide a home for all the additional content that your users
might be interested in.
 If your users have an easier time navigating your website, they’ll enjoy viewing your content
more. Creating menus for easy accessibility to everything on your website greatly improves the
user experience on your WordPress site.
 Don’t just rely on good luck and the traditional ways of gaining attention; advertise your social
media anywhere and everywhere you can – that includes your website too!
Ready to start creating and publishing your website? Sign up for the WordPress.com plugin-enabled
plan today!

Teachers Activity:
Ask Question
Show Presentation
Demonstration
Show video:
https://www.youtube.com/watch?v=PtCIKMu8WMA
https://www.youtube.com/watch?v=71EZb94AS1k
Reference:
Site:
https://www.google.com/
https://www.youtube.com/
https://www.digitalsilk.com/digital-trends/what-is-cms-in-web-design/#:~:text=CMS%20stands%20for
%20content%20management,through%20a%20user%2Dfriendly%20interface.
https://wpwebinfotech.com/blog/how-to-setup-ftp-for-wordpress/
https://barn2.com/blog/wordpress-file-upload/
https://wordpress.com/go/tutorials/how-to-publish-a-website-on-wordpress-com/
eBook:
 WordPress for Dummies by: Lisa Sabin-Wilson
 WordPress by: tutorialpoint.com
 LEARNING WordPress by: Stack Overflow
 age 41 of 42

Assessment 11-1:
Written Test

Test I: True or False: Write the letter T if the statement is true and F if the statement is false on the
space provided.

_____________ 1. FTPS and FTP may encounter issues when passing through firewalls due to
the use of multiple ports for data transfer.
_____________ 2. Setting up an FTP account specifically for your WordPress site is a crucial
step in managing and maintaining your website.
_____________ 3. To enhance security, consider enabling Secure File Trade Protocol (SFTP)
instead of traditional File Trade Protocol (FTP).
_____________ 4. Another technique to improve website speed is by minifying code.
Minification involves removing unnecessary characters like white spaces,
line breaks, and comments from HTML, CSS, and JavaScript files.
_____________ 5. One advantage of using an FTP client is the ability to maximize efficiency
by utilizing batch uploading techniques. Instead of manually transferring
each file individually, you can select multiple files or entire folders for
simultaneous upload.
_____________ 6. Setting up an FTP account for your WordPress website can provide you
with greater control and flexibility.
_____________ 7. FTP is the latest protocol among the three. It transfers files in plain text
format, making it less secure compared to SFTP or FTPS.
_____________ 8. FTP (File Transfer Protocol), SFTP (SSH File Transfer Protocol), and FTPS
(FTP over SSL) are all methods used to transfer files between a client and a
server.
_____________ 9. To establish an FTP connection, you will need the best FTP client
software installed on your computer to access and transfer site files from
one folder to another.
_____________ 10. FTP, or File Transfer Protocol, is a standard network protocol used to
transfer files between a client computer and a server over the internet.

Test II: Enumeration

A: Different types of CMS.

1. ____________________________________
2. ____________________________________
3. ____________________________________
4. ____________________________________

B: Benefits in using CMS.

1. ____________________________________
2. ____________________________________
3. ____________________________________
4. ____________________________________
 age 42 of 42

5. ____________________________________
6. ____________________________________

C: Top 5 CMS platform.

1. ____________________________________
2. ____________________________________
3. ____________________________________
4. ____________________________________
5. ____________________________________