Thank you and congratulations for using Gwyneth theme by WebMan Design!
This user manual will teach you how to set up and use the theme. In case you have any questions that are beyond the scope of this documentation, please join WebMan Design support forum.
Enjoy your Gwyneth WordPress theme! Love this theme? Support it by leaving a review→
WordPress is free open source CMS software for creating websites. It can scale with your needs when you're ready to grow and is easy to learn with many free and low-cost tutorials. You can learn more about WordPress at wordpress.org.
What is a theme?
A WordPress theme changes the way your site looks and affects the style of the content displayed on it. WordPress themes are built so you can change your site's design without losing content. As you are reading a user manual for a WordPress theme and it requires WordPress to run, let's install it first.
In WordPress dashboard navigate to Appearance → Themes and click the Add New button next to "Themes" page title.
On "Add Themes" screen click the Upload Theme button next to page title.
On the next screen choose the theme ZIP file you've downloaded in step 1 above and click the Install Now button.
When the theme is installed, activate it by clicking the "Activate" link.
Now you can go to Appearance → Welcome page for information on how to set up your website and the theme. Also, please pay special attention to your website image sizes setup.
Tip:Welcome page
Don't forget to check the theme welcome page at Appearance → Welcome. It contains everything you need to start.
Theme Welcome page (Appearance → Welcome)
Tip:Get info about updates
Get fast information about new theme updates by subscribing to WebMan Design on Facebook and X (Twitter).
Important:Envato Market
If you've obtained the theme from ThemeForest (Envato Market), please make sure to unpack the downloaded ZIP package on your computer first and check if you are uploading the correct theme ZIP file (or the whole theme folder).
Basically, the theme installation ZIP file or folder is named with your theme slug only, so only gwyneth.
Do not install a whole ZIP package that contains other files such as documentation, child theme, licencing and others. Install only the file in gwyneth-package/theme folder. Otherwise you might experience a common installation error.
Download the theme ZIP package from where you've obtained it originally. Then follow the steps below:
Updating via WordPress dashboard
A simple way of doing a manual theme update is deleting and reinstalling the theme directly via WordPress dashboard. You can read an article or watch a video on how to do this.
Updating via FTP
This is more advanced manual update procedure and you will need an FTP client (such as FileZilla) to connect to your server:
Download the newest theme ZIP file from where you've obtained it and unpack the ZIP file on your computer.
Now you will need an FTP client to connect to your server.
On your server navigate to WORDPRESS_FOLDER/wp-content/themes/ folder.
Delete the existing gwyneth folder (or create a backup just in case - you can do this simply by renaming the folder name by appending .backup to its name so it becomes gwyneth.backup, for example).
Copy the unpacked theme gwyneth folder from your computer (from step 1 above) into WORDPRESS_FOLDER/wp-content/themes/ folder on your server.
Log into your WordPress admin area and check the version of the theme in Appearance → Themes. Your theme should be updated now. (And you can delete the gwyneth.backup folder from step 4 above.)
There is no need to import demo content data in this theme, which prevents introducing redundant content to your website. An easier and more flexible solution is to use block patterns.
Use block patterns from dedicated "Pages" category to create whole page content easily at once:
On page/post edit screen (in block editor) click the block inserter button (the + button in the upper left corner of editor).
Switch to "Patterns" tab. (Optional: click the Explore all patterns button at the bottom of the list of pattern categories to open block pattern inserter pop-up window.)
Choose "Pages" category and select a content you want to insert into your page/post content.
Edit the inserted content to your needs, and set up recommended page template.
Tip:Set up recommended template
Each page content pattern is suited for a specific page template.
Check the pattern description for information what page template to set. If no page template info is provided, use a default template.
Displays only page content and so it's best suited for creating landing pages, or used for no-distraction eshop checkout page. There is no site header, no page intro title section (no h1 heading tag), and no site footer on this template.
It works with every public post type.
"No intro"
Removes page intro title section and there is no h1 heading tag outputted on the page by the theme either.
It works with every public post type.
"Overlaid header"
Removes page intro title section (no h1 heading tag) and overlays site header over page content area. Creates an effect of site header blending into page content.
Don't forget to set sufficient top padding for the first block in such page content (such as Cover block) to mitigate for overlaid site header.
It works with every public post type.
"With sidebar"
This template is disabled by default and becomes available only after you edit "Sidebar" or "Content: With sidebar" template parts, or the actual "With sidebar" template.
For setting up the actual sidebar content (widgets), edit only the "Sidebar" template part.
Excerpt will be displayed in posts list. If no excerpt is set, a portion of post content will take its place.
If you set a custom excerpt text for a post or page, this will be also displayed in page intro section (main title area) unless you hide it with a template.
By default WordPress displays a caption in the archive page title (such as "Category:" in front of a category name). Use Archive Title plugin to hide these labels.
This theme contains a built in featured posts functionality. Once you assign posts to your featured post tag, 3 most recent featured posts will be displayed above posts list on your blog page (as can be seen in theme demo website).
Blog page displaying large "Featured posts" section
You can set featured posts tag in Appearance → Customize → Theme Options → Blog, or have complete control modifying "Posts list: Featured posts"template part in site editor.
Gwyneth theme is compatible with WordPress block editor and supports wide alignment, color palettes, font sizes, and others. Using block editor allows you to create beautiful and performant websites with intriguing page layouts without a page builder plugin. Have a look at theme demo website for inspiration.
This theme contains a library of predesigned block patterns to help you create a custom website with ease and in no time.
Using block patterns
Adding a block pattern into page/post content
On page/post edit screen (in block editor) click the block inserter button (the + button in the upper left corner of editor).
Switch to "Patterns" tab. (Optional: click the Explore all patterns button at the bottom of the list of pattern categories to open block pattern inserter pop-up window.)
Choose a pattern category.
Select a pattern you want to insert into your page/post content.
Edit the inserted pattern to your needs.
Info:Managing patterns
You can manage all patterns and create custom ones in site editor in Appearance → Editor → Patterns.
If block settings sidebar is not displayed, click the settings button in the upper right corner of the editor.
Make sure you are editing the block settings (choose "Block" tab).
In block settings click the styles tab.
Choose a block style you want to apply on the selected block. (If there is no list of styles available, the selected block does not support any block style.)
Now you get full power of editing every aspect of your theme visually, using drag-&-drop block editor - no coding required! Create beautiful, customizable websites with a few clicks.
Gwyneth theme allows you to switch full site editing feature off if needed. It is useful in cases when your plugin does not work with WordPress full site editing features, for example. In hybrid mode you will still be able to edit all theme template parts using block editor, and yet gain from PHP coding if needed.
If you want to change colors of a specific theme section, edit template parts instead.
Important:Typography setup
Although "Styles" section allows you to set up your website typography, the theme provides advanced harmonious responsive typography setup tweaking just a few theme options. So, there is no need to set up typography here.
However, you can still use this section to upload your custom fonts (as of WordPress 6.5).
Open site editor navigating to Appearance → Editor.
In site editor open "Styles" management.
In styles manager you can choose to apply predefined theme styles or tweak the style options. Click the edit style button to modify current style.
For better preview of your styling changes affecting various website elements click the style book button.
Although "Styles" section allows you to set up your website typography, the theme provides advanced harmonious responsive typography setup tweaking just a few theme options. So, there is no need to set up typography here.
However, you can still use this section to upload your custom fonts (as of WordPress 6.5).
Theme applies a palette of colors throughout the site elements. You can modify each individual color in palette, modify WordPress default color palette, and add your own custom colors.
Important:Use solid colors
As the theme automatically calculates additional colors from its palette, it is recommended to use solid colors, not a semi-transparent ones.
Theme color palette description:
"Base" color is used as website background color.
"Contrast" color is used as global text color. Set this for an appropriate contrast against "Base" color.
"Contrast alternative" color is used for headings. Set this for an appropriate contrast against "Base" color.
"Primary" color is an accent color used on links. Set this for an appropriate contrast against "Base" color.
"Primary mixed" color is subtle or contrasting version of "Primary" color. By default it was set as a blend of "Base" and "Primary" color. Not used by the theme, but helpful as subtle background for various sections and elements.
"Secondary" color is an accent color used on buttons. Set this to your liking. (You can actually select what color applies on buttons in Appearance → Customize → Theme Options → Colors & Background → "Button color".)
"Secondary mixed" color is subtle or contrasting version of "Secondary" color. By default it was set as a blend of "Base" and "Secondary" color. Not used by the theme, but helpful as subtle background for various sections and elements.
Important:Gradients
Modifying theme palette colors also causes automatic recalculation of predefined gradients. This is done in background after saving your color modifications and refreshing your browser window (or visiting your website front-end).
If you don't want the recalculated gradients, feel free to modify gradients palette to your needs clicking the "Gradient" tab.
Editing theme colors
Tip:Editing tips
To see the color names, click the "Color options" button (1) and select "Show details" (2).
If you want to revert your color changes, click the "Color options" button (3) and select "Reset colors" (4).
Using template parts is ideal for modifying global theme sections that repeat across multiple templates.
Appearance → Editor → Patterns → Manage all template parts
Template parts are global areas of your website, such as site header, site footer, post comments area, or content of error 404 page. They are sections reused in the theme templates.
Updating content of a template part will update all of its occurrences across all templates at once. The theme provides you with a number of template parts allowing you to modify each section of the theme with ease.
Info:Available also in hybrid mode
Even in hybrid theme mode you can still edit all template parts using block editor! The only difference is in the path where you find the template part manager: Appearance → Template Parts.
Open site editor navigating to Appearance → Editor.
In site editor open "Patterns" management.
Now click "Manage all template parts" in patterns manager.
Click a template part name from the list to edit its content.
List of all available theme, plugin and custom template parts
Wherever possible, edit a template part instead of the whole template. Editing a template part applies your modification across all templates where the template part is being used.
Appearance → Editor → Templates → Manage all templates
Editing theme templates is an advanced feature and it is recommended to get familiar with WordPress template hierarchy. Understanding template hierarchy allows you to create any template you like.
Navigation menu of your website contains links to pages, categories, other content, or custom links. The menu is keyboard accessible and you can make it mobile friendly. It also supports simple megamenu functionality.
Tip:Multilingual Navigation block
If you are building a multilingual website and having issues making the Navigation block multilingual, try using Classic Menu in Navigation Block plugin. It allows you to display classic menus in Navigation block which should resolve the issues.
The plugin was tested and working well with popular Polylang and WPML multilingual plugins.
For simple editing of main navigation displayed in the site header navigate to Appearance → Editor → Navigation (note that this is not available if you disabled full site editing). Then choose the navigation menu you want to edit, and you can now add, remove, organize and modify menu items here.
For advanced editing of main navigation with all styling options edit a dedicated template part:
Appearance → Editor → Patterns → Manage all template parts → "Header" → Navigation block
Open site editor navigating to Appearance → Editor.
In site editor open "Patterns" management.
Now click "Manage all template parts" in patterns manager.
Click "Header" from the list of all available template parts to edit its content.
Click the "Navigation" block to edit its content and options.
Important:Template editor
Note that if you disabled full site editing in theme options, the path to edit "Navigation" block in "Header" template part changes to Appearance → Template Parts → Header. Basically, you are skipping step #2 and #3 from the procedure above.
You can enable or disable mobile menu for your main navigation editing the Navigation block in "Header" template part.
Enabling mobile navigation for Navigation block
Different mobile and desktop menu
Alternatively, in case you need to provide a different menu for small (mobile phone) and large (laptop, desktop) screens, Gwyneth theme has a solution:
Insert 2 Navigation blocks into your site "Header" template part.
Set corresponding responsive block style for each of these Navigation blocks depending on your needs:
Use "Hide on small screens" block style to display the Navigation block on laptop or desktop screens only.
Use "Only on small screens" block style to display the Navigation block on mobile phone screens only.
Now, whenever the screen size matches the condition based on small screen breakpoint (usually set to 880px) only a specific Navigation block is displayed. The other Navigation block is hidden inaccessibly.
Improving user experience
The theme provides useful "Fixed mobile toggle button" block style which fixes the position of the mobile navigation open/close button to the bottom of the mobile device screen for easier access when using the device with one hand.
Apply this block style on the Navigation block in site "Header" template part.
Before proceeding, make sure to create a nested menu (submenu) in your navigation block.
Select a top level parent menu item (the Submenu block) where you want to enable megamenu functionality.
If block settings sidebar is not displayed, click the settings button in the upper right corner of the editor.
Make sure you are editing the block settings (choose "Block" tab).
In block settings click the styles tab.
Choose "Megamenu" style. Now your megamenu is set and:
The 2nd level menu items (first child menu items) of this megamenu parent menu item will be displayed as label for your megamenu columns.
Tip:Disable link
You can even set "Disable link" block style for any menu item to render its link inactive, un-clickable. Such menu items are useful as a megamenu column labels/titles.
Note that it is still recommended to set the link with a dummy URL such as #0.
The 3rd level menu items (second child menu items) of this megamenu parent menu item will become actual menu items within your megamenu columns.
With full site editing theme (block theme) you have full power of modifying your theme templates and template parts. If you want to display a sidebar, simply insert a block pattern containing the sidebar into desired template or template part content.
The theme provides multiple block patterns displaying a dedicated "Sidebar" template part. A template part was chosen for sidebar content management so you can edit your (global) sidebar in one place and it will be updated everywhere the "Sidebar" template part is being used.
Important:Template editor
Note that if you disabled full site editing in theme options, you can edit onlytemplate parts, not templates.
Warning:Template Part block restriction
Note that Template Part block can be used only in site editor. So, only when editing template parts or templates. In page/post editor the Template Part block is not available.
Tip:Sidebar Block
If you want to display classic widgets in the sidebar, try Sidebar Block plugin.
Appearance → Editor → Patterns → Manage all template parts → "Sidebar"
Open site editor navigating to Appearance → Editor.
In site editor open "Patterns" management.
Now click "Manage all template parts" in patterns manager.
Click "Sidebar" from the list of all available template parts to edit its content.
Important:Template editor
Note that if you disabled full site editing in theme options, the path to edit "Sidebar" template part content changes to Appearance → Template Parts → Sidebar. Basically, you are skipping step #2 and #3 from the procedure above.
If you disabled full site editing you can not edit "Styles" section in site editor. Continue using Appearance → Customize → Theme Options, where you can set also colors and layout widths now.
Once you display your site header as a template part with "Site header" block style (this is a theme default setup), you can tweak additional header layout options in Appearance → Customize → Theme Options → Layout → Header.
Choose how your site header behaves:
Default layout displays the header as is, with no positioning effect.
Sticky on scroll sticks the header to top of the browser window when scrolling.
Overlaying content makes the site header positioned so it overlays your page content. Prepare your site header for this layout by removing its background. You also need to modify the page intro section(s) so it has sufficient top padding for the header not to overlay any text and possibly also tweak intro background.
Overlaying content & sticky on scroll combines the 2 previous options. In this case you need to set site header background color, which will be applied when scrolling (see below for additional background option).
Preview of various site header layouts
For scrolling header layouts you can furthermore set background behavior when header is not sticky (when page was not scrolled).
By default, the theme displays page/post featured image in page intro section (the page title section, page header). When page/post featured image is not set, page intro displays header image you set in Appearance → Customize → Header Image (or Appearance → Header).
The header image is applied as a blurred background of page intro section. Removing fallback header image displays page intro with a solid color background, as can be seen in this screenshot for comparison:
Comparing page intro with and without header image enabled
Though, you can always modify page intro section to your liking by editing "Intro (Page header)" and "Intro: Post"template parts in site editor.
Important:Remove image if not needed
If you want your page intro sections on a solid color background without an image, don't forget to disable the header image: Appearance → Customize → Header Image → "Current header" → "Hide image" button.
(If "Hide image" button is not displayed for you, first choose an image from "Suggested" list and then you can click the "Hide image" button.)
Important:Let theme know
When creating your own custom page intro by modifying template parts, apply has-fallback-image CSS class on a block which displays featured image and you want it to fall back to header image.
Otherwise the theme does not know you want to apply header image as a fall back image for your page intro featured images.
Theme provides options for setting up more advanced harmonious typography in comparison to typography options in site editor (full site editing). You can find these options in Appearance → Customize → Theme Options → Typography.
Set up global base font size and tweak harmonious typography ratios. The theme will then automatically calculate font sizes for headings and other elements to assure the best readability experience.
Text sizes are also responsively fluid, adapting to your visitor's screen size.
You can also set up custom font families, which can be simply and consistently reused in block editor without breaking your website design and typography by mixing too many of different fonts.
And, you are also free to use any font family from Google Fonts. Gwyneth theme even makes sure these font families are served directly from your website and not from Google's servers. This effectively enhances your visitor's privacy and your website's GDPR compliance.
Tip:WordPress fonts library
When using a block theme, you can upload your custom fonts using WordPress native fonts library.
Gwyneth theme contains a hybrid mode that allows you to disable editing theme templates and use the theme in more traditional, "classic" way. This mode can be useful when your plugin does not work with WordPress full site editing (yet), for example.
Advantages of hybrid mode:
Developers can use PHP code to tweak the theme and WordPress the way they are used to with classic themes.
You can still edit all template parts visually in block editor with Gwyneth theme! No need to use coding for that, which means great customization options.
Toggle template editing at Appearance → Customize → Theme Options → Layout → Site Editing.
Tip:Classic vs Block theme
Learn more about the difference between classic and block themes at WordPress website.
Gwyneth is a unique block theme which can be switched to classic/hybrid theme by disabling full site editing.
Every WordPress theme contains some texts that need to be translated into your language if you are building a non-English website. This theme if fully translation ready.
If you are building a multilingual website and having issues making the Navigation block multilingual, try using Classic Menu in Navigation Block plugin. It allows you to display classic menus in Navigation block which should resolve the issues.
The plugin was tested and working well with popular Polylang and WPML multilingual plugins.
Make a copy of the original gwyneth/languages/gwyneth.pot file.
Rename the copied file now: add hyphen followed with your language code locale, and change the file extension to "po". For example, the British English file would be named gwyneth-en_GB.po.
Use Poedit to translate the file and export (save) translation in "mo" file format.
Upload translated gwyneth-en_GB.mo and gwyneth-en_GB.po file into your WordPress languages directory, into themes folder (such as /wp-content/languages/themes/gwyneth-en_GB.mo (if the themes folder does not exist in your WordPress languages directory, create it).
For JavaScript localization we need to create additional JSON translation files. In your computer terminal/command line/SSH set the directory to /wp-content/languages/themes/.
Using WPCLI run this command to create the JSON file(s): wp i18n make-json gwyneth-en_GB.po --no-purge.
If the gwyneth-en_GB.po file contains JavaScript translation strings, WPCLI should create gwyneth-en_GB-{md5}.json file(s) for you. You are done now.
Warning:Don't lose your files!
When you update the theme, all custom translation files will be deleted from /wp-content/themes/gwyneth/languages folder. Do not put your custom translation files into that folder! Basically, you should never modify the actual theme files and folders.
Methos 2: Translating in WordPress admin
If you would like to translate the theme directly in your WordPress dashboard you need to use a specialized plugin. Check out Loco Translate plugin and instructions on how to use it at beginner's guide and technical overview.
Translate Plugins Too!
Your website is built with WordPress system itself, a theme and some plugins.
There is a high chance that WordPress itself is already translated into your language. So, you don't have to translate it on your own. You have also learned how to translate the theme above. But what about plugins and their texts?
If you are lucky, your plugin contains your language translations already and you don't have to do anything. But if you need to translate a plugin, the best advice is to check the plugin's documentation for the best approach.
Alternatively you can also use Loco Translate plugin (again) to translate your plugins directly in your WordPress admin area.
Share Your Translation
If you would like to help out translating the theme, please contribute your translations at WebMan Design support forum by submitting a ZIP package of your .po and .mo translation files in a new support ticket attachment. Thank you!
Accessibility in web development means creating a web site that everybody can use regardless of one's hardware, software, or sensory, or physical impairment. It is about building a barrier-less web.
While creating accessible website is a complex process that includes a content strategy, Gwyneth theme helps you with being accessibility ready out of the box. It complies to WordPress accessibility requirements and was built to help you create a website that passes WCAG 2.2 level AA requirements.
Among other features the theme itself applies proper headings structure, uses ARIA attributes and landmarks where needed, adds informative "read more" links, makes your website navigation keyboard accessible, creates skip links for you and provides sufficient color contrast in default color scheme.
However, please understand that creating an accessible website is not just about a theme. You need to apply accessibility principles also to your website content and be cautious when using plugins. For further information please read WordPress documentation about accessibility.
And for even more information about accessibility please check:
Content area of this theme was designed carefully to provide the best reading experience for your visitors. Maximum line width is set to roughly 70 characters (can be tweaked in theme options). With proper line height and spacing around elements it is easier for visitors to digest your website content.
To comply with accessibility guidelines, the theme follows this headings structure:
Max one h1 on any given page
Theme outputs only one first-level heading (HTML tag <h1>) on each page. This is reserved for a page main title.
Important:Exceptions in templates
Read more about exception from this rule applied with certain templates. For example, you can remove the h1 title altogether and create your own custom one in a page content.
Hierarchy
Theme follows the best practice by hierarchically organizing heading levels, not skipping any of them. For example, h3 headings can be found only in a section titled with level h2 (and not h1). You should do the same when building your site content too.
Tip:Test it out!
In case you would like to test a page headings hierarchy, there is a great browser extension for this called HeadingsMap.
Why do you need to use plugins when you expected the theme to have all the functionality in it? Well, according to WordPress guidelines and generally the best practice: themes are meant for presentational purpose only, while plugins provide website functionality.
The reason for this is that when you decide to update your website looks you simply change a theme without loosing your website content and additional functionality such as eCommerce or portfolio.
This theme follows this WordPress philosophy and you can rest assured your site is as future-proof as possible. No lock-in effect with WebMan Design themes!
Info:Compatibility
The theme does not need any plugin to work properly. It is coded responsibly and flexibly enough so it should be compatible with any decently coded 3rd party plugin.
However, please understand there are thousands of plugins available for WordPress and it is not humanly possible to test them all. Feel free to use your plugin and in case of an issue contact support for help.
Theme provides code and/or design integration for certain plugins. You will find these plugins in recommendations list below. They provide additional functionality for your website or improve your and your visitor's experience.
Please note that these are only recommended, suggested plugins, they are not required for the theme to work. Always read the plugin description before installing a plugin and install only those plugins you will use on your website.
If your theme already provides block styles, the styles from this plugin will be added only (no block style is being replaced), so you might experience some duplicate block styles.
Toggle specific block styles in plugin options in Settings → Abs.
Add custom fields, content types (custom post types) and taxonomies to your website. With paid version of the plugin you can also create custom blocks.
If you need to tweak a layout for using a page builder plugin, do so in theme options in Appearance → Customize → Theme Options → Page builders.
Tip:Page builder with block theme
If you really need to use a page builder plugin even if full site editing is enabled, and you experience some layout issues, you can create a custom "Page builder" template to use whenever you need to build a page/post content with your page builder plugin.
Once you set correct image sizes, all your newly uploaded images will get processed with new settings. But for the images already uploaded to your website you need to use additional plugin to refresh their sizes. Regenerate Thumbnails plugin (or similar) will do the trick.
This theme predefines some useful modifier CSS classes for you. You can use them in block editor, in a page builder, or however you find useful. These classes modify appearance of your website elements and blocks.
For full up-to-date list of the helper modifier CSS classes and instructions on how to use them refer to theme demo website.
Having a performant website is a must. It makes your website more SEO friendly and most importantly pleasing for your visitors, more accessible. This theme was coded with performance in mind but we can always take things even further:
Use a good host
A good hosting for your website is very important choice you can make towards a speedy website. Depending on your location it is also advised to use a host that has servers in your country or at least on the same continent.
You should always keep the file size of your website media as low as possible. Prepare images before you upload them to your website: compress them, reduce their dimensions, maybe even crop them. Use plugins to optimize further more.
In case of video and audio files set the optimal compression and formats before uploading them to your site. Consider also using services such as Vimeo, YouTube or SoundCloud to host your files off your servers.
But you will get better results using a dedicated solutions such as WP Rocket or WP Super Cache or SiteGround Optimizer. Or maybe your hosting provider applies some sort of caching already? Check with them.
Warning:Minify & combine
Your caching solution may provide CSS and JS files minification and combination. Be cautious though: these are complex processes which may cause errors on your website. Test thoroughly!
Tip:Measure performance
For measuring your website performance and tips on how to improve it use services such as GTmetrix, Pingdom Tools and WebPageTest.
By default, the theme supports any Google Fonts font out of the box. So, if you want to use a font family from Google Fonts, simply set it up in font family option fields in Appearance → Customize → Theme Options → Typography.
But if you want to use a custom font (a purchased premium font, or font not available at Google Fonts) follow this procedure:
Use a plugin to upload your custom font to your website, such as Custom Fonts plugin. (Or upload it by other means, such as via a child theme or child theme plugin.)
Tip:Use WordPress fonts library
When using a block theme, you can upload your custom fonts using WordPress native fonts library.
Set font family fields in Appearance → Customize → Theme Options → Typography to use your custom font family. (These fields take a value valid for CSS font-family property.)
The theme applies vertical margin on elements to provide automatic harmonious spacing. Sometimes you may need to remove this gap between rows of columns with a background, for example.
To remove the gap, null out (set value to zero, 0) vertical margin (usually top margin) of the block in block editor, or element in your page builder.
Here is how you can set top margin in block editor:
Gwyneth theme provides multiple responsive spacing options for blocks (for margin and padding, for example).
Among these there is a special option of "Content padding" added for setting up intelligent spacing on Content block (when editing templates).
Once this spacing value is applied as a top padding on the Content block, the first block in the page/post content that is also a fully aligned block will mitigate for this content spacing and sticks to the upper edge of the page/post content, effectively removing the spacing automatically. If the block is not fully aligned, the spacing (content padding) is still present.
Example of automatic mitigation for "Content padding" spacing option
The opposite applies for bottom padding and the last block in the page/post content (in Content block).
Feel free to use this "Content padding" spacing value everywhere it fits your needs. For example, it can be used for keeping vertical spacing between sections consistent in your page/post content. The default height of the "Spacer" block is also set to "Content padding" value.
WooCommerce adds default content to Cart and Checkout page after plugin installation. The actual content depends on whether the theme is a block theme (full site editing theme) or a classic theme.
This may cause an issue of rendering 2 different cart/checkout forms on such pages. Read below for the solution:
As WooCommerce adds default content to Cart and Checkout page after plugin installation, this may produce displaying of 2 different cart/checkout forms on those pages. (Check the pages on your website front-end after WooCommerce plugin installation.)
To resolve this issue and provide only one cart/checkout form:
Open "Cart" page for editing and remove its content. (Or you can set custom content using blocks instead. You can also set page excerpt.)
Do the same for "Checkout" page.
Check those pages on your website front-end now.
Tip:Alternative: Edit templates
You can directly edit "Cart" and "Checkout" templates in Site Editor to your needs, which provides more advanced and thorough control over those layouts.
If you need to make coding changes to the theme or WordPress itself, use child theming functionality, or even more flexible"child theme" plugin solution.
This way you can update the parent (original) Gwyneth theme without worrying about your custom code getting overwritten and lost. Your code is kept safe in your child theme/plugin.
For more flexible approach that works with any type of theme (classic or FSE block theme), or for cases when you can't use a child theme, we have created a free "Child Theme" Plugin for you.
Info:Is using a "child theme" plugin better?
Using "child theme" plugin is mostly beneficial when you use a block theme (full site editing theme) for some time already and then you decide you need to modify something with code.
If you plan to provide means for future code modifications right from the start use a child theme, even with a block parent theme.
More technical details
Full site editing block theme compatibility with WordPress child themes concept is limited. This is due to Site Editor user-modifications being stored in WordPress database. It causes issues when you decide to use a child theme afterwards, because all of these database records are bound to a specific (parent) theme name.
Copying modified Site Editor options and layouts so they work with a child theme is more complicated process. Though, this complication is solved elegantly using a "child theme" plugin.
The plugin works the same way as classic child theme would - you can use it anytime, even after you've already made custom changes in Site Editor, and it involves less code in comparison to a child theme.
A downside of the plugin may be overriding parent theme templates with code:
With WebMan Design themes this should not be an issue as they are very flexible and contain useful action and filter hooks you can use instead.
Download a free child theme or plugin from WebMan Design GitHub repository. Don't forget to check the information in the repository for how to set them up.
Tip:Theme from Envato Market?
If you've obtained the theme from Envato Market, there is a high chance that a dedicated child theme is already included in the package you've downloaded from the marketplace.
Check out your files. Or download a sample child theme from the aforementioned repository.
The theme provides multiple useful action and filter hooks, which can alter its functionality. Check the theme's source code for hook references: simply search for do_action and/or apply_filters. Or contact support for help.
Gwyneth theme uses Theme Hook Alliance (THA) hooks too. This is useful to rebuild theme structure or add your custom sections anywhere. (Note that THA hooks are not available when site editor is enabled.)
