Zooey WordPress Theme User Manual

Thank you and congratulations for using Zooey 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 Zooey WordPress theme!
Love this theme? Support it by leaving a review

WordPress

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.

Installing WordPress

You can run WordPress locally on your computer, or install and use it on your web hosting account (what kind of web hosting should you use?).

Securing WordPress

You can improve your WordPress installation security taking these steps:

  • Set the security keys in wp-config.php file.
  • Do not use admin as user name and set strong passwords!
  • After installation is done, remove wp-admin/install.php file.
  • Keep backups of the database and WordPress files.
  • Keep your WordPress installation, plugins and themes up to date!
  • Strengthen security further with additional specialized plugins.

Tutorials

Beginner tutorials, resources for first steps with WordPress:

Websites & Articles:

Videos:

Theme Installation

Important: Theme requirements

Zooey requires at least WordPress 6.4 and PHP 7.0 to work properly. Please make sure to meet the requirements.

Appearance → Themes → Add New → search for "Zooey" → Install → Activate

As you've obtained the theme at WordPress themes repository, use this procedure for installation:

  1. Log into your WordPress admin.
  2. In WordPress admin navigate to Appearance → Themes and click the Add New button next to "Themes" page title.
  3. On "Add Themes" screen use a search field to search for "Zooey".
  4. Once you've found the theme in the search results list, click the Install button when hovering over the theme.
  5. After the theme is installed, activate it by clicking the "Activate" link.
  6. 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.

Tip: Get info about updates

Get fast information about new theme updates by subscribing to WebMan Design on Facebook and X (Twitter).

Theme Updates

You will be notified in the WordPress admin each time a new updated theme version is available. Install the update following instructions below.

Tip: Info on social networks

If there is a specific procedure required during update, this will be shared on the Facebook and X (Twitter) pages.

Important: Back up your website

To keep things safe please consider backing up your website and database before doing any updates to your website.

Automatic Theme Update

WordPress itself will notify you about a new theme update. The only thing you need to do now is to proceed with update procedure suggested in your WordPress dashboard.

Tip: Automatic update failed?

If automatic update fails for whatever reason, please update the theme manually → see below.

Manual Theme Update

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:

  1. Download the newest theme ZIP file from where you've obtained it and unpack the ZIP file on your computer.
  2. Now you will need an FTP client to connect to your server.
  3. On your server navigate to WORDPRESS_FOLDER/wp-content/themes/ folder.
  4. Delete the existing zooey 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 zooey.backup, for example).
  5. Copy the unpacked theme zooey folder from your computer (from step 1 above) into WORDPRESS_FOLDER/wp-content/themes/ folder on your server.
  6. 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 zooey.backup folder from step 4 above.)

Content: Demo

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.

Complete page patterns

+ → Patterns → select "Pages" category → choose pattern

Use block patterns from dedicated "Pages" category to create whole page content easily at once:

  1. On page/post edit screen (in block editor) click the block inserter button (the + button in the upper left corner of editor).

  2. 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.)

  3. Choose "Pages" category and select a content you want to insert into your page/post content.

    Illustrative image. May not represent this actual theme.
  4. Edit the inserted content to your needs, and set up recommended page template.

    Illustrative image. May not represent this actual theme.

    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.

    Illustrative image. May not represent this actual theme.

Content: Pages

Setting Up Home and Blog Page

  1. Navigate to Appearance → Customize → Homepage Settings (or you can also do this at Settings → Reading).

  2. For "Your homepage displays" option set "A static page".

  3. Select your homepage and posts page from the dropdown lists. Posts page becomes your blog page.

Templates

Tip: Edit templates

If needed, you can modify all of these templates in site editor.

Zooey theme supports WordPress page/post templates functionality and contains selection of predefined templates for you (see the list below).

Setting up template in editor
Setting up template in editor
Illustrative image. May not represent this actual theme.
"Content only"

Displays only page content and so it's best suited for creating landing pages, or used for a "Coming soon" 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.

"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.

