Web Dev Academy CMS & site builders · WordPress & WooCommerce Tool 49 / 64
CMS & site builders

WordPress & WooCommerce

The web's most-used CMS — it powers ~43% of all sites. Write content in an admin dashboard; themes render it; plugins like WooCommerce bolt on a full store. PHP + MySQL under the hood.

Demo 01

The admin dashboard → your live site

This is the core WordPress loop: you write a post in wp-admin, hit Publish, and the theme renders it on the front end. Try it — fill the fields and publish.

⚡ Simulated wp-admin (vanilla JS)

Add New Post

Demo 02

The front end — your theme renders the loop

WordPress's Loop pulls published posts newest-first and the active theme styles them. Anything you publish above appears here instantly.

⚡ Simulated front end
🔒 myblog.example.com

My Blog

Just another WordPress site

<?php
// The famous WordPress Loop (in your theme's index.php)
if ( have_posts() ) :
  while ( have_posts() ) : the_post(); ?>
    <article>
      <h2><?php the_title(); ?></h2>
      <div><?php the_content(); ?></div>
    </article>
  <?php endwhile;
endif;
?>
Demo 03

WooCommerce — turn the blog into a store

WooCommerce is a plugin that adds products, a cart and checkout to any WordPress site. Add a few items to the cart.

⚡ Simulated WooCommerce storefront
🛒 Cart
  • Your cart is empty.
Total€0.00
Demo 04

Plugins & hooks — WordPress's superpower

WordPress is extensible through actions and filters. Plugins "hook" into events without touching core. Click a hook to fire it.

⚡ Simulated hook system
// click a hook above — registered plugins respond here
// A plugin registers a callback on a hook:
add_filter( 'the_content', function ( $content ) {
  return $content . '<p>Thanks for reading! 🙌</p>';
} );

add_action( 'save_post', function ( $id ) {
  error_log( "Post {$id} was saved" );
} );
i
The admin, the front-end Loop, WooCommerce and the hook system above are all simulated with vanilla JavaScript for the demo. Real WordPress is a PHP + MySQL application that runs on a server — wp-admin saves to a database and themes render pages server-side on every request. The PHP snippets shown are the genuine article.

↑ All 64 tools