Getting started
Thank you for purchasing Editium. We’ve put much love creating it and hope you’ll enjoy using it.
Installing Editium
Unzip the package you’ve downloaded from Themeforest, inside the newly created folder you will find a file named ‘editium.zip’, this is your theme package to use for WordPress theme install.
Go to your WordPress dashboard and click on Appearance > Themes.
Then, click on the « Add New » button as seen above.
You’ll be redirected to this screen:
Click on «Upload Theme» and choose the editium.zip file we talked about earlier, then click «Install Now» button.
Be patient during installation process and you’ll see the screen below:
Click on «Activate» to make your new theme active.
Recommended Plugins.
For the best experience using Editium we recommend to install the following plugins:
- PhotoSwipe light
- Contact Form 7
- Clear Floats Button
- WP Remove Category Base
PhotoSwipe.
PhotoSwipe is meant to add the great PhotoSwipe gallery library to your theme. It support touch gestures like drag or zoom in/out.
Contact Form 7.
Create awesome contact form, one of the most popular plugin, after Akismet of course.
Clear Floats Button.
TinyMCE plugin adding a button to the TinyMCE toolbar to add a separator under floating images. Indeed it is sometimes difficult to add a new line after such images. This ensure also that following paragraph or heading will not float where you don’t want.
WP Remove Category Url.
This plugin remove the prefix «category» from the URLs of your categories pages.
mysite.com/category/my_category becomes mysite.com/my_category
Installing a plugin.
It’s pretty easy! Go to Plugins > Add New:
Then type the name of the plugin in the search box and it will display a list of relevant ones (PhotoSwipe for example).
Click on the «Install Now» button on the right plugin. You will get asked for your FTP username and password:
After a while your plugin is installed and you can activate it right now or later from the installed plugins list.
Existing blog.
When installing Editium on an existing blog with content you might have to do additional tasks.
Images sizes.
Editium comes with the right images sizes for its design, but your existing images might not fit well because WordPress cropped them with sizes parameters for your old theme.
Fortunately there is a plugin for that: «Simple Image Sizes».
Install it as explained above and run it, without having made any change to parameters.
You find its settings under Settings > Media
Just click «Regenerate Thumbnails» and wait while processing, the plugin will display a progress bar and informs you about what image is being processed. You must have Editium activated before to run it.
It is better to disable the plugin after the process.
Featured images.
Editium is meant to be used with featured images on posts. Even if it works fine without, it’s better to set up one for each post. Watch out your «Read more» tags also as they can be to far in the content and then makes posts grid a bit odd.
PhotoSwipe Plugin
This plugin put an additional attribute on images tags inside your posts to be able to provide its amazing functionalities. Then you’ll have to save again all your posts before it works.
In this case, «bulk edit» operation on top of posts list can be helpful.
Child theme.
We cannot enough advise you to install the child theme as soon as you install the main theme. Even if you don’t plan to make advanced personalization., one day you’ll want to do so and then updating your Editium theme will become difficult and hazardous.
Editium comes with an already configured child theme in its package. We use it on the main demo page.
To install it you can proceed like for the main theme with the editium-child.zip file instead or edit files into the editium-child folder and upload it with your favorite FTP tool.
Whatever method you’ve use, you need to make some change to the child theme. Either before upload by FTP or after install by WordPress installation process using your FTP tool or whatever program you wish.
- Change the folder name to your desired theme name (the name of your site for example)
- Edit the style.css file accordingly as shown below
Do not change anything else to the header, except the author name or the description if you wish!!
You will write your custom CSS rules after that.
You should see now your installed child theme in Appearance > Themes
You can activate it now.
General Layout
This first page of settings allow you to setup options for the whole theme. Some options can be overridden on particular sections of the site, like categories.
You access to this page by going to Appearance > Theme Settings.
General
Some options are self explaining, but lets have a look to others ones.
Posts list layout when no sidebar:
Whether to display 3 columns instead of 2 when «no sidebar» option is activated. This has only sense when your grid setting display is «first card big» or «small cards» either on grid setting of home page or on a particular grid settings of category.
REQUIRED SETTING: when this option is enabled you must set up a number of posts per page accordingly: by a multiple of 3, 6 or 9 or 12 and so on, or you’ll have orphaned cards at end of page. For that go to Settings > Reading, change it and save.
Activating it will gives you this kind of posts listing:
Classic header
Display the title and the featured image (if exists) just before the content like bellow:
Post content with no sidebar:
Check that if you want centered post content when no sidebar is displayed, that keeps lines of text on a good length for a better readability.
Header layout:
What kind of header do you want for pages / posts / slider. This affect the general way of displaying documents headers, except for templates you set up in other way ( see templates section of this doc ).
Wide header look like that, it spreads to the entire width of page:
Narrow header like that:
Slider
Your slider can have many layouts applied using this panel section:
Extra height slider
Display a more tall slider.
Slider bloc position
This refer to the bloc containing all information about the current post displayed.
See some possibilities here:
Left aligned
Left aligned and verticaly centered
Horizontaly and verticaly centered
Extra tall and centered white background
Navbar settings
Below «General» stands Navbar settings where you’ll find navbar options.
Upload your logo
Click on «Upload logo» button to get the WordPress Media Window to be displayed, then upload a new image or select an existing one to be your logo.
Your logo will be displayed at 300 pixels width and adapts its height. You might want to upload at least 600 pixels width image in order to be HDPI compliant ( ie Retina ready ).
Navbar Small Logo:
Upload here a logo for small devices displaying ( under 768 pixels ). It is useful if you have a tall main logo or want to have a different logo like a simple icon. This one will be constrained to the height of the navbar.
Search Form:
Whether to display the search form button on the navbar or not.
Social networks menu.
Check to display the Social Networks Button menu.
Menus position
Check to center sub menus under the main menu item.
Centered sub menu
Left aligned sub menu
Menus corner
Uncheck to get square sub menus corner like this:
Square sub menus corner
Breadcrumb
Breadcrumbs are useful for users and for search engines to discover the path of a document. Ours are tested to be Google compliant.
Show current item.
Whether to display the current item ( ie post title ) at end of breadcrumb. This option can be useful on small devices if you write big titles, preventing them to be displayed on two lines.
Display current item unchecked
Current item displayed
Breadcrumb color
If unchecked, display the breadcrumb with transparent background and dark text.
Footer
Footer copyright text.
Put there your copyright text for the bottom footer.
Inverse contrast footer.
Display the main and bottom footer with dark background and white text.
Dark main and bottom footer
Transparent main footer
Transparent top footer.
If checked display no background for top footer.
Transparent top footer
Display top footer only on home page.
Display top footer widgets only on home page if checked. Useful when you have no sidebar on home page and sidebar on others pages. This prevent to have same widgets on both left/right sidebar and on the top footer.
Widgets Layout.
Choose there how your widgets title will be displayed generally on light backgrounds.
This is nearly impossible to show every possible combinations. There is some samples.
Play with options and find YOUR setting!
Widgets layout on dark backgrounds.
You’ll find there almost same options as before, but adapted for dark background as we cannot applies same settings for them.
Sample of what can be achieved
Templates.
You’ll find there different settings for different section of your website like home, categories, tags, search page and so on.
Home
Specific settings for home page, whether a static home with modules or a regular home with posts list (grid layout only applied for the regular home page).
Home title.
You can put there a text to be displayed on home as H1 header above all, just after the slider if you have one.
Home rich description.
A full wysiwyg control so you can put what you want to display under home title.
Home block with H1 title and 2 columns description.
Home grid
Posts list grid on regular home page ( not the modules home page ). Choose there how to display the grid, this apply only for home, categories grid have its own setting, see after.
Home sidebar.
Whether to display a sidebar on home or not. Others pages will not be affected by this option.
Categories options
General categories option stands there.
Labels shape.
Select your favorite labels shape, rounded or rectangular.
Rectangular label
Rounded label
Simple label
Link on label.
Link the labels to the category page if checked. Good for user experience but lead to over linking the categories.
Use «silo» structure for categories.
When checked, this option will display children categories on a sub page instead of being mixed all together on the mother category. This is a SEO structure to reinforce strength of topics.
More, when you have many posts, this prevent to have too many pages to paginate on, making search engines crawlers to neglect distant pages.
Example on technology category on demo page:
Silo structure example
All those categories belong to «technology» it’s obvious, but with this structure, inside «cars», for example, you’ll find only articles related to cars, not about computers or the NASA. This helps search engines to better understand your site’s topics.
Tags, dates, search, 404… pages settings
Each of those templates can get their own display settings: a cover image and different sizes for it. Lets make those usually boring templates more attractive.
Some samples:
Small boxed cover image
Medium size boxed cover
Wide medium cover
Big boxed cover
Author page
Cover image for author page is an option of user’s settings, see Users section below.
Contact page
Detailed section about contact page stands below in Contact page section.
Typography
You can choose the desired typography setting on the screen below:
Main font.
This is the font use for design display, in short, all except content and headings.
Content font.
This font is used for all content, posts content or about content for example.
Headings font.
There you’ll choose your headings font. Applied on all headings in content, cards, or some widgets titles.
Try to choose a font with at least 300, normal and 700 weight variants to allow Editium design to stay consistent. I mean for example post’s footer text like «Share with your friends» that use 300 and extra bold weights.
But that’s not mandatory, do what you want, that’s your website after all!
Headings kerning.
Choose your favorite letter spacing for headings there.
Headings letter spacing.
General letter spacing for headings in lower case.
Uppercase headings letter spacing.
Letter spacing for uppercase headings only.
Headings capitalization.
General headings uppercase.
Display all headings with uppercase text.
Content headings lowercase.
Display in lowercase the headings in articles or pages only.
Headings anti aliasing.
On some circumstances, some fonts might be displaying too fat in some sizes ( smaller ones usually ). you can try to apply this settings to fix it. This has no warranty to work as different browsers or OS can do what they want.
Colors
Personalize your theme colors here.
You’ll find two main colors and three sets of shades of gray.
Choosing a color.
Click on the «Select color» button and play with settings until you are satisfied with the result.
Shades of gray.
Depending on the colors you’ve choose before, you might want to set different shades of gray to go along with.
There is 3 choices : neutral grays, warm grays, cold grays. Indeed, some colors might need warm grays like green ( or it will be a bit sad ).
Make some tries! It’s easy!
Google fonts
Editium is delivered with an existing Google fonts list, but you might want to update it if new font are made available.
Google fonts API key.
You need to get an API key from google in order to download a new up to date fonts list. Don’t worry it’s easy, free and you’ll have to do it only once.
Go on Google fonts developers page here:
https://developers.google.com/fonts/docs/developer_api#identifying_your_application_to_google and follow instructions.
Click on «Credentials page» link like shown on the above image.
Then click on create a project, that’s just a name to group your APIs.
You get this screen, enter a name (your website’s name for example). Then click on «Create» button.
You need to add the Google fonts API to your project. To do so, click on «Library» link on left menu, then choose «Web Fonts Developer API» as shown below:
You get this screen:
Click on «Enable»
After that you have to create credentials ( your API key ). Click en «Credentials» on the left menu.
Then on «Create credentials» and on «API key» like shown above.
Click on the API name like below to be able to copy the key:
Click on the right icon as show below to copy the key to the clipboard:
Updating your Google fonts list
Go to Appearance > Theme settings and select the «Google fonts tab».
Paste your API key there like on the image below:
Choose your preferred order.
Click on «Save Changes» button, after few seconds your fonts list should have been updated, showing a greater number of fonts.
You are done! A bit tedious, but not that complicated isn’t it?
Social Networks
You can add there your social networks username. We have set the most popular ones for you. Also, if you have a Facebook App ID you can add it to have detailed stats.
Only enter your users names, not the whole URL.
Click «Save Changes» when done.
Social sharing icons.
With Editium 1.5 comes new social sharing icons and a way to choose them.
Menus creation
You have to create a navigation menu to display the different sections available in your site. This can be categories, pages or custom links.
Go to Appearance > Menus, you’ll get this screen:
It display a default menu you can ignore.
Click on «Create a New Menu» and choose a name ( for example Primary ).
Click on «Create Menu» button.
Add items to your newly created menu:
Click «Save Menu» when your are done.
Special items.
As you’ve probably seen on the demos, some specials items can be added like divider or a menu header to describe a section of your sub menu.
First you have to activate more options for your menus as shown below:
To add a menu header:
Add a custom link as below:
Adding a divider:
Add a custom link as below:
Enjoy your rich menu!
Widgets
Widgets are one of exciting feature of WordPress. Lets start to personalize your sidebar.
Click on Appearance > Widgets. You’ll get this screen with default widgets:
Editium special widgets.
Editium comes with eight custom widgets to add on the five widgetized areas of the theme:
- Sidebar,
- Main footer
- Top footer
- Home page
- Quick launch zone
Here are the Editium widgets:
SeoreadyWP About Me:
Display a short description of your website or yourself on the sidebar or footer:
Click on «Upload Image» button to activate the WordPress Media Center and upload or select an image. Try to choose at least 600 pixels wide image to be HDPI compliant.
You can have a round image if you check «Round image» checkbox.
Fill up head line and the content, then click save.
Result:
SeoreadyWP Recent Comments.
That’s an enhanced version of WordPress recent comments displaying commenters avatar:
SeoreadyWP Social Networks.
Display the list of social networks you have entered on Social settings before:
Show names option: Checked, it display the name of your social networks.
Add circle option: Check it to add a circle around icons.
Final result with all checked:
SeoreadyWP Summary
Display a table of content of the post being displayed if there are enough headings.
Enter a title and the minimum number of headings before displaying it. Click save.
Result:
SeoreadyWP Smart Last Posts.
This widget displays a list of last posts with thumbnails depending on the section of the website visitors are on.
- On a mother category it display posts for all sub categories.
- On a child category it display others categories children.
- On a post it display last post from current post’s category.
Respecting the «Silo» structure this widget ensures that displayed elements are always «on topic».
The default category is displayed when nothing else can be displayed.
Check «Big thumbnail» to have an image as wide as the sidebar with title under it, otherwise thumbnails are displayed at left of title.
Check «Show on home page» if you want to display it on home page too. Be aware that can cause to have duplicate posts displayed on home page.
Click save and see the result (here for a chid category):
Posts Settings.
Some new settings are added on the post edit page:
- Introduction
- Display options
- Post options
- SEO options
Introduction.
You have there a new Wysiwyg TinyMCE box to add an introduction section on top of the article. This section has bigger font and a separator at end.
Display options.
Content summary.
If checked, a table of content is added on top if there is at least 3 headings in the content. Useful for users and for SEO.
Table of content
Post options.
Featured post.
You can make a post to be featured on slider for 3 sections of your site.
- On home
- On its mother category
- On its category
Sticky on its category.
If checked, this post stay on the top of the posts list for its category. Only one post is displayed that way.
SEO options.
When installed, SeoreadyWP Seo plugin add a new section to post screen.
SEO title.
Title meta tag for this post, if empty we’ll use the title. Try to put there an attractive title, using different keywords than in the title to avoid over-optimization.
Meta description.
Snippet displayed on search results. Use a short description of the article to make visitors to want to visit your site.
Search engine indexing.
You can ask search engine to not index this post. CAUTION!!! Use it only on edge cases, this can break your ranking.
Categories settings.
Editium add a hand full of settings to categories pages. You will see three new sections:
- Extra infos
- Display parameters
- SEO parameters
Extra informations section.
Title
You can add a title more explicit than the short name used on menus. It will be used on category page, sub category grid or home modules.
Example on a category card
Rich description
You can use this field instead of the regular description to enter a rich content to describe your category. See below:
Display parameters.
Image
You can add a featured image for a category, actually, we advise you to do so since Editium use it in many places, as cover image, as thumbnail on sub category page or on posts modules for home.
Just click on «Upload image» and upload or select an image on the WordPress Media window.
Color.
You can choose here a color for the background of category labels. If not set up the secondary color (on colors settings) will be used.
Grid Layout.
Choose here the way the posts grid will be displayed.
Activate the slider.
Whether to activate the featured posts slider on this category or not.
Slides transition.
Which transition you wish for the slider.
Kenburns effect.
Kenburns effect is a random asymmetric zoom in or out applied to slider images between transitions. In this case the fade transition effect is always applied.
SEO parameter.
When installed, SeoreadyWP Seo plugin add a new section to category screen.
Category SEO title.
Title meta tag for this category, if empty we’ll use the title or worse the name of the category. Try to put there an attractive title, using different keywords than in the title to avoid over-optimization.
Category Meta description.
Snippet displayed on search results. Use a short description of the category to make visitors to want to visit your site.
Category Search engine indexing.
You can ask search engine to not index this category page. CAUTION!!! Use it only on edge cases, this can break your ranking.
Setup your footer.
Editium provides two footer areas, the main footer and a top footer. Top fotter is meant to receive widgets when you’ve choose not to display a sidebar.
Main footer has 4 columns and top footer 3 columns to be able to display bigger widgets like like posts list or comments.
Main footer
Top footer
You’ll find these Widget areas in Appearance > Wigets.
There is nothing really different than a sidebar setup, you drag a drop widgets in the area and change parameters of each widgets as you wish.
Add links in your footer.
One widget require some explanations though, the «menu widget», with it you can add links in your footer like «about us» or a link to your «terms and conditions» page, but also links to others websites.
The first thing to do is to create a new menu going to Appearance > Menus and proceed like for your main menu.
Example from our demo site
User settings.
User profile page has some new settings when Editium is activated:
- Social profiles
- Avatar image
- Cover image
Avatar image let you add an image without using Gravatar. It will be displayed on your comments and on you resume at end of posts. Upload there and image at least 600 pixels wide if you want to stay HDPI compliant.
Cover image is the image that will be displayed on the author page. You can set up the layout of this cover on Appearance > Theme Settings on the «template» tab
Home posts modules.
There is a special widgets area on this theme «Home Page»: this is where you can set up a personalized home page with the «Posts module» widget.
This widget display a list of articles card from a specific category, letting you organize your home by sections, in the order you wish.
The first thing to do to enjoy this feature is to create a new page and to choose a special template for it: «Home page modules».
You don’t have to enter any content.
After that, go to Settings > Reading.
Choose «A static page» option and select the page you’ve just created before.
Hit «Save changes» on bottom of that page.
Lets see details of this widget…
Title of the section: if empty it will display the category title as set up in category settings page.
Lead text: a short introduction text above the title («Last publications in» by example).
Header Layout:
See below the combined effects of the two settings: «Header Layout» and «Header height»
Classic header
Classic header:
Classic header, left aligned, short underline:
Note: this one is always boxed and in small height
Cover header options.
You can choose the height of the header:
Cover image, small height
Cover image, medium height
Wide cover image, big height
Info bloc background options.
Choose here the background of the bloc holding this module text informations.
White or black, with or without a border around.
White background
Black background
Grid options.
Choose here the way your grid of posts will be displayed.
Show excerpt: whether to show the post’s excerpt or not. Be aware that this is not recommended for SEO reasons. The more text you have on home, better search engines can «understand» your content.
However, this can be useful if you want to gain space.
Number of columns to display: choose the number of columns to display posts. Has to be related to number of posts you’ve chosen before. Don’t display 3 columns with 5 posts to display.
Click save and enjoy the result.
Note: you can use it with live preview by clicking on the «Manage with live preview» link on top of the widgets screen.
Extra posts module.
With Editium version 1.5 comes an extra modules widget offering more display option for the grid.
Except that, all others settings are the same as the regular posts module we already see before.
New grid options.
The first three are meant to be displayed in only one row, adjust the number of posts accordingly or things can becomes a bit messy.
The two lasts provide you a kind of «wall» of posts with compact presentation.
Note: for «big 2/3 then compact» you should uncheck «show excerpt» for the better result.
Here are some samples of what you can achieve with that new widget:
Small then extra small cards
Big 2/3 and compact card “the wall”
All compact cards
Quick launch zone.
Sometimes, more than to put some post as featured on a slider, you might want to put onwards some pages or categories or even an external link.
Editium come with a new widget for that, starting with 1.5 version: SeoreadyWp image link.
You can use this widget on every widgetized area, but we will look its use in the quick launch zone.
The quick launch bar with 3 columns:
The widget:
The image link widget:
Image for link.
Upload there the image you wish with the WordPress media center.
Link Url.
Type there the url you want to link to, or choose one of the option after it. This is where you will put an external link.
Link to a page.
Choose a page of your site to be linked, the url of that page will be copied into the «link url» box above.
Link to a category.
Choose a category to be linked, the url of that category will be copied into the «link url» box above.
Label text.
Inverse contrast: display the back ground with text color and text in white color.
Samples:
Full height image option.
This applies for sidebar when you have an image more height than large.
Editum advertising on sidebar of the demo:
Adding a contact page.
With «contact form 7» installed you can easily create a nice contact page for your visitors to contact you by email.
Go to «Contact» on the main WordPress menu:
and click on the preinstalled form.
You can personalize the form as you wish like shown below. Pay attention, this is not a rich edit control as in post or pages, you’ll have to type HTML code for adding headings or paragraphs.
When you are done, click on «save» button.
You can now copy the shortcode you will paste it into a new page.
Create a new page, and choose a special template for it:
The first is a page with sidebar, the 2nd is a full width 2 columns page.
Write the content you wish before and or after your shortcode:
With the «Contact 2 columns» template, the content will be displayed on first column, the form on the right column.
SEO general options.
Editium comes with a light SEO plugin providing paramount options you might need. When installed and activated you’ll see this new menu at bottom of the main menu of WordPress:
Nowadays, search engines, specially Google brings the most of traffic to websites. Having a technically well configured site is the first step to be well indexed and ranked by them.
You will see SEO options on many pages on your WordPress dashboard using Editium theme, don’t ignore them, take the time to fill those options up carefully, you’ll won’t regret it.
Home metas tags.
SEO Home Title.
This is the title that appears on search results and on your browser’s title bar. It should be ideally different than the one on your page to avoid over-optimization. Write an engaging title the user will want to click on. If empty the title of your site will be used.
Home meta description.
This description is shown as snippet on search results. It is NOT indexed by search engines but this is what will gives your potentials visitors an idea of what is inside your site. Be engaging, make your description irresistible, attractive, describe well what they will really find on your site.
Ideally, you should not copy a text from your website.
Special pages not to index.
Some pages on a WordPress site display the same content as others pages in a different way or order. This can cause internal duplicate content and can make search engines to index the wrong page or worse, to penalize your site.
You might want to consider to flag them to not to be indexed by crawlers.
These pages are «Tags», «Author» and «Archives by dates». If you choose to index them, do it at your own risk and because you know very well what you are doing.
Updating your theme.
Editium can be updated for different reasons like a WordPress update or bugs fixes or because new functionalities were added.
First thing to do is to download the update files from your Themeforest. account Chose the full package to have all informations about the new release.
Don’t forget to make a backup of your old theme before anything, mainly if you’ve made changes in it.
Update from your WordPress dashboard.
That seems to be a good idea, unfortunately WorPress doesn’t allow to update an active theme. Then you should activate another theme while the process and activate it again after.
If you choose this method, delete the actual Editium theme and proceed like for an installation. Activate Editium again after that.
Don’t forget to do a backup and to activate another theme before to do that!
Update with a plugin.
Some plugins allow you to do updates with ease, they even do a backup for you.
Easy Theme and Plugin Upgrades: https://wordpress.org/plugins/easy-theme-and-plugin-upgrades/
Envato Market: http://envato.github.io/wp-envato-market/
Update with FTP.
Inside the unziped package you’ll find a folder called «editium» beside the editium.zip file. this the full theme folder as it should go in your WordPress install.
Backup your old theme and override your theme by uploading this folder inside your «wp-content/themes» folder on your server.
Open the release notes to find if files were deleted in this release, if so delete them from you «wp-content/theme/editium» folder as it is not secure to keep old files on a server.
Advanced Personalization
Editium allow you many personalizations but you might want to go further. This require some web programming skills.
Installing the child theme
First thing to is to install the child theme as exposed in the «Getting started» chapter at start of this documentation.
Writing your CSS rules
Put your customs CSS into the style.css file in your child theme after the header.
To get the right selector to modify an element appearance, you can use Google Chrome developer tool or equivalent for Firefox.
For example, this is the selector for the title on small post card:
To change it you’ll have to copy the selector and add properties like that:
Editium use its components in different locations with different properties values, pay attention to get selectors for all situations AND devices sizes.
Tweaking templates
To change the way some templates acts, you can modify them. But never modify template inside the main theme directory.
Instead, copy the template you wish to modify inside the child theme you’ve create before. It will be used by WordPress engine instead the main one.
