Hardt Web Development  ·  SOP Library

WordPress & Kadence
Skill Map

SOP refHWD-SOP-SKILL-MAP
CategoryProfessional development
UseLearning roadmap — what to learn and when
Prepared byCharles Hardt  ·  charleshardt.com
—Skill acquisition timeline — where to focus and when
Weeks 1–4
Right now
Kadence Theme Pro Kadence Blocks Pro WordPress fundamentals WP Rocket & speed basics Basic CSS customization
Weeks 5–12
As clients start
Local SEO fundamentals Schema markup Web accessibility (WCAG) Design fundamentals Core Web Vitals Conversion copywriting
Months 3–6
After first clients
Advanced CSS & animations WooCommerce basics Content strategy Google Analytics 4 Technical SEO deeper Client reporting
Months 6–12
Differentiators
JavaScript proficiency React basics (you have this) AI / Claude API integration Advanced WooCommerce CRO (conversion rate optim.) Headless WordPress
01WordPress core fundamentalsStart now

What to learn

WordPress dashboard, settings, and admin navigation
Pages vs. posts vs. custom post types
The block editor (Gutenberg) basics — even though you'll mostly use Kadence Blocks
Menus, widgets, and theme customizer
Plugin installation, activation, updates, deletion
User roles and permissions
WordPress file structure (understand wp-content)
Child themes — why they matter and how to use them
wp-config.php basics and debug mode
Staging environments — how to use them

Best resources

Free
WordPress.org documentation
wordpress.org/documentation — the official reference. Dry but authoritative.
YouTube
WPBeginner
wpbeginner.com — best free written tutorials for every WordPress task. Searchable, current, accurate.
YouTube
Darrel Wilson
YouTube — practical WordPress tutorials. Clear, methodical, good for visual learners.
Paid
WP101 (wp101.com)
Short video courses on WordPress fundamentals. Excellent for understanding what to teach clients at handoff too.
02Kadence Theme ProStart now

What to learn

Global colors, fonts, and typography system
Header builder — sticky, transparent, mega menus, mobile header
Footer builder — columns, widgets, copyright
Page layout options — full width, sidebar, contained
Starter templates — importing, customizing, not being enslaved by them
WooCommerce header cart integration
Hook system for advanced header/footer customizations
Customizer panels — spacing, borders, shadows

Best resources

YouTube
Kadence WP official channel
youtube.com/@KadenceWP — the primary source. Watch their full playlist on Theme Pro setup first.
Free
Kadence documentation
kadencewp.com/help-center — thorough, searchable, up to date. Bookmark this.
YouTube
WPTuts (Paul Charlton)
YouTube — excellent Kadence-specific tutorials. Builds complete sites from scratch. Watch his full Kadence site builds.
Free
Kadence Facebook Group
Active community of Kadence users. Search before asking — almost every problem has been solved here already.
03Kadence Blocks ProStart now

What to learn

Row / Section / Column layout system — the foundation of every page
Advanced form block — conditional logic, multi-step, notifications
Post grid block — displaying CPTs, blog feeds, team members
Query loop block — dynamic content display
Modal and off-canvas blocks
Show/hide by device, user role, login state
Icon, testimonial, accordion, tabs blocks
Global block patterns and synced patterns
Animation and scroll effects (use sparingly)

Best resources

YouTube
Kadence WP official channel
Their Blocks Pro playlist covers every block in detail. Start with Row Layout and Advanced Form.
YouTube
Imran Siddiq (Web Squadron)
YouTube — builds full sites with Kadence Blocks. Practical and fast-paced. Good for seeing how blocks combine in real projects.
Free
Kadence Blocks documentation
kadencewp.com/help-center/kadence-blocks — every block documented with options explained.
Free
Build your own reference sites
The single most effective learning tool: build a fake medical clinic site and a fake nonprofit site using every block. You will learn more in 10 hours of building than 20 hours of watching.
04WordPress performance & hostingStart now

What to learn

