Block Theme Documentation

Create and customize your website using the WordPress block editor

Table of Contents:

1

Instalallation

↑ top

Installing your theme is easy! After downloading you should have a theme-name.zip file.

WordPress Method

  1. Go to Appearance » Themes in the WordPress Dashboard and click on the “Add New” button
  2. Click on the “Upload link”, select the short-news-pro.zip file and click “Install Now”
  3. Activate the theme

Ftp Method

  1. Log into your site via FTP
  2. Browse to your folder located at wp-content/themes
  3. Unzip the theme-name.zip folder and upload the folder to your server
  4. Log In to WordPress and go to Appearance » Themes
  5. Find the theme and click to activate

2

Automatic Update

↑ top

If your theme is out of date, you will see a notice on your WordPress Dashboard. You’ll be able to update your theme using the traditional WordPress update tools.
You will get update notifications only if you have an active Theme License. Here you find Theme License Faq.

3

Manual Update

↑ top

There are a few different ways to manually update your theme. We recommend using a child theme if you are going to customize your theme files, as this simplifies updating your parent theme.

Download latest version

Sign in to our website and download the latest version of your theme.
If you don’t have an account, you can create a new one with the email that was used to purchase the theme.

Upload the new version

The easiest way to manually update your theme is to upload it via the WP dashboard.
However, if you try to upload a new version of a theme that is already in your site’s themes directory, you will get an error.
The reason is that you already have a theme folder on your server with the same name as the folder inside your ZIP file.
You can do one of the following:

1. Delete the theme on your server

  • Go to Appearance » Themes
  • Activate one of the default WordPress.org themes
  • Delete the old theme (Make sure you make a backup just in case something goes wrong)
  • Upload new version via Appearance » Themes » Install Themes » Upload
  • Activate the new version

If you have done any customizations to your theme files, these customizations will be lost if you use this method.

2. Rename the folder (via FTP)

  • Log in to your site via FTP or cPanel
  • Navigate to wp-content/themes/ and find your old theme
  • Rename your old theme something like “theme-old” (replacing “theme” with the name of your theme).
  • Upload your new theme folder

The old and new versions of the theme will both appear in the themes interface, but you will be able to distinguish them by their folder names and version numbers.

4

Pages

↑ top

Edit the content of specific site pages using one of the following options:

Through your WordPress.com dashboard:

  1. Start from your site’s dashboard
  2. Click on “Pages“
  3. Either click the “Add new page” button or click on the title of an existing page you want to edit

Or through the Site Editor:

  1. Start from your site’s dashboard
  2. Navigate to Appearance » Editor » Pages
  3. Either click the “Add New Page” button to create a new page or click a page name and click the pencil icon to edit an existing page

5

Posts

↑ top

To write new posts and edit existing posts on your blog, follow these steps:

  1. Start from your site’s dashboard
  2. Click on “Posts“
  3. Either click the “Add new post” button or click on the title of an existing post you want to edit

6

Theme customization

↑ top

To edit your website’s overall structure, navigate to Appearance » Editor

Here, you can edit your site’s logo, header, footer, menus, styles, and templates (which control the layout used by pages and posts).

Edit the Header

↑ top

The header is the top part of a website that typically shows the site title, a logo, and a navigation menu.
The header is a template part. Once you edit this template part, the changes will apply to all pages of your site where this header is shown.

You can customize your header using the following steps:

  1. Visit your WordPress dashboard
  2. Navigate to Appearance » Editor to open the Site Editor
  3. Click Patterns to view all of your site’s template parts
  4. Under the “All template parts” section, select the Header section to see all of the template parts categorized as a header
  5. Select the Header template part that you want to edit
  6. Click the preview of the Header template part to close the left sidebar and open the editing interface

The footer is the bottom part of a website that typically shows the site title, credits, social links and a navigation menu.

The footer, like the header, is a template part. Once you edit this template part, the changes will apply to all pages of your site where this header is shown.

You can customize your header using the following steps:

  1. Visit your WordPress dashboard
  2. Navigate to Appearance » Editor to open the Site Editor
  3. Click Patterns to view all of your site’s template parts
  4. Under the “All template parts” section, select the Footer section to see all of the template parts categorized as a footer
  5. Select the Footer template part that you want to edit
  6. Click the preview of the Footer template part to close the left sidebar and open the editing interface

To add a logo to your site using the Site Editor, follow these steps:

  1. Visit your site’s dashboard.
  2. Navigate to Appearance » Editor to open the Site Editor
  3. Click Patterns to view all of your site’s template parts
  4. Scroll down below the list of pattern categories to the “Template Parts” section and select the Header template part
  5. Select the Header template part that you want to edit. (Your theme may include multiple variations of your header to choose from here)
  6. Click the preview of the Header template part to close the left sidebar and open the editing interface
  7. In the Header template part editor, select the Site Logo block (usually, in the Header of our themes there is a Site Logo block) or click the + block inserter to add the Site Logo block
  8. Click the upload icon in the Site Logo block to add your logo.
  9. Make any adjustments to the size and position of the logo
  10. Click the “Save” button to publish your changes