It works with "Page" and "Post" post types.

Tip: Sidebar Block

If you want to display classic widgets in the sidebar, try Sidebar Block plugin.

Page Excerpt

The theme adds support for excerpts also to WordPress pages. This functionality basically matches the post excerpt → check more info about excerpts.

Content: Posts

Excerpt

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.

Adding/editing excerpt field
Adding/editing excerpt field

Archive Page Title

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.

Featured Posts

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
Blog page displaying large "Featured posts" section

You can set featured posts tag in Appearance → Customize → Theme Options → Posts, or have complete control modifying "Posts list: Featured posts" template part in site editor.

Blog Layout

In Appearance → Customize → Theme Options → Posts you can choose between two predefined blog page layouts:

  • List of posts with sidebar. (This is default layout.) → Preview
  • Posts in 2 columns with no sidebar. → Preview
Preview of blog layouts (posts list with sidebar, posts list in 2 columns)
Preview of blog layouts (posts list with sidebar, posts list in 2 columns)

Alternatively, create completely custom layout modifying "Template content: Blog" template part in site editor.

Content: Block Editor

Zooey 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.

Info: Available blocks

Visit WordPress blocks list for information on available blocks and how to set them up.

Block Patterns

+ → Patterns → select category → choose pattern

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
Adding a block pattern into page/post content
Illustrative image. May not represent this actual theme.
  1. On page/post edit screen (in block editor) click the block inserter button (the + button in the upper left corner of editor).
  2. 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.)
  3. Choose a pattern category.
  4. Select a pattern you want to insert into your page/post content.
  5. 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.

Tip: Full page patterns

Use block patterns from dedicated "Pages" category to create whole page content easily at once.

Tip: Tutorials

If you are new to block patterns you can check out tutorials at Learn WordPress website for useful info.

Additional tutorial can be found at WordPress.com website.

Tip: More patterns

You can get more block patterns at official WordPress pattern directory. (Get free patterns I provided for you.)

Block Styles

With Zooey you can change block appearance with ease. Simply choose a preferred predefined style from block settings and you are done.

Applying block styles

select block → styles tab → select style
Applying a block style
Applying a block style
Illustrative image. May not represent this actual theme.
  1. Click the block in page/post content.
  2. If block settings sidebar is not displayed, click the settings button in the upper right corner of the editor.
  3. Make sure you are editing the block settings (choose "Block" tab).
  4. In block settings click the styles tab.
  5. 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.)

Tip: Additional block styles

Use free Abs – Additional block styles plugin for additional creative block styles.

Customization: Site Editor

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.

Modify theme colors and layout widths, reusable template parts, or whole templates.

Editing header in site editor
Editing header in site editor
Illustrative image. May not represent this actual theme.

Tip: Info & Tutorials

Find out more about Site Editor and learn how to use it in tutorial videos available directly at WordPress website.

Info: Hybrid theme mode

Zooey 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.

How to disable site editor →

Editing theme styles

Appearance → Editor → Styles → Edit styles

"Styles" section of site editor allows you to change theme colors and layout widths.

Typography ↓Colors ↓Layout ↓Others ↓