WP Rocket — every setting explained and when to use it
Image optimization — WebP conversion, lazy loading, correct dimensions
How to read and act on PageSpeed Insights reports
Core Web Vitals — LCP, CLS, INP — what causes failures and how to fix them
Managed hosting differences — Flywheel, Kinsta, WP Engine, SiteGround
Cloudflare CDN setup — free tier configuration
Database optimization and cleanup
Caching types — browser, server, page, object

Best resources

Free
web.dev/learn/performance
Google's own course on web performance. Authoritative, free, updated continuously. The best single resource.
Free
WP Rocket blog
wp-rocket.me/blog — their own tutorials on using the plugin correctly. Detailed and practical.
YouTube
Cloudways / Kinsta blogs
Both publish excellent free guides on WordPress performance. Search their sites for specific topics.
YouTube
WPCrafter (Adam Preiser)
YouTube — solid speed optimization walkthroughs. Practical and non-technical in delivery.
05WordPress securityWeeks 5–12

What to learn

Wordfence — firewall rules, scan settings, login security
UpdraftPlus — automated backups, remote storage, restore process
SSL — how it works, mixed content fixes, forcing HTTPS
wp-config.php hardening
File permissions on managed hosting
Two-factor authentication setup
What to do when a site is hacked — recovery process

Best resources

Free
Wordfence Learning Center
wordfence.com/learn — free guides on every aspect of WordPress security. Written by the people who build the plugin.
Free
Sucuri blog
blog.sucuri.net — deep security content. More advanced but excellent for understanding the threat landscape.
Free
WPBeginner security guides
wpbeginner.com/wordpress-security — practical walkthroughs of every security hardening step.
06Design fundamentalsWeeks 5–12

Core principles to master

Typography — type pairing, scale, line height, readability
Color theory — palettes, contrast, emotional associations, medical vs nonprofit contexts
White space and layout — breathing room is a design choice, not laziness
Visual hierarchy — guiding the eye to the most important element
Grid systems — 12-column grid, gutters, alignment
Mobile-first design — design for small screen first, expand up
Consistency — repeating patterns, spacing units, component reuse
Photography selection — what makes a photo work on a web page

Best resources

Book
Refactoring UI — Adam Wathan & Steve Schoger
The single best design book for developers. Practical, visual, no fluff. Learn to make things look good without a design degree. ~$100 but worth every dollar.
Free
Figma's design fundamentals course
help.figma.com — free video lessons on layout, typography, and color.
Free
Canva Design School
designschool.canva.com — accessible, free, well-produced. Good starting point for color and typography basics.
YouTube
Flux Academy (Ran Segall)
YouTube — excellent web design thinking videos. "How to design a website" series is required watching for freelancers.
Free
Awwwards & Dribbble
Study 10 great websites per week. Note specifically what makes them feel professional. Train your eye before you train your hands.
07Figma for web designWeeks 5–12

What to learn

Figma interface and basic tools — frames, shapes, text, components
Auto layout — the most important feature for web design
Components and variants — design systems in miniature
Prototyping — simple click-through prototypes for client approval
Exporting assets — SVG icons, WebP images, correct sizing
Using community templates and UI kits
You do not need to design every site in Figma. But for complex projects, showing a client a Figma mockup before you build saves enormous revision time. Start with homepage mockups only.

Best resources

Free
Figma's own tutorial series
figma.com/resources/learn-design — free, official, well-produced. Start here.
YouTube
Figma (official YouTube channel)
Every major feature has a tutorial video directly from the Figma team. Reliable and current.
YouTube
DesignCourse (Gary Simon)
YouTube — excellent practical Figma projects for web designers. Good for seeing full design workflows.
Paid
Figma for Beginners — Scrimba or Udemy
Multiple courses on Udemy under $20. Pick one with 4.5+ stars and recent reviews.
08Conversion-focused design (CRO)Months 3–6

What to learn