Please see this detailed guide on using the Site Logo block.

Edit Your Site Title

↑ top

The Site Title, along with the Site Tagline, defines your website’s identity in search engines and social networks.
You can change the site title at any time using the following steps:

  1. Visit your WordPress dashboard
  2. Navigate to General » Settings
  3. Replace the text in the “Site title” field with your new title
  4. Click the “Save settings” button

Navigation Menu

↑ top

You can view, manage, and modify your menus using the Site Editor Navigation, without having to find them in a specific template in the site editor. If your site has several menus, they will all be listed together and you will be able to edit them from there.

  1. Visit your WordPress dashboard
  2. Navigate to Appearance » Editor » Navigation. You will see all your menus listed there
  3. Once you select an individual menu, you will be able to edit it. Please see this detailed guide to edit your site’s menus via the Site Editor

Add a Navigation Block

Usually, a Navigation block is added to a site’s templates, most commonly through the Header or Footer template part.
The Navigation Block allows you to edit the structure and design of your site’s navigation menu.

  1. Visit your site’s dashboard
  2. Navigate to Appearance » Editor
  3. Select the Template or Template Part you want the navigation menu to appear
  4. Click the + Block Inserter icon
  5. Use the search field in the block inserter to search for “navigation”
  6. Click the Navigation block to add the block to your site

When you first add the Navigation block and don’t have an existing menu, it will contain the Page List block. By default, the Page List block displays all your site’s published pages, and new pages are added automatically.

Once the Navigation block is added to your header or footer, you can customize it following this detailed guide on using the Navigation block.

Customize colors and fonts

↑ top

Styles (in the Site editor) is a new feature that allows you to customize the look of your site with different colors, typography settings, and layout options. This guide will show you how to use Styles to give your website a consistent look.

To access Styles Settings:

  1. Visit your site’s dashboard
  2. Go to Appearance » Editor
  3. Select Styles from the left-side menu
  4. Click the pencil icon to then open the full Styles settings

In the Styles settings, you will see the following options:

  • Browse styles (on some themes only)
  • Typography
  • Colors
  • Layout

Colors

  • Click Colors to open the Color panel. At the top, you will find the color palette used by your active theme. You will also find the list of elements whose default global color can be customized through the Color settings panel
  • Click Palette to open the Palettes panel. Here you can set the color options available by default

Typography

  • Click Typography to open the Typography panel. Select the element you want to customize and it will open up the Typography panel for that element
  • You can change the typography settings including font type, font size, appearance, and line height

For more information, please follow this detailed guide on using Styles.

Add custom fonts

↑ top

WordPress 6.5 ships with the Font Library, a feature that allows you to manage your fonts directly from the Site Editor.

  1. Visit your site’s dashboard
  2. Go to Appearance » Editor
  3. Select Styles from the left-side menu
  4. Click the pencil icon to then open the full Styles settings
  5. Click Typography to open the Typography panel. You should see a settings icon, which has a tooltip of Manage fonts

Click the Manage fonts button, a new Fonts modal will appear that shows a few tabs.

The three tabs shown are:

  • Library: This will display all of the fonts from your theme and those installed via the Font Library
  • Upload: Allows you to upload font files directly from your computer
  • Google Fonts: This is the default font collection that ships with WordPress, letting you install any Google Font

When you select a font from the Google Fonts collection, a new panel appears that allows you to install variants of the font you want for your website.

Templates

↑ top

A template controls the layout and structure of posts, pages, or specific page types on your site.

The most common templates are listed below:

  • Home template: to display the site’s home page if your site is set up to display the latest posts on the home page
  • Index template: When a Home template is absent, some themes use the index template as the default home page
  • Page template: Controls the layout of standard pages of your site, such as an About or Contact page
  • Single template: This template styles your individual blog posts
  • Archive template: This is the design for category pages, tag pages, and other archive pages

How to access templates

  1. Visit your site’s dashboard
  2. Navigate to Appearance » Editor
  3. Click on the “Templates” option.
  4. Select “All templates” to see a full list of your site’s templates with descriptions of their purpose.

Customize Page Templates

↑ top