Info: Section colors

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).

  1. Open site editor navigating to Appearance → Editor.

    Illustrative image. May not represent this actual theme.
  2. In site editor open "Styles" management.

    Illustrative image. May not represent this actual theme.
  3. 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.

    Illustrative image. May not represent this actual theme.
  4. For better preview of your styling changes affecting various website elements click the style book button.

    Using helpful style book
    Using helpful style book

    Typography

    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).

    Colors

    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.

    Info: Link & element colors

    Editing global styles Colors section also allows you to set colors for "Text", "Background", "Link", "Captions", "Button" and "Heading" elements.

    Please note this is not advisable for this theme. Instead, change the theme color palette accordingly - check the colors information below.

    Actually, the only "safe", usable option from elements colors setup group is the "Link" color setup. If needed, you can tweak that one to your needs.

    Theme color palette description:
    • "Base" color is used as website background color.
    • "Base alternative" color is another base (background) color you can use on your website to separate sections of a page, for example. It is used by the theme only in predefined patterns.
    • "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 and buttons. Set this for an appropriate contrast against "Base" color. This color is also used in theme's default decorative images.
    • "Primary mixed" color is a subtle or contrasting version of "Primary" color. By default it was set as a blend of "Base" and "Primary" color. It is used by the theme only in predefined patterns. It is helpful as a subtle background for various sections and elements.
    • "Secondary" color is another accent color. It is used by the theme in predefined patterns and template parts. Set this according your preference. This color is also used in theme's default decorative images.
    • "Secondary mixed" color is a subtle or contrasting version of "Secondary" color. By default it was set as a blend of "Base" and "Secondary" color. It is used by the theme predefined patterns and template parts. It is helpful as a subtle background for various sections and elements.

    Important: Gradients

    Modifying theme palette colors 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).

    You can tweak the automatically generated gradients options in Appearance → Customize → Theme Options → Colors & Background → Gradients section.

    Editing theme colors
    Editing theme colors
    Illustrative image. May not represent this actual theme.

    Tip: Editing tips

    To see the color names, click the "Color options" button (1) and select "Show details" (2).

    Illustrative image. May not represent this actual theme.

    If you want to revert your color changes, click the "Color options" button (3) and select "Reset colors" (4).

    Layout

    In "Layout" section it is recommended to tweak content and wide width if needed.

    Other layout options are set for the best responsiveness across multiple devices. It is not recommended to modify them in this theme.

    Modifying layout widths
    Modifying layout widths
    Illustrative image. May not represent this actual theme.

    Others

    Additionally, you can tweak styles for each block individually. You can modify the default appearance of any block to your needs.

    There is also an option to add your own (and modify the theme provided) CSS styles code.

Editing template parts

Important: Global changes

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.

  1. Open site editor navigating to Appearance → Editor.

    Illustrative image. May not represent this actual theme.
  2. In site editor open "Patterns" management.

    Illustrative image. May not represent this actual theme.
  3. Now click "Manage all template parts" in patterns manager.

  4. Click a template part name from the list to edit its content.

    List of all available theme, plugin and custom template parts
    List of all available theme, plugin and custom template parts

Editing templates

Important: Edit template parts instead

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.

If you need to modify existing theme templates or create new custom page/post templates, you can do so in "Templates" section of site editor:

  1. Open site editor navigating to Appearance → Editor.

    Illustrative image. May not represent this actual theme.
  2. In site editor open "Templates" management.

    Illustrative image. May not represent this actual theme.
  3. Now click "Manage all templates" in templates manager.

    Illustrative image. May not represent this actual theme.
  4. Click a template name from the list of all available templates to edit its content.

    Click the Add New Template button to create a new template or custom template.

    List of all available theme, plugin and custom templates
    List of all available theme, plugin and custom templates

Editing navigation

For thorough information about editing navigational menus see Menus & Navigation section.

Customization: Menus & Navigation

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.

Editing main navigation

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
  1. Open site editor navigating to Appearance → Editor.

    Illustrative image. May not represent this actual theme.
  2. In site editor open "Patterns" management.

    Illustrative image. May not represent this actual theme.
  3. Now click "Manage all template parts" in patterns manager.

  4. Click "Header" from the list of all available template parts to edit its content.

  5. 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.

Mobile menu

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
Enabling mobile navigation for Navigation block
Illustrative image. May not represent this actual theme.

Different mobile and desktop menu

Alternatively, in case you need to provide a different menu for small (mobile phone) and large (laptop, desktop) screens, Zooey theme has a solution:

  1. Insert 2 Navigation blocks into your site "Header" template part.
  2. 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.
  3. 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.

Fixed position of mobile menu toggle button
Fixed position of mobile menu toggle button

Megamenu

With built in simple megamenu functionality you can display child menu (sub-menu) items in columns.

Megamenu example preview
Megamenu example preview