Above-the-fold principles — what must be visible without scrolling
CTA design — placement, color, copy, size
Trust signals — where to place testimonials, credentials, reviews
Form design — reducing friction, field count, error handling
Landing page anatomy for healthcare and nonprofit
Heatmap reading — understanding where users look and click

Best resources

Free
Baymard Institute (free articles)
baymard.com — the gold standard for UX research. Their free articles on form design and mobile UX are essential.
Free
Nielsen Norman Group
nngroup.com — free articles on UX research including healthcare UX specifically. Search "medical website" and "healthcare UX."
Book
Don't Make Me Think — Steve Krug
The most readable UX book ever written. Teaches usability thinking in a single afternoon. Required reading.
Free
Hotjar blog
hotjar.com/blog — practical CRO guides. Their heatmap tool also has a free tier worth using on your own site.
09Local SEOWeeks 5–12

What to learn

Google Business Profile optimization — categories, photos, posts, Q&A
NAP consistency — name, address, phone across all citations
Local citation building — directories that matter for healthcare and nonprofits
Local keyword research — "chiropractor Norfolk VA" vs "chiropractor near me"
Schema markup — LocalBusiness, MedicalOrganization, NGO types
Google Maps pack ranking factors — proximity, relevance, prominence
Review strategy — how to help clients get more Google reviews ethically
Local landing pages for service areas

Best resources

Free
Whitespark blog
whitespark.ca/blog — the best free resource on local SEO. Read their annual Local Search Ranking Factors survey every year.
Free
BrightLocal Academy
brightlocal.com/learn — free local SEO courses. Their "Local SEO for Beginners" course is thorough and practical.
YouTube
Ranking Academy
YouTube — excellent local SEO tutorials. Covers Google Business Profile optimization in depth. Very practical.
Free
Google Search Central
developers.google.com/search — official Google documentation on schema, sitemaps, and structured data. The source of truth.
Free
Moz Local SEO Learning Center
moz.com/learn/seo/local — free guides on every aspect of local SEO. Well-organized and beginner-friendly.
10On-page & technical SEOWeeks 5–12

What to learn

Title tags and meta descriptions — writing them well, optimal length
Heading hierarchy — H1, H2, H3 strategy
Internal linking — how to structure it for authority flow
Image SEO — alt text, file names, captions
XML sitemaps and robots.txt
Crawl budget and indexing — what Google can and cannot see
301 redirects — when and how to use them
Google Search Console — reading data, fixing errors, submitting sitemaps
RankMath — full configuration, redirect manager, schema output

Best resources

Free
Moz Beginner's Guide to SEO
moz.com/beginners-guide-to-seo — still the best foundational SEO resource after all these years. Read it once, completely.
Free
Ahrefs blog
ahrefs.com/blog — the best SEO blog currently publishing. Practical, data-backed, not fluffy. Read their beginner guides.
Free
RankMath documentation
rankmath.com/docs — directly applicable to your stack. Their setup wizard walkthrough is a good first pass.
YouTube
Ahrefs YouTube channel
Excellent free video tutorials on every SEO topic. Their "SEO for beginners" series is the best on YouTube.
11Web accessibility (WCAG 2.1)Weeks 5–12

What to learn

WCAG 2.1 AA standard — what it requires and why it matters
Color contrast — testing and fixing failures
Semantic HTML — why heading structure matters to screen readers
Alt text — how to write it well, when to leave it empty
Keyboard navigation — tabbing through a site, focus states
ARIA labels — when to use them, when not to
Using WAVE and axe DevTools — how to read and prioritize findings

Best resources

Free
WebAIM Introduction to Accessibility
webaim.org/intro — the most practical free accessibility course available. Two hours. Do this completely.
Free
Deque University (free tier)
dequeuniversity.com — free accessibility fundamentals course. More thorough than WebAIM. Worth completing.
Free
WCAG 2.1 Quick Reference
w3.org/WAI/WCAG21/quickref — the authoritative standard. Bookmark and search when you encounter a specific issue.
Free
a11y Project
a11yproject.com — community-maintained checklist and practical guidance. Excellent for quick reference during builds.
12CSS for WordPress / KadenceStart now

