Content Management Systems

Let's get a WordPress site running. You have two paths: local development (on your computer) or hosted (on a server). We'll do both — local first for learning, then deploy to the web.

Local WordPress Setup

The easiest way to run WordPress locally is with Local by Flywheel (now just called "Local"). It's free and handles all the server configuration for you:

1. Download and install Local from localwp.com
2. Click "Create a new site" — give it a name
3. Choose "Preferred" for the environment settings
4. Set your WordPress admin username and password
5. Click "Add Site" — Local sets up PHP, MySQL, and WordPress automatically
6. Click "Open Site" to see your new WordPress site, or "WP Admin" to access the dashboard

If you prefer the command line: docker-compose with the official WordPress image works great. But Local is faster for learning.

The WordPress Dashboard

The WordPress admin panel (wp-admin) is where you manage everything:

• Posts — Blog entries. Chronological, categorized, tagged.
• Pages — Static content (About, Contact, Services). Not time-based.
• Media — Your image/file library. Everything you upload lives here.
• Appearance → Themes — Control your site's look. One click to change the entire design.
• Appearance → Customize — The real-time theme customizer. Change colors, fonts, layouts, and see the result live.
• Plugins — Add functionality. SEO, contact forms, e-commerce, security — there's a plugin for everything.
• Settings — Site title, tagline, URL structure (permalinks), reading options.

Choosing & Customizing a Theme

Your theme controls 90% of how your site looks. Choosing the right one matters:

• Free themes: Start with Astra, GeneratePress, or Kadence. They're lightweight, fast, and highly customizable. Available from Appearance → Themes → Add New.
• Block themes: WordPress's Full Site Editing (FSE) uses block-based themes. These give you drag-and-drop control over every part of the site. Twenty Twenty-Four (the default theme) is a good block theme to learn with.
• Premium themes: When free isn't enough. Divi, Avada, and Flavor are popular premium options with visual builders.

Customize your theme through Appearance → Customize:

• Site Identity — Logo, site title, favicon
• Colors — Match your brand palette from DSGN-103
• Typography — Font families, sizes, weights
• Menus — Navigation structure
• Homepage Settings — Static page vs. latest posts

Essential First Plugins

Install these right away on any new WordPress site:

• Yoast SEO (or Rank Math) — SEO optimization for every page and post
• WPForms Lite — Contact forms without code
• UpdraftPlus — Automated backups. Non-negotiable.
• Wordfence — Security. WordPress is a common attack target.
• WP Super Cache (or LiteSpeed Cache) — Speed optimization

A WordPress site with a default theme and no content is worthless. The value is in what you put in it and how you organize it. In this module, you'll build a real content-driven site — a blog, portfolio, or storefront — with thoughtful structure and actual content.

Content Strategy for WordPress

Before you start creating pages, plan your site structure:

• Sitemap — What pages does your site need? For a creator portfolio: Home, About, Portfolio/Work, Blog, Contact. For a storefront: Home, Shop, About, FAQ, Contact.
• Navigation hierarchy — What goes in the main menu vs. footer? Don't put everything in the top nav.
• Content types — Posts for time-based content (blog entries, updates). Pages for permanent content (About, Services). Custom post types for specific collections (portfolio pieces, products).
• Categories and tags — Organize your posts. Categories are broad buckets (Tutorials, Reviews, Behind the Scenes). Tags are specific labels (audio, beginner, WordPress).

The Block Editor (Gutenberg)

WordPress uses a block-based editor. Everything is a block:

• Paragraph, Heading, List — Basic text blocks
• Image, Gallery, Video, Audio — Media blocks. Drag and drop or select from Media Library.
• Columns — Create multi-column layouts without CSS
• Group — Wrap blocks together for shared styling (background color, padding)
• Cover — Full-width image/video with text overlay. Great for hero sections.
• Buttons — Call-to-action buttons with customizable colors and links
• Spacer — Add vertical space between blocks

The block editor is powerful once you learn it, but it's not a replacement for understanding design. Apply the layout and typography principles from DSGN-103. Use consistent spacing, limit your font choices, and maintain visual hierarchy.

Building a Blog

A blog drives organic traffic. Here's how to set it up properly:

1. Create a static "Home" page and a "Blog" page (Settings → Reading → set both)
2. Define 3-5 categories that map to your content pillars
3. Write at least 3 posts (500+ words each) to populate the blog before launch
4. Configure Yoast SEO for each post: focus keyword, meta description, readability score
5. Add featured images to every post — this is what shows in social shares and blog listings

Building a Portfolio

For showcasing creative work:

• Use a portfolio plugin (like Visual Portfolio or Jesuspended Portfolio) or a theme with built-in portfolio support
• Each portfolio piece gets its own page with: featured image, project description, tools used, link to live project
• Create a gallery page that shows all pieces in a filterable grid
• Include context — don't just show the work, explain the process and results

Building a Storefront

WooCommerce turns WordPress into a full e-commerce platform:

• Install WooCommerce and run the setup wizard
• Add digital products (audio files, scripts, templates, courses)
• Configure payment gateways (Stripe, PayPal)
• Set up product categories and a shop page
• For digital products specifically: enable digital downloads and disable shipping

Off-the-shelf themes get you 80% of the way there. But when you need that last 20% — a specific layout, a custom feature, a unique design element — you need to understand how themes and plugins work under the hood.

You're not becoming a full WordPress developer in this module. But you'll learn enough to make targeted customizations without breaking things.

Child Themes: Safe Customization

Never edit a theme directly. When the theme updates, your changes get overwritten. Instead, create a child theme:

/* style.css — in your child theme folder */
/*
Theme Name: My Creator Theme Child
Template: astra
*/

/* Your custom CSS goes here */
.site-header {
  background: linear-gradient(135deg, #7c3aed, #db2777);
}

.entry-title {
  font-family: 'Georgia', serif;
  font-size: 2.5rem;
}

The child theme folder goes in wp-content/themes/. It needs just two files to start: style.css (with the header above) and functions.php (to enqueue the parent theme's styles):

<?php
// functions.php — child theme
function my_child_theme_enqueue() {
    wp_enqueue_style('parent-style',
        get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue');

Template Hierarchy

WordPress uses a template hierarchy to decide which PHP file renders each page. Understanding this lets you customize specific page types:

• front-page.php — Your homepage (if set to static)
• single.php — Individual blog post
• page.php — Static page
• archive.php — Category/tag/date archive
• search.php — Search results
• 404.php — Page not found
• header.php / footer.php — Site-wide header and footer

To customize a specific template, copy it from the parent theme to your child theme and edit the copy. WordPress automatically uses the child theme's version.

The WordPress Loop

The Loop is how WordPress displays posts. Every theme template uses it:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <article>
    <h2><?php the_title(); ?></h2>
    <div class="meta">
      Posted on <?php the_date(); ?> by <?php the_author(); ?>
    </div>
    <div class="content">
      <?php the_content(); ?>
    </div>
  </article>

<?php endwhile; else : ?>
  <p>No posts found.</p>
<?php endif; ?>

Functions like the_title(), the_content(), the_date(), and the_author() are WordPress template tags. They pull data from the database and output it. You don't need to write SQL queries — WordPress handles data access through these functions.

Plugin Basics

A WordPress plugin is just a PHP file with a specific comment header:

<?php
/*
Plugin Name: My Custom Features
Description: Custom functionality for my creator site
Version: 1.0
Author: Your Name
*/

// Add a custom shortcode
function creator_cta_shortcode($atts) {
    $atts = shortcode_atts(array(
        'text' => 'Check out my work!',
        'url'  => '/portfolio',
    ), $atts);
    
    return '<a href="' . esc_url($atts['url']) . '" 
        class="creator-cta">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('cta', 'creator_cta_shortcode');

// Usage in any post or page: [cta text="View Portfolio" url="/portfolio"]

Plugins go in wp-content/plugins/. Activate them from the dashboard. Even this basic understanding lets you add custom shortcodes, modify default behavior with hooks (actions and filters), and build small features without installing bloated plugins.

Mobile Optimization

Google indexes mobile-first. Your WordPress site must work perfectly on phones:

• Test with Chrome DevTools device emulation (F12 → Toggle Device Toolbar)
• Check touch targets — buttons need to be at least 44×44px
• Test your navigation — does the mobile menu work? Can users find what they need?
• Run PageSpeed Insights — aim for 90+ on mobile
• Optimize images — install Smush or ShortPixel for automatic compression