Use a dedicated "Megamenu" block style on a Submenu block:

Applying "Megamenu" block style
Applying "Megamenu" block style
Illustrative image. May not represent this actual theme.

Important: Create nested menus first

Before proceeding, make sure to create a nested menu (submenu) in your navigation block.

  1. Select a top level parent menu item (the Submenu block) where you want to enable megamenu functionality.
  2. If block settings sidebar is not displayed, click the settings button in the upper right corner of the editor.
  3. Make sure you are editing the block settings (choose "Block" tab).
  4. In block settings click the styles tab.
  5. 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.

Menu item image

If you want to display an image in the menu item (useful in megamenu), insert it as an inline image into the menu item label, and set "Is image" block style for the menu item:

  1. Select the menu item where you want to insert an image.
  2. Optionally set the menu item label text, and (re)set the cursor to the beginning of the label text input field.
  3. Click the "More" dropdown button from the block toolbar options and select "Inline image".

    Inserting inline image into menu item
    Inserting inline image into menu item
  4. Choose the image to insert into the menu item.
  5. Apply the "Is image" block style onto the menu item. It will adapt the image width in the menu and will properly style the menu label text.

    Applying "Is image" menu item block style
    Applying "Is image" menu item block style

Customization: Theme Options

Even though this theme allows you to edit your site fully, including theme templates, you can still use WordPress Customizer ( Appearance → Customize) where you'll find additional advanced theme options such as harmonious typography, or website background image setup.

"Styles" section in site editor

If you are looking for options to modify colors or layout widths, these can be found in "Styles" section of full site editor.

Warning: Make sure site editor is enabled

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.

Website background image

Appearance → Customize → Theme Options → Colors & Background

You can set up global website background image in Appearance → Customize → Theme Options → Colors & Background (or Appearance → Background). Tips:

  • Use semi-transparent background image over the "Base" color to create interesting website backgrounds.
  • Use repeating pattern images (such as subtle patterns, or hero patterns).

Important: Always set "Base" color

Don't forget to always set the website background color (the "Base" color) depending on your background image and your needs.

Header images (decorative images)

Appearance → Customize → Header Image Appearance → Header

The theme displays a decorative image in site header and footer. It is also used in block patterns. By default this image is set to theme's "Fingers" dynamic colors SVG image. You can change it to custom image or choose from other theme predefined images (check out theme demo example).

Preview of decorative image
Preview of decorative image

Tip: Remove header images

To disable the header image go to 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.)

Tip: Use in Image block

If you want to use header image(s) in block editor, set "Use header image" or "Use header image (flipped)" block style for the Image block.

Harmonious typography

Appearance → Customize → Theme Options → Typography

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. Zooey 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.

Disabling full site editing

Warning: For developers only

Use this option only if you really need to, and you are familiar with PHP coding. It is advisable to use full site editing whenever possible.

In some cases your plugin may not be compatible with WordPress full site editing. Disabling site editor may help.

Appearance → Customize → Theme Options → Layout → Site Editing

Zooey 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 Zooey 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.

Zooey is a unique block theme which can be switched to classic/hybrid theme by disabling full site editing.

Localization

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.

The theme also supports RTL languages.

To enable your language in the WordPress website, please switch WordPress into the desired language localization.

Tip: Adding languages into WordPress

Check out tutorial on how to install WordPress in your language.

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.

How to Translate a Theme