What to learn

CSS custom properties (variables) — how Kadence uses them and how to override them
CSS specificity — understanding why your rule is not overriding Kadence
Flexbox — used everywhere in Kadence layouts
CSS Grid — used for complex layouts
Media queries — writing breakpoint-specific styles
Browser DevTools — inspecting and debugging live CSS
Kadence's CSS variable naming conventions
Where to add custom CSS in WordPress — Additional CSS vs child theme vs plugin

Best resources

Free
CSS Tricks — Complete Guide to Flexbox
css-tricks.com/snippets/css/a-guide-to-flexbox — the definitive Flexbox reference. Bookmark forever.
Free
CSS Tricks — Complete Guide to Grid
css-tricks.com/snippets/css/complete-guide-grid — same for CSS Grid.
Free
MDN Web Docs
developer.mozilla.org — the authoritative CSS reference. Use it to look up any property you are unsure about.
Paid
Jonas Schmedtmann CSS course (Udemy)
You already have this. His HTML/CSS course covers Flexbox, Grid, and responsive design thoroughly — revisit the relevant sections.
13JavaScript for WordPressMonths 3–6

What to learn

DOM manipulation — selecting and changing elements on a page
Event listeners — responding to clicks, scrolls, form submissions
Adding JavaScript to WordPress correctly — wp_enqueue_scripts
jQuery basics — still used heavily in WordPress plugins
Fetch API — pulling data from external sources
WordPress REST API basics — reading and posting data
You are already learning JavaScript with Jonas Schmedtmann. Keep going — this will become your most significant technical differentiator as you add React and API integration skills.

Best resources

Paid
Jonas Schmedtmann JavaScript course
You already have this. Finish it. The DOM manipulation and async sections are the most directly applicable to WordPress work.
Free
JavaScript.info
javascript.info — the best free JavaScript reference and tutorial. More thorough than MDN for learning, more organized than YouTube.
Free
WPBeginner — JavaScript in WordPress guides
Specific tutorials on adding and using JavaScript correctly in WordPress context.
14PHP basics for WordPressMonths 3–6

What to learn

PHP syntax basics — variables, arrays, functions, conditionals
WordPress hooks — actions and filters, how they work
functions.php — what goes here and what does not
Custom post types and taxonomies — registering them correctly
WP_Query — pulling custom content onto pages
Reading and understanding plugin code — enough to debug conflicts
You do not need to become a PHP developer. You need enough PHP to read error messages, add small snippets to functions.php, and use Claude to write more complex code without being confused by the output.

Best resources

Free
WordPress Developer Handbook
developer.wordpress.org — the authoritative reference for WordPress-specific PHP. Focus on the Plugin Handbook and Theme Handbook sections.
Free
php.net documentation
php.net/docs.php — the official PHP reference. Use it to look up specific functions rather than learning PHP systematically.
YouTube
WPCrafter — WordPress hooks and functions.php
YouTube — practical tutorials on using WordPress hooks without deep PHP knowledge. Good starting point.
15Conversion copywritingWeeks 5–12

What to learn

Writing for the web — short sentences, scannable structure, active voice
Homepage copy structure — hero, problem, solution, proof, CTA
Writing CTAs that convert — specificity over vagueness
About page copy — the human story that builds trust
Service page copy — features vs benefits framing
Writing for medical clients — plain English, no outcome claims
Writing for nonprofits — mission-driven without being manipulative

Best resources

Book
Building a StoryBrand — Donald Miller
The best framework for writing client-focused website copy. Makes the client the hero, not you. Directly applicable to every niche you serve.
Book
Everybody Writes — Ann Handley
The most practical writing guide for web content. Teaches you to write clearly and humanly. Read alongside StoryBrand.
Free
Copyhackers blog
copyhackers.com — the best free resource on conversion copywriting. Their homepage teardowns and before/after examples are invaluable.
Free
Hemingway App
hemingwayapp.com — free tool that grades your writing clarity. Paste any draft and it shows you every sentence that needs simplifying.
16Google Analytics 4 & Search ConsoleMonths 3–6

