back to Themify.me

Starter Guide

Themify Flow is a framework which allows you to build and customize themes for your WordPress sites. This starter guide will give you a quick walk-through from installation to basic template editing and styling.

Installation

NOTE: Before you start, make sure you have a copy of WordPress 4.1+ installed on your server. You can not install themes or plugins on the accounts hosted at WordPress.com.

Installing Themify Flow is exactly the same as installing any WordPress theme.

To install Flow:

  • Go to WP-admin > Appearance > Themes > Add New > Upload Theme
  • Upload the themifyflow.zip and activate the theme
  • That’s it!

screenshot

Common installation error: if you get "upload_max_filesize" error, this means your host/server has limit file upload size. You can either request your host provider to increase file upload size or install the theme with FTP method.

WordPress Dashboard

After you activated Themify Flow theme, it will redirect to the welcome screen. Under the "Themify Flow" sidebar menu, you should see the following links:

  • Settings = In Settings, you can insert favicon, header & footer code, specify Google Fonts, search settings, feed settings, etc.
  • Flow Themes = Flow theme is the overall appearance of your site which consists of templates and styling.
  • Flow Templates = Template is the layout which controls how the page will display.
  • Flow Template Parts = Template Parts are the global layout parts assigned in templates such as Header, Sidebar, and Footer.
  • Global Styling = Will take you to the frontend Styling Panel which allows you style the global elements such as body font, background, heading, form input, buttons, etc.
  • Custom CSS = Will take you to the frontend Custom CSS panel which allows you to write custom CSS (for advanced users with good knowledge of CSS coding).

screenshot

Let’s Begin: Edit In-use Template

In the following tutorial, we will show you how to edit template and template part on the frontend.

Step 1) Edit In-use Template:

  • Go to the homepage frontend (which is currently using the "Post Index" template)
  • Hover the Flow Menu > select "Edit In-use Template" (Flow Menu is the spinning color wheel at the top-left corner)

    screenshot
  • Once the template builder is ON, you should see some active modules on the layout and module panel at the bottom like the screenshot below:

    screenshot
    • Flow Menu = Flow menu is the spinning color wheel located on the frontend top right corner. It provides general action links such as edit in-use template, access template and part options, import/export, etc.
    • Module Panel = It is the panel at the bottom where you will find all available modules.
      • Modules = A module is an individual element that you can drop in the layout.
    • Row = Row of the layout.
      • Active Module = When a module is dropped in the layout, it will become an "active module".
      • Placeholder = Where you can drop modules into.
    • Template Part = Template part is a re-useable global layout part such as Header, Sidebar, and Footer.
    • Styling Panel = Styling Panel is used to customize the appearance of rows and modules (click on the ‘brush’ icon of the row or module to open Styling Panel).

Step 2) Edit the Header:

  • Double-click on the Header template part or click on the ‘pencil’ icon to edit it

    screenshot
  • On the Template Part edit lightbox:
    • You can drop modules to the layout to add more modules
    • Click the row "brush" icon to apply styling of the row
    • Click the module "brush" icon to apply styling of the module
    • On the Styling Panel, you can style different elements by clicking on the list in the top panel and then selecting the styling options in the bottom panel (read more about the Styling Panel).

      screenshot
  • When you are done editing the Header, click Save and it will return back to the "Post Index" template edit.

Step 3) Edit the Archive Post Module:

What is showing on the homepage is a list of all latest posts which is called in by the Archive Post module. In this step, we will show you how to edit the archive post layout and styling.

  • Double-click on the active Archive Post module to edit it
  • On the post layout builder, you can drag and drop modules around to arrange the post elements and layouts

    screenshot
  • When you are done editing the Archive Post layout, click Update to save and close the lightbox
  • On the active Archive Post, click the "brush" to bring up the Styling Panel. Again, you can style all post elements by selecting from the top panel.

    screenshot
  • When you are done, click Save and Close which will bring you back to the homepage. You should see the changes that you made instantly on the homepage.
  • If you click around to view other archive pages that have this "Post Index" template assigned (eg. check the category pages), you will see the same layout and styling.
  • Because the "Header" is a global template part, you will see the changes that you made in Header on every page.
  • So we’ve just showed you how to edit the "Post Index" template, now go challenge yourself by editing the "Post Single" template.

Templates