Method 1: Using Poedit software

  1. Make a copy of the original zooey/languages/zooey.pot file.

  2. 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 zooey-en_GB.po.

  3. Use Poedit to translate the file and export (save) translation in "mo" file format.

  4. Upload translated zooey-en_GB.mo and zooey-en_GB.po file into your WordPress languages directory, into themes folder (such as /wp-content/languages/themes/zooey-en_GB.mo (if the themes folder does not exist in your WordPress languages directory, create it).

  5. 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/.

  6. Using WPCLI run this command to create the JSON file(s): wp i18n make-json zooey-en_GB.po --no-purge.

  7. If the zooey-en_GB.po file contains JavaScript translation strings, WPCLI should create zooey-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/zooey/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

Please make your translations available for everyone by submitting them to WordPress translations repository. Thank you!

Accessibility

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, Zooey 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:

Focus on Readability

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.

Headings Hierarchy

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.

Plugins

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.

Useful Plugins

With this theme you can use whatever plugins you like (check out compatibility info above). Here is a selection of some useful plugins:

Advanced Custom Fields (ACF)
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.
Archive Title
Removes archive page title labels.
Block Editor For WooCommerce
If using WooCommerce, this plugin allows you to create product description content with block editor.
Block Visibility
Allows controlling visibility of WordPress blocks.
Breadcrumbs NavXT
Create a perfect SEO friendly and flexible breadcrumbs navigation.
Classic Menu in Navigation Block
Allows displaying classic menus in Navigation block. Useful when building multilingual website with block theme.
Custom Post Type Editor
Allows you to rename any post type.
Disable Comments
Disables comments site-wide per post type.
Dynamic Year Block
Display a copyright notice in your footer with the current year.
Icon Block
Allows you to add custom SVG icons and graphics to the WordPress block editor.
Imsanity
Automatically downsizes huge images during upload.
Intuitive Custom Post Order
For easier posts (and other post types) order management.
iThemes Security
Enhances your website security.
Meta Field Block
Display a meta field as a block on the front-end, supporting ACF fields.
Nested Pages
Provides drag and drop interface for managing pages and posts.
Ninja Forms
For creating forms.
Page Links To
Allows you to redirect a post or a page to a custom URL.
Polylang
Easy to use plugin for creating multilingual websites.
Post Type Archive Descriptions
Manages description (displayed on archive pages) for any post type.
Rename Taxonomies
Allows to rename taxonomies, such as "Tags" to "Topics", for example.
Social Sharing Block
Allows you to add social share icons to your website..
WPCode
Insert custom code snippets to your site.
WS Form
For creating mobile friendly, accessible forms.

FAQ & Tips

  1. How to use a page builder
  2. Why are uploaded images blurry or small
  3. How to modify element appearance
  4. SEO - Search Engine Optimization
  5. How to speed up a website
  6. How to add custom CSS
  7. How to set up custom fonts
  8. How to remove gap between sections/elements
  9. How to set decorative image
  10. How to set sticky header
  11. How to set progress bar value (width)
  12. Block spacing "Content padding" value
  1. How to use a page builder

    Zooey theme automatically recognizes 2 of the most popular page builders: Beaver Builder and Elementor. However, this only works in hybrid mode, when site editor is disabled.

    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.

    ↑ Back to questions list

  2. Why are uploaded images blurry or small

    Settings → Media → "Recommended image sizes" info

    The theme requires certain minimal image dimensions for optimal display. Info about recommended image size setup can be found at Settings → Media.

    Tip: Regenerate images

    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.

    Tip: File size optimization

    It is recommended to use an image optimization plugin to keep the file size of images uploaded to your server under control.

    ↑ Back to questions list

  3. How to modify element appearance

    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.

    Adding custom CSS class onto a block
    Adding custom CSS class onto a block

    ↑ Back to questions list

  4. SEO - Search Engine Optimization

    This theme is coded semantically, with the best SEO practices in mind.

    You can push your SEO performance even further with help of additional plugins such as Yoast SEO. You can also integrate support for microformats.

    ↑ Back to questions list

  5. How to speed up a 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.

    Check out Siteground (a very good personal experience), or have a look at WordPress hosting recommendation page.

    Optimize your images, video and audio files

    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.

    Also consider using a CDN service.

    Enable caching

    A basic browser caching and GZIP compression is a must!

    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.

    ↑ Back to questions list

  6. How to add custom CSS

    Appearance → Customize → Additional CSS

    Add your custom CSS code into Appearance → Customize → Additional CSS, or alternatively into your child theme's style.css file.

    You can also tweak theme provided CSS and add your own custom CSS code in "Styles" section of site editor.

    ↑ Back to questions list

  7. How to set up custom fonts

    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:

    1. 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.

    2. Disable Appearance → Customize → Theme Options → Typography → "Enable theme Google Fonts loading" option.

    3. 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.)

    ↑ Back to questions list

  8. How to remove gap between sections/elements

    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:

    Setting block top margin to zero
    Setting block top margin to zero
    Illustrative image. May not represent this actual theme.

    ↑ Back to questions list

  9. How to set decorative image

    The theme displays a decorative image in site header and footer. It is also used in block patterns.

    By default this image is set to theme's "Fingers" dynamic colors SVG image. You can change it to custom image or choose from other theme predefined images (check out theme demo example).

    The image is taken from custom header images.

    Preview of decorative image
    Preview of decorative image

    Alternatively, you can simply change it in template parts where it is used. (As this would be more tedious work, we recommend setting up custom header instead.)

    ↑ Back to questions list

  10. If you need to display the site header on top of the browser window (viewport) even when user scrolls the page, try one of these options:

    Set position option on "Header" template part

    Important: Only works in full site editing mode

    This solution only works when Site Editor is enabled so you can edit templates.

    Set "Sticky" position to all "Header" Template Part blocks in templates. This is a tedious task as you need to edit all (most) of the templates.

    Setting sticky header position in Site Editor
    Setting sticky header position in Site Editor
    Illustrative image. May not represent this actual theme.

    Use a plugin

    Use a plugin to set sticky position on elements, such as Sticky Menu & Sticky Header plugin. This option can be very flexible approach providing conditional control over header sticky positioning (depending on the plugin capabilities).

    Tip: Set up the plugin

    For setting up sticky header using a plugin use #masthead in plugin options as (theme default) site header selector.

    Alternatively use browser code inspector to determine the selector for your desired sticky element. Or check your plugin documentation for tips.

    Use custom CSS code

    You can even set the sticky positioning using a custom CSS code, such as:

    #masthead {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0);
    }

    ↑ Back to questions list

  11. How to set progress bar value (width)

    "Progress bar" block pattern consists of multiple nested blocks and it may be difficult to find out how to change the value and width of the progress bar. Here are instructions to do so:

    1. Insert "Progress bar" block pattern into page/post content.

      Insert "Progress bar" block pattern
      Insert "Progress bar" block pattern
      Illustrative image. May not represent this actual theme.
    2. Click on the text value of the progress bar (Paragraph block with 65% text by default) and change the number to desired value.
    3. Then select the parent Row block and in block options change the width to your desired value.

      Setting up progress bar width
      Setting up progress bar width
      Illustrative image. May not represent this actual theme.

    ↑ Back to questions list

  12. Block spacing "Content padding" value

    Zooey 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
    Example of automatic mitigation for "Content padding" spacing option
    Illustrative image. May not represent this actual theme.

    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.

    ↑ Back to questions list

Modifications

Warning: Limited support

This topic is meant for WordPress developers who would like to modify the theme and WordPress functionality.

Please understand that we do not provide support for custom code modifications, though.

Use a Child Theme/Plugin

Tip: Use plugin with block theme

With block theme it is recommended to use a plugin instead of a child theme. Especially when you've already made changes to theme template parts and templates.

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) Zooey theme without worrying about your custom code getting overwritten and lost. Your code is kept safe in your child theme/plugin.

Tip: Read more about child themes in WordPress documentation.

CSS code

Put your custom CSS code into style.css file.
You can also tweak theme provided CSS and add your own custom CSS code in "Styles" section of site editor.

PHP code

Modify functionality of the theme and/or WordPress via functions.php file. Use action and filter hooks.

"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:

Sample child theme/plugin

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.

Hooks: Actions and Filters

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.

Zooey 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.)

Tip: Use hooks in block theme

If you need to keep using action hooks in block theme templates, try free Action Hook Block plugin that provides a block triggering a specific action hook.