What to learn

GA4 setup — property creation, data stream, linking to Search Console
Key reports — traffic sources, landing pages, conversions
Setting up goals and conversions — form submissions, phone clicks, donations
Google Search Console — impressions, clicks, position, crawl errors
Building monthly client reports from GA4 data
IP anonymization for medical clients

Best resources

Free
Google Analytics Academy
analytics.google.com/analytics/academy — free official GA4 courses from Google. Start with "Google Analytics 4" course.
YouTube
Measureschool (Julian Juenemann)
YouTube — the best GA4 tutorials on YouTube. Practical, clear, and very current.
Free
Search Console Help
support.google.com/webmasters — official documentation. Read the Search Console training section completely.
17Freelance business operationsWeeks 5–12

What to learn

Pricing strategy — value-based vs hourly, when to raise rates
Proposal writing — structuring, pricing, objection handling
Client communication — setting expectations, async workflows
Project management — scoping, timelines, milestone management
Sales conversations — discovery calls, listening, closing
Retainer structuring — what to include, how to price, how to deliver

Best resources

Free
Brennan Dunn — Double Your Freelancing
doubleyourfreelancing.com — the best resource on freelance business strategy. His free email course alone is worth weeks of reading.
Book
Win Without Pitching — Blair Enns
"The Win Without Pitching Manifesto" by Blair Enns is essential for positioning and sales as a specialist freelancer.
Free
Paul Jarvis — freelance writing
pjrvs.com — honest, practical freelance business content. His essay archive is free and worth reading completely.
18Claude AI & prompt engineeringStart now

What to learn & best resources

Free
Anthropic prompting guide — docs.claude.ai
Role prompting, context-setting, chain-of-thought, XML tags for structured output. Read this completely — it is short and high-value.
Free
Daily practice — use Claude on every task
Write your cold emails with Claude. Draft proposals with Claude. Format audit reports with Claude. The prompts you refine through daily use are worth more than any course.
YouTube
Liam Ottley, Nick Saraev
YouTube — practical AI workflow content for freelancers and agencies. Focus on their business automation videos rather than pure technical content.
19WooCommerce & e-commerceMonths 3–6

What to learn

WooCommerce setup — products, categories, shipping, tax
Kadence Shop Kit — custom product pages, quick view, sticky cart
Payment gateway configuration — Stripe, PayPal
WooCommerce for nonprofits — GiveWP integration
Simple membership setups — WooCommerce Memberships plugin

Best resources

Free
WooCommerce documentation
woocommerce.com/documentation — thorough official docs. Start with the Getting Started guide.
YouTube
WPTuts — WooCommerce + Kadence
YouTube — Paul Charlton builds full WooCommerce sites with Kadence. Most directly applicable to your stack.
Free
GiveWP documentation
givewp.com/documentation — for nonprofit donation setups. Their getting started guide covers 80% of what you need.
20React & headless WordPress6–12 months

What to learn & best resources

Paid
Jonas Schmedtmann React course (Udemy)
You already have this. Completing it opens the door to React contracting and headless WordPress — both significantly higher-value work than standard WordPress builds.
Free
WPGraphQL documentation
wpgraphql.com — the bridge between WordPress as a CMS and React as a front end. Understanding this unlocks headless WordPress projects.
Free
Faust.js (WP Engine)
faustjs.org — the most mature headless WordPress framework. Free, well-documented, backed by WP Engine.
Free
Vercel AI SDK & LangChain.js
Your differentiator for React job applications — AI integration in web apps. sdk.vercel.ai/docs is the best starting point.
Hardt Web Development HWD-SOP-SKILL-MAP  ·  WordPress & Kadence Skill Map  ·  charleshardt.com