Blog

  • How to edit themes in WordPress without losing work

    Key takeaways

    • The Site Editor only appears when a block theme is active. If you see Appearance → Customize instead, you have a classic theme and different instructions apply.
    • Anything saved through the Customizer or the Site Editor is stored in the database and survives a theme update. Anything typed into a parent theme’s files does not.
    • A working child theme needs two files: a style.css whose header includes a Template line naming the parent theme’s folder, and a functions.php that enqueues the stylesheet. Copy only the templates you actually change.
    • WooCommerce overrides load only from a woocommerce folder inside the active theme, at the same relative path and filename the plugin uses.
    • A missing semicolon in functions.php produces a white screen or the critical error page. The fix is reverting the file over SFTP or renaming the theme folder, not more editing in the dashboard.

    A color change made directly in a theme’s stylesheet looks right all afternoon. Then the theme updates and it is gone, along with the spacing fix from last month. Nothing was wrong with the code. It was saved in a file that the update was allowed to replace.

    That is one of two ways theme edits fail. The other is faster and louder: a stray character in functions.php and the site returns a blank page or the message “There has been a critical error on this website.” Both failures come from the same root cause, which is editing in the wrong place for the kind of change being made.

    So the useful question is not “how do I open the theme editor”. It is “which layer does this change belong in”. There are three, and WordPress stores each one differently.

    Check whether your theme is a block theme or a classic theme first

    The instructions for every step below depend on this, and the dashboard tells you in one click. Open Appearance:

    • Appearance → Editor means a block theme is active. WordPress.org’s Site Editor documentation states the Site Editor is only available when a block theme is installed and activated, so its presence is the test.
    • Appearance → Customize means a classic theme, where design settings come from the Customizer and the theme’s own options screens.
    • Appearance → Theme File Editor means file editing is switched on. Many hosts and security plugins remove it, which is not a fault.
    • A builder screen such as Elementor, Divi or Beaver Builder on your pages means a fourth model sits on top of the theme. Edit those pages in the builder; theme templates may not control them at all.

    Most confusing tutorials are confusing because they were written for the other model. A guide that says “go to Appearance → Customize” is describing a classic theme, and on a block theme that menu item does not exist.

    Match the change to the layer that stores it

    Three layers, in order of how safe they are to touch:

    • Settings. Customizer options, theme option screens, Site Editor global Styles. Saved in the database. Survives theme updates. Limited to what the theme exposes.
    • Templates. Block templates and template parts in the Site Editor, or PHP files such as single.php and header.php in a classic theme. This is where layout actually lives. Block template edits go to the database; PHP template edits belong in a child theme.
    • Code. functions.php, hooks and filters. This is where sites break, and where a snippet plugin is usually the better home.

    Before opening anything, write the change as an outcome: “make the mobile header shorter”, not “edit the header file”. Outcomes point at a layer. File names point at whichever file you happened to guess.

    Block themes: Styles for global design, templates for layout

    Open Appearance → Editor and pick the surface that matches the scope of the change.

    1. Styles for site-wide typography, colors, spacing and button styling. Changes here apply everywhere and are the first thing to try.
    2. Patterns and template parts for reusable pieces: the header, the footer, a call-to-action band. Editing the header template part changes every page that uses it.
    3. Templates for the structure of a view: single post, page, archive, search results, 404.
    4. Save, then load one real page in the browser at full width and at roughly 375px wide.
    WordPress Site Editor Styles panel used to edit a block theme
    The WordPress Site Editor’s Styles sidebar offers granular control over global color and typography, defining the visual identity of your block theme. · Source: wordpress.org

    The most common block-theme mistake is a layer mismatch in the opposite direction: editing a page’s content when a template governs the output, then concluding the change “didn’t save”. If the element appears on many pages, it comes from a template part. If it appears on one page only, it is content.

    A child theme of a block theme is usually a folder with a style.css header and a theme.json that overrides specific settings, rather than a pile of copied PHP.

    Classic themes: the Customizer, then Additional CSS, then stop

    Start at Appearance → Customize and look for the setting that matches the outcome: Site Identity for the logo, Colors, Menus, Widgets, Homepage Settings, plus whatever panels the theme adds. Anything you set here is update-safe.

    Appearance → Customize → Additional CSS is the right home for presentation tweaks the markup already supports: a button color, a font size, tighter spacing. It is stored in the database, it is easy to remove, and for a handful of rules it beats building a child theme.

    Additional CSS stops being the answer when you are fighting specificity to move things around. If you are stacking !important to rebuild a header, the markup cannot produce the layout you want. At that point the honest options are a child theme template, a different theme, or a developer. More CSS just makes the next person’s job harder.

    If the change is clear but you would rather not be the person hunting for the template, design changes on an existing theme are the kind of work SiteSelf does through chat, using the SiteSelf Connector plugin for settings and hosting access for theme files.

    How to build a child theme with two files

    A child theme gives code-level changes a place to live that updates will not overwrite. WordPress loads the child’s version of a template or stylesheet in preference to the parent’s. The theme handbook’s steps come down to a folder and two files.

    The two files

    Create a folder in /wp-content/themes/, for example company-child. Inside it, create style.css:

    /*
    Theme Name: Company Child
    Template: twentytwentyfive
    Version: 1.0.0
    */

    The Template value is the parent theme’s folder name, not its display name. “Kadence Pro” on screen might be kadence on disk. Check /wp-content/themes/ and copy the folder name exactly, including case.

    Then functions.php, which loads the child stylesheet after the parent’s:

    <?php
    add_action( 'wp_enqueue_scripts', function() {
        wp_enqueue_style(
            'company-child-style',
            get_stylesheet_uri(),
            array( 'parent-style-handle' ),
            wp_get_theme()->get( 'Version' )
        );
    } );

    Replace parent-style-handle with the handle the parent uses; search the parent’s functions.php for wp_enqueue_style to find it. Declaring the dependency is more reliable than an @import in the stylesheet, because WordPress then controls load order. Some parent themes, Divi among the ones practitioners complain about most, will render badly if the child does not load parent assets correctly, so check the parent’s own child theme notes before assuming the snippet above is enough.

    wp-content themes directory showing a WordPress child theme folder
    This SFTP client view clearly illustrates the essential wp-content/themes directory where all WordPress themes, including child themes, reside. · Source: www.theistudio.com

    Copy only what you change, at the exact same path

    Do not copy the parent’s entire functions.php into the child. It runs in addition to the parent’s, so duplicated function names produce a fatal error immediately. Copy only the code you need.

    Template overrides work on path matching. If the output you want to change lives in template-parts/post/content.php, the child needs that same relative path, or WordPress keeps using the parent file and your edit does nothing. A misplaced override looks exactly like a caching problem.

    Activate the child from Appearance → Themes, then load the homepage, a single post, an archive and a normal page. Any theme options set on the parent will need to be set again, which is a good reason to build the child theme before you spend an afternoon in the Customizer.

    Put small features in a snippet plugin instead of functions.php

    For hooks, filters and small behavior changes, a snippet plugin is safer than a theme file. Code Snippets, in the WordPress.org plugin directory, describes itself as a way to stop tweaking your theme’s functions.php and to add code as individual, manageable snippets.

    The practical advantage is recovery. Each snippet can be switched off from the plugin’s own screen, or through recovery mode, without SFTP. Add one snippet at a time and load the site after each. The division most practitioners settle on: snippet plugin for functionality, child theme for structure and layout.

    The limit is real. A bad snippet can still take the front end down, and a snippet plugin used as a dumping ground for hundreds of lines becomes its own unmaintainable mess. Database or environment-specific logic belongs in a small custom plugin, not in either place.

    WooCommerce: the shop page is not a page

    Editing the Shop page’s content and seeing nothing change is the single most common WooCommerce theme question. The shop layout comes from a product archive template, not from that page’s content.

    Three routes, cheapest first:

    • On a block theme, edit the Product Catalog or archive template in Appearance → Editor → Templates.
    • On a classic theme with WooCommerce options, use the theme’s own settings. Astra, Blocksy and Kadence each expose product catalog controls in the Customizer.
    • Override the template. WooCommerce’s developer docs describe copying the template into a woocommerce folder inside your theme, keeping the same directory structure, and editing the copy.

    Overrides fail on precision, not concept. The relative path and filename must match the plugin’s exactly, the theme holding the override must be the active theme, and the output you are chasing may come from several templates plus action hooks, so changing one file may not be enough. Removing markup or hooks that WooCommerce expects is how add-to-cart and checkout break, so test an actual purchase after any override. Store owners who want this handled without touching template files can read about WooCommerce work through chat.

    If the screen goes white after a PHP edit

    The white screen and the “critical error” page are both documented in WordPress’s Common WordPress errors handbook, and a PHP error in functions.php is the usual cause after theme editing. WordPress also emails the admin address with a recovery mode link, subject line “Your Site is Experiencing a Technical Issue”. Check that inbox first.

    WordPress critical error message after a functions.php edit
    This critical error message, displayed in your browser, signals a fatal PHP issue that often requires SFTP access to resolve. · Source: www.wpbeginner.com

    Work in this order and stop when the site returns:

    1. Revert the file. Over SFTP or your host’s file manager, remove the code you just added or restore your saved copy. Do not keep editing in the dashboard; if /wp-admin goes down too, that route closes.
    2. Rename the theme folder. Change my-theme to my-theme-old in /wp-content/themes/. WordPress falls back to a default theme such as Twenty Twenty-Five. If the site comes back, the fault is in the theme.
    3. Read the error. Set WP_DEBUG and WP_DEBUG_LOG to true in wp-config.php and open wp-content/debug.log. It names the file and the line.
    4. Reinstall the theme. If the file looks corrupted, upload a fresh copy of the parent theme. Your customizations are in the child theme, which is the point of having one.

    Get help when the error persists after the theme is ruled out, when you have no SFTP or file manager access, or when the site takes orders and every minute of a blank checkout costs money. Guessing is more expensive than asking.

    What to check before you call the edit done

    “Saved” is not “working”. Run through this after any theme change:

    • Clear the caching plugin, the host cache, the CDN and your browser, in that order, before believing the change did not apply.
    • View the change at a narrow width. Headers, tables, long headings and forms are where mobile breaks.
    • Load every view the edited template touches: post, page, archive, search results, pagination, and one page while logged out.
    • On a store, load a product, add to cart and reach checkout.
    • Note what you changed, where, and how to undo it. A one-line record beats memory three months later.
    • Recheck after the next parent theme update, particularly if you overrode a template.

    Visual settings in the visual tools, durable overrides in a child theme, functionality in a snippet plugin, nothing in the parent theme. That split is what keeps an update from erasing your work.

    Frequently asked questions

    Why is Appearance → Customize missing from my dashboard?

    You are almost certainly running a block theme, where the Customizer is replaced by the Site Editor at Appearance → Editor. Some themes hide parts of the Customizer too. If neither menu item appears, check which theme is active under Appearance → Themes.

    Why can’t I find the Theme File Editor?

    Many hosts and security plugins disable file editing from the dashboard, and multisite installs restrict it by default. It can also be off because file permissions do not allow writes. Use SFTP or your host’s file manager instead; that is the better workflow anyway, since it lets you keep a copy of the original file.

    Do I need a child theme, or is Additional CSS enough?

    For colors, fonts and spacing that the existing markup supports, Additional CSS is enough and it survives theme updates. For template changes, PHP, or anything structural, use a child theme. Developers disagree about the middle ground; a few dozen CSS rules do not need a child theme, but a growing pile of overrides does.

    My edits do not show up on the site. What now?

    Clear site, CDN and browser caches first. Then confirm you edited the template the page actually uses, since a page may render from front-page.php rather than page.php, or from a block template rather than page content. If the CSS is loading but losing, the parent rule is more specific, and if a page builder owns the page, the theme template may not be in play at all.

    Where are WordPress theme files stored?

    In /wp-content/themes/your-theme-name/, reachable over SFTP or through your host’s file manager. Practitioner advice across r/webdev is blunt about the rest: /wp-admin and /wp-includes are off limits, and plugin files should be overridden rather than edited in place.

    Can SiteSelf edit pages built with Elementor or Divi?

    No. Pages owned by a visual page builder are refused at the moment of work, with the reason given, because the builder holds the layout rather than the theme templates. Theme-level styling, templates and code on a standard theme are in scope, given the right access.

  • How to build a landing page in WordPress

    Key takeaways

    • A landing page in WordPress is a Page plus four decisions: template, slug, index setting, and what loads on the page. Nearly every failure traces back to one of them, or to a cache sitting in front of them.
    • Block themes: build a Landing page template in the Site Editor with the header and footer removed, then assign it in the page’s Settings sidebar. Classic themes: pick the full-width or canvas template, or add a template file in a child theme.
    • After you change a slug, open Settings and then Permalinks and press Save Changes to flush rewrite rules, then check that no live ad or menu item still points at the old URL.
    • A per-page Index setting does nothing while the SEO plugin still has a site-wide noindex rule on Pages. Check both.
    • Test the form on the published URL in a logged-out browser. A form that fails silently looks exactly like traffic that did not convert.

    WordPress has no landing page object. There is no dedicated post type, no setting to switch on, no feature to install. A landing page is an ordinary Page, and four decisions make it act like a landing page: the template that renders it, its slug, its indexing settings, and what CSS and JavaScript load on it.

    That framing is worth holding onto, because it also describes every way the page fails. Blank page, wrong layout, 404, missing from Google, form that does nothing: each one is a template problem, a permalink problem, an indexing problem, an asset problem, or a cache sitting in front of one of those. Fix the category and the symptom goes away.

    Decide what renders the page before you place a single block

    This is the decision that sets the ceiling on everything else. A landing page built with the block editor and a stripped template loads the theme’s stylesheet and whatever the blocks need. The same page built in a full page builder also loads the builder’s own CSS and JavaScript, on every request, whether the page uses three of its widgets or thirty.

    That overhead is not fatal. It is a real cost that shows up on the metric advertisers care about. web.dev’s Largest Contentful Paint guidance puts the “good” threshold at 2.5 seconds, measured at the 75th percentile of page loads, which is a low bar to clear on a laptop and a high one on a phone on mobile data.

    Three honest options:

    • Block editor plus a custom template. Free, lightest, no extra plugin. You need to be comfortable in the Site Editor, and you get no prebuilt campaign templates and no built-in split testing.
    • A page builder you already use across the site. Fastest to produce, easiest to hand to a marketer, and the standard choice if you publish campaign pages regularly. Adds page weight and one more thing that can conflict after an update.
    • A second builder, just for landing pages. Usually the worst of both. Two builders on one site means two asset stacks, two sets of update risk, and two ways to edit the same page.

    Pick one and stay with it. Overlapping tools doing the same job is the most reliable way to create a conflict you will spend an afternoon isolating.

    Build the page: block theme, classic theme, or a template file

    Block theme (Twenty Twenty-Four and similar)

    The Site Editor is only available when a block theme is active, according to WordPress.org’s Site Editor documentation. If Appearance shows an Editor item, you have one.

    1. Go to Appearance, then Editor, then Templates, and add a new template for Pages. Name it something obvious, like Landing page.
    2. Delete the Header and Footer template parts from it. Keep the Content block. That is your distraction-free shell, reusable for every campaign.
    3. Create the Page under Pages, then in the Settings sidebar set Template to Landing page. The Settings sidebar is the standard place WordPress exposes per-page controls in the block editor.
    4. Build the page in the content area with ordinary blocks: Cover or Group for the hero, Columns for benefits, an image or two, your form block.
    WordPress Site Editor templates list used to create a landing page template
    Within the WordPress Site Editor, easily manage existing templates or add new ones, including a blank page for a custom landing page without a header or footer. · Source: www.gravityforms.com

    Classic theme

    Open the Page, and in the Settings sidebar look for Template. Most classic themes ship something called Full Width, Blank, Canvas or Page Builder. Pick it, then hide anything the theme still prints, usually through the theme’s own page options.

    If the theme has no suitable template, add one in a child theme rather than editing the parent. A parent theme update will overwrite your file and take the design with it. A minimal blank template looks like this:

    <?php
    /* Template Name: Landing page */
    ?>
    <!doctype html>
    <html <?php language_attributes(); ?>>
    <head><?php wp_head(); ?></head>
    <body <?php body_class(); ?>>
    <?php while ( have_posts() ) : the_post(); the_content(); endwhile; ?>
    <?php wp_footer(); ?>
    </body>
    </html>
    

    Save it as landing-page.php in the child theme. Keeping wp_head() and wp_footer() matters: drop them and your analytics, your form scripts and half your plugins stop loading on exactly the page you care about.

    What goes on the page

    The structure practitioners keep landing on is boring and stable: hero, the problem, the offer, no more than three feature sections, proof, objections, a repeated call to action.

    The hero carries one H1 that echoes the ad or email that sent the visitor, one sentence of plain value, and one button. If the ad promised a free quote, the H1 says so. Proof goes after the benefits, not before, because a testimonial only reduces friction once the reader knows what is being offered. Named people with specific outcomes do more than a wall of anonymous “verified customer” quotes.

    Keep one goal and one primary action. A second offer on the page is a second decision, and second decisions are where conversion goes to die.

    The settings that decide whether the page works

    Design is the part everyone looks at. These four are the part that breaks.

    Slug. Short, campaign-aware, and unique. Check it does not collide with a plugin’s base, like /shop/, /docs/ or /kb/. If it does, change the plugin’s base in its settings rather than renaming the page a second time.

    Indexing. Campaign pages fed only by ads can be set to noindex. Pages you also want found in search must be set to Index, with the canonical URL pointing at themselves, not at the homepage. Then check the SEO plugin’s site-wide settings, because a global “noindex Pages” rule quietly overrides the per-page fix you just made.

    Navigation. Keep the page out of the main menu when traffic comes from ads or email. For a page that also serves organic search, a minimal header is a fair trade. For B2B offers, a single link to pricing or docs often costs less than the friction of hiding it.

    The thank-you page. Create a separate page shown after submit, set the analytics goal on that URL, and tag campaigns with UTM parameters so you can compare channels. Without a distinct URL you are guessing which source produced which lead.

    WordPress Permalinks settings screen used to flush rewrite rules after a landing page slug change
    Simply clicking the Save Changes button on the Permalink Settings screen can refresh rewrite rules, resolving many 404 errors on landing pages. · Source: www.geeksforgeeks.org

    Check these before you send traffic

    1. Open the published URL in a logged-out browser, not the editor preview. Template problems and cache problems only show up there.
    2. Submit the form yourself. Confirm the entry arrives, the notification email arrives, and the thank-you page loads.
    3. Load it on a phone on mobile data. Check the CTA is reachable without pinching and the hero image is not a 2 MB JPEG.
    4. Confirm exactly one H1, descriptive button text (“Book a call”, not “Learn more”), and enough contrast on the button to read it outdoors.
    5. Purge every cache layer you run: the caching plugin, the host cache, the CDN. Then reload.
    6. Check the page in Search Console’s URL Inspection if it is meant to be indexed.

    Do this again after any change to the page, not just at launch. Most silent landing page failures start with an edit that was never checked on the live URL. If keeping that loop going is the part that never happens, it is the kind of work you can hand to an agent that edits pages and reports back.

    When the page is blank, 404s, or the form does nothing

    Ranked roughly by how often each one turns out to be the cause.

    Blank page or “There has been a critical error on this website”

    Almost always a plugin or theme conflict, and almost always right after an update. Work in staging if you have it. Deactivate all plugins, then reactivate one at a time, refreshing the landing page after each. On a site with twenty or thirty plugins, halve the set instead of going one by one.

    To avoid taking the live page down while you test, the Health Check & Troubleshooting plugin from WordPress.org disables plugins for your session only. Note the caveat on its directory listing: WordPress.org flags that it has not been tested with the latest three major releases, so check it on staging first. If you are locked out of the dashboard entirely, rename the plugins directory over SFTP to get back in, then turn WP_DEBUG on in wp-config.php and read the fatal error instead of guessing.

    The page 404s

    Go to Settings, then Permalinks, and press Save Changes without altering anything. That flushes rewrite rules and fixes most cases. If it does not, your .htaccess or Nginx config is not writable and rules are never being written. Then check what still points at the old URL: menu items, internal links, and live ad campaigns, which will keep spending on a 404 until someone notices.

    Your edits do not show up

    Cache, in one of three places. Clear the plugin cache, the host cache and the CDN, in that order, and retest in a private window. Host-level caching is often not configurable from the dashboard, so a correct exclusion in your caching plugin can still be defeated by the server. If edits keep going stale on this one page, exclude the page itself from caching.

    The form submits and nothing happens

    Open the browser console with F12 and watch for JavaScript errors as you submit. The usual causes: a security plugin blocking the AJAX endpoint the form uses, minification or JavaScript deferral changing script order, or mixed content on a page still loading an asset over HTTP. Inside a page builder, using the form plugin’s shortcode instead of its widget removes a whole class of these problems. Turning off JavaScript optimization site-wide to make one form work is a bad trade: exclude that script instead.

    Browser console showing a JavaScript error while testing a WordPress landing page form
    When a form fails to respond, the browser console often reveals an ‘Uncaught TypeError’ pointing directly to the problematic script and line number. · Source: learn.microsoft.com

    WooCommerce pages

    A product landing page should use the Product post type, or a normal Page with WooCommerce blocks or the [product_page id="123"] shortcode. A Page with product copy pasted in has no cart integration. Cart, checkout and account endpoints must stay out of every cache layer, including the host’s. A cached checkout is a revenue failure that looks fine from the outside.

    When to stop and get help

    Stop when the fix requires editing files you cannot restore, when the error is a PHP fatal inside a plugin you did not write, or when the site is taking live ad traffic and you are more than half an hour into isolating a conflict. Roll back to the last backup, point the campaign at a working URL, and debug on staging. Firefighting on production with ad spend running is how a small problem gets expensive.

    Frequently asked questions

    Do I need a plugin to make a landing page in WordPress?

    No. The block editor plus a full-width or blank template covers simple lead-gen pages, and you only really need a form plugin and an SEO plugin on top. Builders earn their place when a non-technical team needs prebuilt templates, or when you want split testing without custom work.

    Can my homepage be a landing page?

    Yes. Go to Settings, then Reading, choose “A static page” and select your page. Do not set the same page as both the homepage and the Posts page, which makes WordPress render blog posts instead of your layout.

    Should a landing page have navigation?

    For pages fed by ads or email, remove it. For pages that also need to work in organic search, a minimal header is reasonable. For considered B2B purchases, keeping one link to pricing or docs usually costs less than the friction of hiding everything.

    How many landing pages should I run?

    One per offer, campaign or audience segment, each with its own URL and its own tracking. One generic page serving four campaigns gives you no way to tell which message worked.

    Should I use a dedicated landing page tool instead of WordPress?

    External tools launch faster and ship testing out of the box, at the cost of a separate subdomain, a separate bill and a split content footprint. A common compromise is to test paid-campaign variants outside the site, then rebuild the winner inside WordPress on your own domain where the SEO value accumulates.

    Will a WordPress landing page rank?

    It can, if it is indexable, canonical to itself, fast on mobile, and says something substantial rather than repeating a slogan four times. Thin pages built purely for ad traffic rarely rank, whatever platform they sit on.