One of the best ways to learn about content management systems (CMS) is to set one up from scratch. In this lesson, we are going to use WordPress to set up a small, simple CMS-driven “test” web site for learning purposes.
A Content Management System (CMS) is a computer application that supports the creation and modification of digital content. It is typically used to support multiple users working in a collaborative environment. Most CMSs include Web-based publishing, format management, history editing and version control, indexing, search, and retrieval. By their nature, content management systems support the separation of content and presentation.
– Wikipedia
WordPress is a free and open-source content management system (CMS) based on PHP and MySQL.
– Wikipedia
Outcomes:
- Learn how to:
Related Concepts
- Templating
- Separating Content & Presentation
Related Reading & Resources
Install and Setup WordPress
- Install WordPress
- Login to your host > cpanel > install wordpress in a sub-directory
- Example: /Test01/
- Be sure to note your site’s login credentials
- Login to your host > cpanel > install wordpress in a sub-directory
- Setup WordPress
- Adjust the Settings for a small site
- Login to your site’s dashboard/admin
- yourdomain.com/test01/wp-admin
- > Plugins
- > Installed Plugins: deactivate and delete default plugins that will not be needed
- Some examples to remove (from Bluehost’s default install): Google Analytics for WordPress by MonsterInsights, Hello Dolly, MOJO Marketplace, OptinMonster, WPForms Lite
- Be sure to keep: Akismet Anti-Spam and JetPack
- > Installed Plugins: deactivate and delete default plugins that will not be needed
- > Settings
- > Discussion: Turn off comments
- Login to your site’s dashboard/admin
- Adjust the Settings for a small site
Add Initial Content in WordPress
- Add Content
- > Pages
- Delete default/existing pages
- Create a new page titled “Home”
- Create a new page title “Sub Page”
- For content, use base content/typography markup (raw html)
- > Settings
- > Reading: Set the Front Page to display your newly created “Home” page
- > Appearance
- > Menus: Create a new Menu (e.g. “Main Menu”) and set it’s location as the Primary Menu
- > Pages
Customize Your WordPress Site
There are many different ways to customize a WP site, below are are few known techniques that you should be familiar with as you consider your best options per project:
- You can customize a theme via Customizer
- Appearance > Customize
- Browse the built-in theme settings and experiment with the theme-supported settings
- Appearance > Customize
- You can change the Theme
- Appearance > Themes > Add New
- Search or browse for a new third-party theme
- Appearance > Themes > Add New
- You can modify a Theme
- Manually edit a theme’s css and php files directly via Appearance > Editor (not recommended*)
- Manually edit a theme’s css and php files locally then update/upload via FTP (not recommended*)
- You can create a Child Theme
- Create a new theme directory with only the files that you want to override (highly recommended)
- You can create your own Custom Theme
- This option provides the most control, but it also the most costly in terms of development time (advanced, but highly recommended)
* It is never recommended to edit a found parent theme’s files because all changes/modifications will be lost if/when the theme is updated. A safer approach is to use a child theme or to create a custom parent theme.
Conclusion & Resources
WordPress is a powerful content management system, but one of the main challenges faced by web designers and developers is figuring out how to best customize WP sites based upon client goals, needs, budgets, and scopes for different projects. Below are some customization techniques to consider, starting from easiest (and least customizable) to the hardest (yet most customizable):
- Customize an Existing or Default Theme (e.g. WP default themes)
- Use the built-in “Customizer” tool via the admin interface and adjust your theme’s built-in settings
- Override their settings via “Additional CSS” in the admin interface (not recommended* for production, but might be justified in certain use cases, such as working with a client with no FTP access and/or no child theme option)
- Manually edit a theme’s files (e.g. style.css) locally then update/upload via FTP (not recommended*)
- Switch to a New Third-Party Theme (Free or Paid)
- Child Theme an Existing Parent Theme
- Create a custom child theme that will manually override the parent theme settings a-la-carte. (e.g. Astra, Divi, etc—or any fully featured theme with the desired features and functionality already built-in)
- Child Theme Resources:
- Child Theme Examples:
- WooCommerce > Storefront > Storefront Child Theme
- Chris’s “My Child Theme WP” (A blank Child Theme)
- Download: mychildtheme-wp.zip
- NOTE: Be sure to change the parent theme name in style.css
- Create Your Own Custom Theme
- Start with a “starter” theme framework (e.g. _underscores)
- Code a theme from scratch (starting with the core essentials: index.php, style.css, & screenshot.png)
- Example: Chris’s Sitebase-wp
- Use 3rd Party Plugins
- Extend/Customize your base theme’s built-in features and functionality by installing third-party plugins
- For example, for more layout control consider using a Page Builder plugin like Site Origins Page Builder, Elementor, Beaver etc.
- Popular Plugins to consider:
- ACF (Advanced Custom Fields)
- CPT UI (Custom Post Types UI)
- Helpful Shortcode plugins:
- Display Posts
- Insert Pages
- Extend/Customize your base theme’s built-in features and functionality by installing third-party plugins