WordPress.org vs WordPress.com - Hands-On Comparison

Understanding WordPress.org vs WordPress.com

📖 Scenario: You want to create a website and are deciding between using WordPress.org or WordPress.com. Understanding the differences will help you choose the best option for your needs.

🎯 Goal: Build a simple comparison chart in HTML that clearly shows the main differences between WordPress.org and WordPress.com.

📋 What You'll Learn

Create an HTML structure with a table comparing WordPress.org and WordPress.com

Add a configuration variable to hold the features list

Use a loop to generate table rows dynamically from the features list

Add final HTML elements to complete the accessible and responsive table

💡 Why This Matters

🌍 Real World

Comparing hosting options or software features clearly helps users make informed decisions when choosing platforms.

💼 Career

Web developers often build dynamic, accessible tables to present data clearly on websites.

1

Create the HTML table skeleton

Create an HTML table element with a thead containing two headers: WordPress.org and WordPress.com. Also add an empty tbody where the comparison rows will go.

Wordpress

  
    
      WordPress.org
      WordPress.com
    
  
  
    
  

Hint

Start by writing the table with headers for both WordPress.org and WordPress.com. Leave the body empty for now.

2

Add a JavaScript array with feature comparisons

Create a JavaScript variable called features that is an array of objects. Each object should have two properties: org and com. Add these exact entries:
1. { org: 'Self-hosted', com: 'Hosted by WordPress' }
2. { org: 'Full control', com: 'Limited control' }
3. { org: 'Free software', com: 'Free and paid plans' }

Wordpress

  
    
      WordPress.org
      WordPress.com
    
  
  
  


// Your code here

Hint

Define a constant array named features with objects holding the exact comparison text for WordPress.org and WordPress.com.

3

Use JavaScript to fill the table body with feature rows

Write JavaScript code that selects the tbody element and uses a forEach loop over the features array. For each feature, create a table row tr with two cells td: one for org and one for com. Append each row to the tbody.

Wordpress

  
    
      WordPress.org
      WordPress.com
    
  
  
  


const features = [
  { org: 'Self-hosted', com: 'Hosted by WordPress' },
  { org: 'Full control', com: 'Limited control' },
  { org: 'Free software', com: 'Free and paid plans' }
];

// Your code here

Hint

Select the table body and loop through the features array. For each feature, create a row with two cells and add it to the table.

4

Add accessibility and responsive design

Add a caption element inside the table with the text Comparison of WordPress.org and WordPress.com. Also add a scope="col" attribute to both th elements for accessibility.

Wordpress

  
    
      WordPress.org
      WordPress.com
    
  
  
  


const features = [
  { org: 'Self-hosted', com: 'Hosted by WordPress' },
  { org: 'Full control', com: 'Limited control' },
  { org: 'Free software', com: 'Free and paid plans' }
];

const tbody = document.querySelector('tbody');
features.forEach(feature => {
  const row = document.createElement('tr');
  const orgCell = document.createElement('td');
  orgCell.textContent = feature.org;
  const comCell = document.createElement('td');
  comCell.textContent = feature.com;
  row.appendChild(orgCell);
  row.appendChild(comCell);
  tbody.appendChild(row);
});

// Your code here

Hint

Add a caption inside the table for screen readers and add scope="col" to the header cells for better accessibility.

Practice

1. Which statement best describes WordPress.org?

easy

A. WordPress hosts your site with no control for you.

B. It is a free blogging platform with limited features.

C. You host your own site and have full control over it.

D. It only allows you to create online stores.

Solution

1. Step 1: Understand hosting control

   WordPress.org means you download the software and host it yourself, giving full control.

2. Step 2: Compare with other options

   WordPress.com hosts your site but limits control on free plans, unlike WordPress.org.

3. Final Answer:

   You host your own site and have full control over it. -> Option C

4. Quick Check:

   WordPress.org = Full control [OK]

Hint: WordPress.org means self-hosted with full control [OK]

