Themelia

Welcome to Themelia, a meticulously crafted and balanced WordPress theme for personal and professional blogging. It is designed to cater to authors, freelancers, agencies and anyone else. Coded to perfection & built to last.

Themelia offers comprehensive support for popular plugins such as WooCommerce, Easy Digital Downloads, Jetpack modules (including the Contact form and Infinite Scroll), Contact Form 7, Gravity Forms, and many others, both free and premium. Additionally, Themelia provides custom theme settings through WordPress Customizer, enabling you to easily modify the theme’s layout, colors, Google Fonts, and much more. To ensure a harmonious typographic hierarchy, Themelia utilizes a Modular Scale approach. Moreover, our theme is HTML5 valid, optimized for speed, and designed with SEO best practices in mind.

Features

Responsive Layout, Classic Menu, Sticky Header, Mobile Menu, Social Menu, Breadcrumb Navigation, Featured Images, Theme Options, Custom Colors, Modular Scale Typography, Google Fonts, Post Formats, Accessibility Ready, Translation Friendly, Clean and commented code.

Theme Options

Theme options are based on the WordPress Customizer. The Customizer allows you to preview changes to your site before publishing them. To access the Customizer from the dashboard, you can go to Appearance → Customize.

Site Identity

  • Site Title and Description – change / show / hide title or description (or both)
  • Logo – Upload image for site logo
  • Site Icon (used as a browser and app icon)

Site Title and Header

  • Header Layout – Select layout for header elements (branding and main navigation). Stacked: left aligned, right aligned, centered. Inline: logo->menu, menu->logo.
  • Header Type – No Sticky (Normal Header), Sticky Header (Always stick your header to the top), Sticky Headroom (Hide your header until you need it)
  • Site Header Background (Background color for header area) and Site Header Separator (Thin border between Site Header and Content Area).
  • Site Title and Description – Color and Size for Site Title and Tagline (Site Description). This is shown according to settings in the Site Identity. Even hidden, Site Title and Tagline, will still remain visible for the search engines and screen readers.

Mobile Menu

  • Hamburger Menu Breakpoint – Move slider to the viewport width where you want the hamburger menu appear.
  • Header Stacked & Centered Breakpoint – If you do not want to use Hamburger Menu, you may set a breakpoint where the site title and the main menu will appear stacked and centered. This will work only if Hamburger Menu Breakpoint value is set to 0.

Main navigation

  • Main Navigation Typography – Select Font family, size and other attributes.
  • Main Navigation Colors – Colors for top level links and dropdowns.

Body Text and Links

  • Body Text (Base typography settings.) – Font Family, text and links color.
    Default Font Stack is: Roboto, Oxygen-Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  • Body Links – Colors for regular links.
  • Buttons Color – Colors for buttons.

Text Size – Modular Scale

Set different base font and different modular scale for Large screens (desktops), Medium screens (tablets and other medium size devices) and Small screens (smartphones and other small devices).
This theme provides four scales, Major Second, Minor Third, Major Third and Perfect Fourth.
Find more about the concept of modular scale, also check Modular Scale calculator and Type Scale.

Headings & Entry Titles

  • Color, weight, transform and letter spacing for entry titles and content headings.

Breadcrumbs & Secondary Text

  • Display Breadcrumbs – on/off
  • Secondary Text – Text size for breadcrumbs.
  • Secondary Text – Size and color for entry meta, date, time, Read More link.

Blog Settings

  • Excerpt or Full Post Content – Switch between displaying Excerpts or Full Content. Applies to the normal post format on the blog page, archives and search results.
    • Excerpts (Default): Use auto excerpt or manual excerpt. To manually add an excerpt to a post, simply write one in the Excerpt field under the post edit box. An excerpt can be as short or as long as you wish. When a post has no manual excerpt WordPress generates an excerpt automatically by selecting the first 55 words of the post.
    • Content: The full post content will be displayed, optionally you may use the More tag to create a teaser from the content that precedes the More tag.

Layout

  • Global Layout – (2 columns – sidebar / content, 2 columns – content / sidebar, 1 column content). You can override this per page/post basis.
  • Footer Widgets – Choose the number of widget columns in the footer widget area. Each column can have any number of widgets.

Background

  • Background Color – Pick body background color.
  • Background Image – Upload/Select body background image.

Secondary Colors

  • Colors for separators and horizontal lines

Menus

This panel allows you to manage Navigation Menus for the content you have already published on your site. With this feature, you can create menus and add items for existing content such as pages, posts, categories, tags, formats, or custom links. These menus can be displayed in designated locations defined by the theme or in widget areas by adding a “Custom Menu” widget.

This theme uses Navigation Menus wp_nav_menu() in three locations. Primary, Footer – Left and Footer – Right.

Locations:

  • Primary Placed in the top header. For the Main site navigation.
  • Footer – Left Placed in the left footer. This is a one level menu (no dropdowns)
  • Footer – Right – (optionally social menu) Placed in the right footer. You can use it as a regular menu or as a Social Links menu. Inputting a custom link to your social profile the menu item will automatically display an icon for that social network (icons are provided by Ionicons icon font). To hide textual part of the link and display only the icon, add “icon-only” class to each menu item. If you add “icon-only” class, text will be visually hidden, but still available for screen readers.

Widgets

Theme has five widget areas:

  • Primary sidebar – The main sidebar. It is displayed on either the left or right side of the page based on the chosen layout.
  • Subsidiary sidebar – A sidebar located in the upper footer of the site. Optimized for one wide widget (and multiples thereof).
  • Footer Widgets – An area optimized for one, two, three or four widgets (and multiples thereof). Each column can have any number of widgets.
  • Colophon sidebar – Widget added in this sidebar will replace default theme copyright line in the site footer. Optimized for one widget. Best use: Text Widget (or similar) with auto paragraph and without title.
  • Colophon Right sidebar – A widget area located in the bottom-right footer of the site. Optimized for one widget.

Static Front Page

This theme supports a static front page.

Installation

  1. In your admin panel, go to Appearance -> Themes and click the ‘Add New’ button.
  2. Type in Themelia in the search form and press the ‘Enter’ key on your keyboard.
  3. Click on the ‘Activate’ button to use your new theme right away.
  4. Navigate to Appearance > Customize in your admin panel and customize to taste.

Notes for developers

Unsemantic CSS Framework

  • Media queries breakpoints slightly modified
  • Grid container width and grid padding modified

Copyright and License

Themelia WordPress Theme, Copyright 2016 – 2020 Dario Devcic
Themelia is distributed under the terms of the GNU GPL

WordPress’s gem shines,
Themelia, blogging’s delight,
Crafted to excel.