To view all templates: go back to WP-admin > Themify Flow > Templates. Note that Templates are associated with the active Flow theme. Once you switch Flow theme, the templates will change (read the Themes documentation for more info).

You should have the following default templates:

  • 404 = This template is used to display 404 error not found message.
  • Page = This template is used to display all Pages.
  • Search = This template is used to display search results.
  • Post Single = This template is used to display all Post single view.
  • Post Index = This template is used to display post archive views such as categories, tags, etc.

To edit Templates:

  • Hover over the template name on the list and click either:
    • Edit = edit in backend mode (read the Builder documentation for more info about the backend edit mode)
    • Edit on Frontend = edit the template using the frontend Builder

screenshot

Template Parts

Template Parts are the global layout parts assigned in templates such as the Header, Sidebar, and Footer. Picture template part as a library item or a PHP include file, editing it will apply to all instances.

To see all Template Parts: go to WP-admin > Themify Flow > Template Parts. You should have the following default template parts:

  • Header = Global header of the theme.
  • Sidebar = Main Sidebar of the theme. To add widgets in Main Sidebar, go to Apperance > Widgets.
  • Footer = Global footer of the theme.

To edit Template Parts along with Template:

  • Go to WP-admin > Themify Flow > Templates
  • Hover over the template name on the list and click "Edit on Frontend"
  • On frontend: double-click on the template part (note that template part has light-green overlay on hover) or click on the "pencil" icon

To edit Template Parts individually:

  • Go to WP-admin > Themify Flow > Template Parts
  • Hover over the template part name on the list and click either:
    • Edit = edit in backend mode
    • Edit on Frontend = edit the template using the frontend Builder

screenshot

Global Styling

Global Styling allows you to customize the general elements such as main body font, headings (h1-h6), form elements, etc.

To apply Global Styling:

  • Go to WP-admin > Themify Flow > Global Styling (you can also access Global Styling from the frontend Flow Menu)
  • On the Styling Panel, select the element from the top panel and then customize the styling properties in the bottom panel
  • You can toggle between the "Basic/All" tabs.
    • Basic = will basic styling properties (great for beginners)
    • All = will show all styling properties (might require some understanding of CSS)

screenshot

Themes

A Flow theme consists of: Templates, Template Parts, Global Styling, Custom CSS, and theme info such as theme name, description, author, version number. When you switch themes: the associated Templates, Template Parts, Global Styling, and Custom CSS will change as per the theme package. When you import/export Flow themes, these data will carry together.

screenshot

To export Flow themes:

  • Go to WP-admin > Themify Flow > Flow Themes
  • Click "Theme Details" of the theme that you want to export > click Export button (it will prompt to download a zip)

To import Flow themes as a new theme:

  • Go to WP-admin > Themify Flow > Flow Themes
  • Click "Add via Import"
  • NOTES:
    • You can not import theme that has the same name as the existing themes. Use "Replace" theme instead.
    • If you have a WordPress multisite and it gives file permission upload error. Go to Network Admin > Settings and add ‘zip’ in "Upload file types" option. This will allow you to upload zip files within WordPress.

To delete Flow themes:

  • Go to WP-admin > Themify Flow > Flow Themes
  • Click "Theme Details" of the theme that you want to delete > click "Delete" button
  • NOTE: You can not delete the active theme. If you want to delete the active theme: first activate another theme and then the "Delete" button will be available in the theme details panel.

To replace existing Flow themes:

  • Go to WP-admin > Themify Flow > Flow Themes
  • Click "Theme Details" of the theme that you want to replace > click "Replace" button and upload the theme zip file exported previously (this will overwrite all templates, template parts, and styling)

Settings

On the Settings page, you will find the following options:

  • Favicon = Insert the favicon image URL. Favicon format should be ico, jpg, or png. (this favicon will appear on the browser tab icon).
  • Header Code = If you need to insert additional Javascript or CSS files in the <head> wrap, insert them here.
  • Footer Code = The code will insert in before the closing </body> tag. Example usage: use this to paste in Google Analytics code).
  • Responsive Design = Check the checkbox to disable responsive design (once responsive is disabled, mobile devices will scale/zoom the page to fit in the screen).
  • Google Fonts = Choose to show recommended Google Fonts only or all fonts in the font list selector in Styling Panel. There are 600+ Google Fonts in the complete library. Showing all fonts will take longer to load the Styling Panel.

screenshot