Common Mistakes:

• Confusing WordPress.com as self-hosted
• Thinking WordPress.org is only for blogs
• Believing WordPress.org is a hosting service

2. Which of the following is a correct feature of WordPress.com free plan?

easy

A. Limited control with hosting provided by WordPress.com.

B. No ability to create posts or pages.

C. You must host the site yourself.

D. Full plugin installation and theme customization.

Solution

1. Step 1: Identify WordPress.com free plan features

   WordPress.com free plan hosts your site but limits control and customization.

2. Step 2: Eliminate incorrect options

   Full plugin installation and self-hosting are not available on free WordPress.com plans.

3. Final Answer:

   Limited control with hosting provided by WordPress.com. -> Option A

4. Quick Check:

   WordPress.com free = Limited control [OK]

Hint: WordPress.com free plan limits control, hosting included [OK]

Common Mistakes:

• Assuming full plugin access on free WordPress.com
• Confusing self-hosting with WordPress.com
• Thinking WordPress.com free plan disables posting

3. If you want to install custom plugins and themes, which WordPress option should you choose?

medium

A. WordPress.com free plan

B. WordPress.org self-hosted

C. WordPress.com paid plan only

D. Neither option allows custom plugins

Solution

1. Step 1: Understand plugin and theme installation

   Only WordPress.org self-hosted sites allow full custom plugin and theme installation.

2. Step 2: Compare WordPress.com plans

   WordPress.com free plan does not allow custom plugins; paid plans allow limited plugins but not full control.

3. Final Answer:

   WordPress.org self-hosted -> Option B

4. Quick Check:

   Custom plugins = WordPress.org [OK]

Hint: Custom plugins need WordPress.org self-hosting [OK]

Common Mistakes:

• Thinking WordPress.com paid plans allow all plugins
• Believing free WordPress.com supports custom themes
• Assuming no WordPress option supports plugins

4. A user complains they cannot upload custom themes on WordPress.com free plan. What is the likely cause?

medium

A. Their hosting server is down.

B. They forgot to enable theme uploads in settings.

C. They need to switch to WordPress.org to upload themes.

D. WordPress.com free plan does not allow custom theme uploads.

Solution

1. Step 1: Check WordPress.com free plan restrictions

   Free plans on WordPress.com do not allow uploading custom themes.

2. Step 2: Rule out other causes

   Settings do not enable this feature; hosting server issues unrelated to theme upload restrictions.

3. Final Answer:

   WordPress.com free plan does not allow custom theme uploads. -> Option D

4. Quick Check:

   Custom themes blocked on free WordPress.com [OK]

Hint: Free WordPress.com blocks custom theme uploads [OK]

Common Mistakes:

• Suggesting enabling settings fixes upload
• Confusing hosting issues with feature limits
• Recommending WordPress.org without explaining

5. You want a blog with full control, ability to add any plugin, and no hosting limits. Which is the best choice?

hard

A. Use WordPress.org and self-host your site.

B. Use WordPress.com paid plan for plugin freedom.

C. Use WordPress.com free plan for easy setup.

D. Use a third-party blogging platform instead.

Solution

1. Step 1: Identify needs for full control and plugins

   Full control and ability to add any plugin require self-hosting with WordPress.org.

2. Step 2: Compare WordPress.com plans and alternatives

   WordPress.com paid plans limit plugins; free plans limit control; third-party platforms may not offer full control.

3. Step 3: Choose best option

   WordPress.org self-hosted meets all requirements for control and plugin freedom.

4. Final Answer:

   Use WordPress.org and self-host your site. -> Option A

5. Quick Check:

   Full control + plugins = WordPress.org [OK]

Hint: Full control and plugins need WordPress.org self-hosting [OK]

Common Mistakes:

• Choosing WordPress.com free or paid plans for full freedom
• Ignoring hosting limits on WordPress.com
• Assuming third-party platforms offer same control