The template controls how the page is displayed. You can identify the template a page is using by following these steps:

  1. In your site’s dashboard, click Pages.
  2. Click a page’s name to open that page in the editor.
  3. In the Page settings sidebar on the right, under Summary, locate the Template option. (If you do not have the sidebar on the right, click the Settings icon in the top right corner to bring up the settings. This icon looks like a square with two uneven columns)
  4. Note the name of the template the page is using
  5. Under the Summary section, click the name of the template. A popup will appear.
  6. To change template, click on “Swap template“

Our block themes come with a “Blank Template” that displays only the Page content, and a “Blank Template with Header/Footer” template that displays Header, Page content and Footer without Page title.

Edit the Default Homepage

↑ top

The default homepage is the homepage design that comes with your site’s theme. This guide will show you how to find and edit the content and design of the home page.

To find and edit the default homepage:

  1. Visit your site’s dashboard.
  2. Click on Appearance » Editor
  3. Click anywhere on your site on the right side to open the editor and close the left sidebar
  4. You are now viewing the homepage template, which may be labeled as Home, Index, or Front Page at the top of the screen:

First, it’s helpful to understand the overall layout of your site’s homepage template. To see this, open List View by clicking the icon at the top left of the screen that looks like three horizontal lines above each other:

Here, you’ll see all of the elements (known in the WordPress editor as blocks) of your homepage. A typical default homepage template will contain the following elements:

  • Header: The header contains elements such as a site title, logo, and menu.The header is a template part that appears across the entire site. Therefore, any edits to this header will apply to all pages on your site where the header template part is inserted.
  • Content: Everything between the header and the footer is the main content of your homepage. You will likely see text and images, organized into Groups, Columns, and more. If your theme displays blog posts on the homepage, you will likely find a Query Loop block here too.
  • Footer: The footer contains elements like a site title, contact information, and credits. The footer is a template part that appears on every page. Therefore, any edits you make to this footer will apply everywhere on your site where the footer template part is inserted.

How to add your content

  • To change any text, click on and type the new text you want to show
  • To change any image, click on and click Replace in the toolbar displayed above the block

Set a Static Homepage

↑ top

A homepage is the front page of your website. By following the steps in this guide, you can control which page your visitors see first when they visit your site.

  1. Visit your site’s dashboard
  2. Navigate to Settings » Reading in the sidebar
  3. Locate the “Your homepage displays” setting at the top of the screen
  4. Choose “A static page” option (Select a custom home page that you have created, as well as a separate page to display blog posts. Only published pages (not drafts) will appear in these drop-down lists.)
  5. Click the “Save Changes” button to save

Use Pre-Made Page Layouts

↑ top

Page layouts are pre-designed pages with placeholder content that you can replace with your own text or images. This guide will show you how to make use of page layouts to easily publish beautifully designed pages on your website.

To view the collection of page layouts you can use on your site, follow these steps:

  1. From your site’s dashboard, click on Pages
  2. Click on “Add new page“
  3. A window will appear for you to browse through the different Page Layouts, such as About, Portfolio, Services, Contact, Blog, Store, and more (depending on the theme in use)
  4. Once you find a layout that you like, click it once to apply it to your new page

Alternatively, you can insert a Page layout from the Patterns tab:

  1. Visit your site’s dashboard
  2. Go to Pages or Posts and click any page or post to edit it
  3. In the editing screen, click the + Block Inserter in the top left corner
  4. Click on the Patterns tab
  5. Browse through the patterns. Click on “Design Lab Page Layouts” to view our collections of Page Layouts
  6. Once you find a layout that you like, click it once, and it will be added to your page at the location of your cursor

The most common Page layouts are (depending on the theme in use):

  • Homepage
  • About page
  • Services page
  • Contact page
  • Portfolio page
  • Blog page
  • Store page

How to add your content

  • To change any text, click on and type the new text you want to show
  • To change any image, click on and click Replace in the toolbar displayed above the block

Patterns

↑ top

Block Patterns are a collection of predefined blocks that you can insert into pages and posts and then customize with your own content. Using blocks and patterns, you can quickly build a beautiful website without using a page builder.

To browse the block patterns available and add them to a page, take these steps:

  1. Visit your site’s dashboard
  2. Go to Pages or Posts and click any page or post to edit it
  3. In the editing screen, click the + Block Inserter in the top left corner
  4. Click on the Patterns tab
  5. Browse through the patterns. You can click to view collections of patterns within a specific category like Text, Gallery, Header, Forms, and many more. You can find our collections of patterns under the “Design Lab Patterns” tab.
  6. Click on any pattern once, and it will be added to your page at the location of your cursor
  7. To change any text, click on and type the new text you want to show
  8. To change any image, click on and click Replace in the toolbar displayed above the block

Please follow this detailed guide on using Block Patterns.

Blocks are the components for adding content in the new WordPress block editor. There are several blocks available within WordPress that you can easily add to your post or page. Please visit this page for a complete list of blocks.