HistoryPress

 

Theme Instalation

Installation via WP Dashboard:

1. Unzip/extract the main (downloaded) theme package – to get historypress.zip file,
2. Go to Appearance >Themes,
3. click on “Add New” > and “Upload theme”,
4. click on ‘Browse’ button, find historypress.zip file on your computer and press 'Install Now',
5. Activate theme,
6. Go to Appearance > Install Plugins after theme activation and install and activate Redux Framework plugin!
7. Refresh page and 'HistoryPress - admin panel' button will appear;
8. Go to HistoryPress - admin panel (theme options) and setup theme.

 

Installation via FTP:

1. Unzip/extract the main (downloaded) theme package / twice / to get theme folder ‘historypress’,
2. Using FTP client (e.g. FileZilla) upload 'historypress' folder into 'themes' folder in your WordPress installation ( YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/ ),
3. Go to Appearance >Themes, find HistoryPress theme and activate theme,
4. Go to Appearance > Install Plugins after theme activation and install and activate Redux Framework plugin!
5. Refresh page and 'HistoryPress - admin panel' button will appear;
6. Go to HistoryPress - admin panel (theme options) and setup theme.

 

Required Plugins

The following message may be visible after theme activation:

Go to Appearance » Install Plugins and install and activate following plugins:

1. Redux Framework, it is not necessary to install and activate the 'Extendify' library after the 'Redux' plugin activation.
2. Elementor: you are free to skip the whole setup process after the activation. But go to Elementor > Settings and make the following basic setup of the plugin:
   Save changes and that's it. You can edit any page in the page builder later.
3. Crafted Addons: No setup needed.

Default Setup

1. After theme activation go to Appearance > Install Plugins, and install and activate Redux Framework plugin!

2. Then go to HistoryPress - admin panel

and hit "Save Changes" button to set default style settings:

You can change styling options later.

 

2. Following (or similar) message may be visible after theme activation:

Click on 'Begin activating plugins' link and install and activate 'Redux Framework' (if not installed yet), Elementor and 'Crafted Addons' plugins. Or you can do this by visiting Appearance » Install Plugin

 

4. IMPORTANT! It is possible that after theme activation are images wrongly cropped and look ugly! In this case use the following plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate old thumbnails (from the previous theme).
After plugin installation, start regeneration in Tools > Regenerate Thumbnails. This process can take a while and you cannot close the tab/window until regeneration is done.

 

Demo Import

 

 

One Click Demo Import

Install and activate 'One Click Demo Import' plugin.

After that import full demo content easily in Appearance > Import Demo Data.

Just hit the 'Import' button and install recommended plugins (if you want them to import/use):

 

Hit the' Continue & Import' button and wait until the import is done (it can take few moments).

 

Homepage Setup

1. In 'Pages' section create new page > name it 'Home'
2. Select 'Elementor Full Width' template for this page and publish the page. Alternatively, you can select the 'Elementor Full Width (Transparent Header)' template, which will enable the transparent header on your homepage.
   
3. Go to Settings > Reading and created 'Home' page set as Static page > Front page,
   
4. Empty homepage is created now! In next steps, we'll create homepage content using 'Elementor' page builder.

 

 

Elementor

Important!

1. Go to Pages section and edit 'Home' page, which we have created in previous steps:
   
2. Make sure that 'Elementor Full Width' template is selected for this page (a.), then hit 'Edit with Elementor' button (b.):
   

Adding the Slider

1. Make sure that Crafted Addons plugin is installed.
2. In 'Elementor edit mode, hit on 'Add new container' button and add select the following 'Flexbox' setion:
   
   
3. Hover over the section and click on 2nd blue icon to edit section (a.) In left section select 'Full Width' and 'No Gap' options (b.)
   
   
4. Set the 'Padding' values to 0 in the 'Advanced' tab:
   
   
5. Then just click + sign and drag 'TMNF: Posts (Slider)' block (or 'TMNF: Slider') into that setion.
   
6. Edit TMNF: Posts (Slider) (or 'TMNF: Slider') options in the left options bar and "Slider placeholder" will appear. On live homepage will be displayed fully functional slider.
   
   

Adding Hero image

 

1. Add new 'Flexbox' section and with two column layout:
   
   
2. Hover over the section and click on 2nd pink icon to edit section:
   
   
3. Switch to the Style tab (a.) and add background image, gradient, bg video or slideshow (b.)
   
   
4. Then just click on + sign in the left column and drag; e.g. Heading block into it.
   .
   
5. Click on heading; and in Content / Style / Advanced tabs customize the appearance (size, text colors, font style, padding etc.).
   
   
   
6. After all these, adjust overall padding (spacing) of the 'hero' section.
   a. edit section ,
   b. switch to the Advanced tab,
   c. adjust top and bottom padding of the section.
   
   
7. Adjust the padding for responsive mode too (for both modes, tablet and mobile):
   

 

Adding Columns

1. In 'Elementor edit mode' hit on 'Add new container button and select 'Flexbox' and e.g. 'two columns' section:
   
   
   
   
2. Select the first container (column) (a.) and in the 'Layout' tab set the width in %(b.)
   
3. Do the same with the second container (column) sum of widths should be 100%. E.g. if the first column is 70% of width the second should be 30%.
4. Click on the + sign in wide column and then drag blocks from the left menu; e.g. add 'TMNF Posts' block to this wide column:
   
5. Adjust 'Number of posts' parameter, choose 'Columns' and optionally select 'featured category' in left panel.
6. Click on the + sign in the narrow column, then drag Sidebar block from the left menu into it.
   
7. Choose 'Sidebar' section which you can setup in Appearance > Widgets
   
   

Important

1. Adjust padding for responsive mode! When you are building any layout using 'columns' in Elementor; click on small 'Desktop' icon in the Advanced tab; 'Tablet' and 'Mobile' icons will appear.
   Then click on 'Tablet' and 'Mobile' icon and check your layout on small screens. If necessary, adjust padding/margin values for the responsive mode.
   
   
   

 

 

Blog Template

1. If you want to create News (or Blog) page, create empty page (Default template),
2. name it News (or Blog),
3. go to Settings > Reading and set this page as 'Post page',
4. adjust number of posts.
   

 

 

Theme Setup - Admin panel

Theme comes with extensive options panel with functions divided to these sections:

General Settings:

1. Upload your Main logo image and logo for the 'Transparent Header',
2. Add title and sub-title for the 'blog' page,
3. Enable/disable 'Uppercase' fonts,
4. Select 'Images Filter'.

 

Primary styling:

1. Select font family (with color, style and width) for main body text,
2. Choose colors for typographic elements: body, containers (ghost color), text/links, hover, borders etc.

 

Header Styling & Settings:

1. Setup color scheme (background, font, links and border colors) for header,
2. Set other colors for header elements (sub-menus etc.),
3. Set the color scheme for 'Transparent Header',
4. Set custom margins and width limitation for logo image.

 

Footer Styling:

1. Setup footer logo and footer text.
2. Select color scheme for footer (footer background, text, links, hover, borders etc.)

 

Other Styling:

1. Set font styling for 'Meta' sections (date, category etc. post information)
2. Choose background color for elements (buttons, lines etc.),
3. Select text/link color for elements (buttons, lines etc.),
4. Set color scheme for image backgrounds.

 

 

Headings Typography:

1. Select Font-family, size, and color for various theme headings (titles).

 

Post Settings:

1. Select links colors used in posts,
2. Select titles fonts used in posts,
3. Turn On/Off partial post sections.

Social Networks Settings:

1. Enable "Social Networks" section,
2. Enter the full URL of social network, your profile or account (enter full URL: http:// or https:// including).

 

 

If you are finished click on "Save changes" button!

 

 

 

Custom Posts

 

 

Crafted Addons plugin comes with 'Projects & Works' custom post.

You can access and create Projects & Works posts in main dashboard menu:

 

Projects & Works posts work similar to the classic posts. You can add project content (headings, image, texts, button shortcodes etc.), set 'featured image' and sort/list these posts into own categories.

 

You can add some additional infromation about the project/work in the 'Project & Work Details' tab below the post content on add/edit post screen:
 

 

Display of the projects is very simple. You have two options:

a) in Elementor use TMNF Projects widget in the 'boxed' one-column section.

b) create a dedicated 'Project' page and select 'Projects' custom template in the right sidebar section:

 

 

Custom Templates

 

1. Create a page (or post).
2. In the right side section select custom template ('Elementor (default heading + breadcrumbs)', 'No Sidebar Layout', 'Right Sidebar Layout' etc.)
   
3. Click the Publish button to publish your page/post.

Note: The page becomes an archive when you select the 'Donations' template for it. Archives cannot be edited in any editor (Gutenberg, Elementor).

Archives are automatically generated pages and their layout and design in coded directly using PHP and CSS. An archive page in WordPress enables you to easily steer readers through your previously published custom posts (donations).

 

Custom Widgets

The theme comes with few custom widgets (marked as Themnific).

Go to Appearance > Widgets and setup your sidebar and footer widget areas. Widgets are very easy to setup.

Following widgets are used in theme demo (we are using 'Classic Widgets' plugin to achieve this look: https://wordpress.org/plugins/classic-widgets/):

In theme demo may be used custom widgets which come with 3dr party plugins (Top 10, Donations, Newsletter etc.).
Please see 'Plugins' chapter for more info about these plugins.

 

 

Images

IMPORTANT! It is possible that after theme activation are images wrongly cropped and look ugly!

In this case use this plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate old thumbnails from previous theme.
After plugin installation start regeneration in Tools > Regen. Thumbnails This process can take a while and you cannot close tab/window until regeneration is done.

Images and thumbnails are generated automatically.

To display thumbnails correctly upload images via WP interface using "Set featured image" button.
After image upload set featured image.

 

Featured Images - Minimal Sizes

1. Main Slider section + Hero section: 1900×955px;
2. Blog + Magazine widgets: 600×600px
3. Single post/page (classic image): 830×750px

 

 

Custom Menu

 

! Create own custom menus first! Please see following tutorial !

 

Colored Menu Item (on the right)

1. Toggle 'Screen Options' on the top of the menu screen:

2. Enable 'CSS Classes' and 'Desription' option:

3. Toggle any menu item and type special word into 'CSS Classes' field

Note: There is newitem class for the main menu as well. It will show a small 'new' label next to the menu item:

 

 

Menu Icons

 

1. Before (or after) menu label add this piece of code

<i class="fas XXX"></i>

Enter full icon code - 'fa' class is required.

2. For XXX you can set any icon name. You can find all icon names on Font Awesome homepage.

 

Plugins

 

Elementor

Elementor plugin will help you create awesome layouts for your pages.

Go to Appearance » Install Plugins inside wp dashboard and install and activate Elementor plugin.

Basic setup of this plugin is very easy; go to Elementor > Settings and disable default color and fonts:

Save changes and that's it. You can edit any page in the page builder now.

 

Events Manager

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'Events Manager' and Install this plugin.

Events manager plugin is very complex and I recommend to check plugin documetation carefully! Please go through 'Getting Started Guide' to learn how to work with the plugin.

Theme related plugin settings:

a) In Events > Setting > Pages select 'No Sidebar Layout (Narrow - Transparent Header)' template for Event and Location pages

b) In Events > Setting > Pages in 'Event List/Archives' section select on which page will used as an events page:

c) In Events > Setting > Formating enable Super Advanced Mode:

and after that paste the following code into 'Default event list format header' field:

<div class="tmnf_events em events_3_columns">

this code into 'Default event list format' field:

<div class="tmnf_cell tmnf_event_item">
	<div class="{no_image}has-placeholder{/no_image}">
		{has_image}
		#_EVENTIMAGE{500,500}
		{/has_image}
	</div>
	<h4 class="tmnf_small_titles">#_EVENTLINK</h4>
	<div class="tmnf_meta">
		<div class="em-item-meta-line em-event-date em-event-meta-datetime">
			<span class="em-icon-calendar em-icon"></span>
			#_EVENTDATES    
		</div>
		<div class="em-item-meta-line em-event-time em-event-meta-datetime">
			<span class="em-icon-clock em-icon"></span>
			#_EVENTTIMES
		</div>
		{has_location_venue}
		<div class="em-item-meta-line em-event-location">
			<span class="em-icon-location em-icon"></span>
			#_LOCATIONLINK
		</div>
		{/has_location_venue}
		{has_event_location}
		<div class="em-item-meta-line em-event-location">
			<span class="em-icon-at em-icon"></span>
			#_EVENTLOCATION
		</div>
		{/has_event_location}
	</div>
	<div class="em-item-desc">
		#_EVENTEXCERPT{35}
	</div>
	<a class="tmnf_read_more" href="#_EVENTURL">More Info</a>
</div>

!!! don't forget to close the div markup in the 'Default event list format footer'

</div>

d) In Events > Setting > Formating > Single Event Page paste following code into 'Single event page format' field:

<div class="tmnf_event_content em">
	<div class="tmnf_event_head tmnf_ghost tmnf_border">
		<div class="em-item-meta-line em-event-date em-event-meta-datetime">
			<span class="em-icon-calendar em-icon"></span>
			#_EVENTDATES    
		</div>
		<div class="em-item-meta-line em-event-time em-event-meta-datetime">
			<span class="em-icon-clock em-icon"></span>
			#_EVENTTIMES
		</div>
		{has_location_venue}
		<div class="em-item-meta-line em-event-location">
			<span class="em-icon-location em-icon"></span>
			#_LOCATIONLINK
		</div>
		{/has_location_venue}
		{has_event_location}
		<div class="em-item-meta-line em-event-location">
			<span class="em-icon-at em-icon"></span>
			#_EVENTLOCATION
		</div>
		{/has_event_location}
	</div>
	#_EVENTNOTES
	{has_bookings}
	<h4>Bookings</h4>
	#_BOOKINGFORM
	{/has_bookings}
</div>

 

For the date use M d as format

 

 

 

MailChimp for WordPress

You can easily create newsletter subscribe form with 'MailChimp for WordPress' Plugin: Plugin Homepage

Into search field (in Plugins > Add New) paste MailChimp for WordPress and Install this plugin

Plugin can be set in MailChimp for WP section:

In demo is used subscribe form with following markup:

<p>Get the latest history news and content tailored to your interests.</p>
<div class="formwrap">
  <input type="email" name="EMAIL" placeholder="Email address" required />
  <input class="submit ribbon" type="submit" value="Sign up" />
</div>

 

 

AddToAny Share Buttons

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'AddToAny Share Buttons' and Install this plugin.

Plugin can be set in Settings > AddToAny:

Theme is compatible with Simple Share Buttons Adder too.

 

 

Contact Form 7

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'Contact Form 7' and Install this plugin

You can create own contact form(s) in main wp menu > Contact.

You can display created 'contact form' on any page using shortcode.

On demo page is used contact form with following markup: https://pastebin.com/a0Hcywkd

Please read plugin documentation for more info about this very flexible plugin.

 

 

 

 

 

Elementor templates

If you don't want to import whole demo content you can import just elementor templates (e.g. layout of the homepage) using .json file.

.json files are located in main theme package, in 'Spec' folder.

1) Extract .json files to you computer.

2) Import template in Templates - > click on Import Templates:

3) Find .json file on your computer and import Elementor template.
4) After that, the template will be available in the 'My Templates' section. You can insert the template when you are editing a page in the Elementor.

5) Hit the 'Don't Apply' option in the modal window when you are inserting an imported template:

 

 

Important!

Due licenses all imported images are for testing purposes only and cannot be used on your live website!!!

You can download free photos for your commercial & personal works on sites like:

http://picjumbo.com/

http://pixabay.com/

https://unsplash.com/grid

 

Translation

This theme is translation/localization ready and comes with historypress.pot file. File is located in ../historypress/lang/ folder.

1. You need to use localized WordPress installation (core) in the first place:
   
   If not, localization will be not successful.
2. .pot file is located in root theme folder inside 'lang' sub-folder: ../historypress/lang/
3. Download poedit software here,
4. Install software it and translate historypress.pot file (line by line),
5. Once you have translated all the strings, you can save this as your .po file.

   The filename of your .po / .mo file is crucial! Gettext uses the ISO 639 standard for language abbreviations and ISO 3166 for locales. If your translation is written in Deutsch for example, your file name will look like de_DE.po. Capitalization is also important here. For a full list of language and country codes, check out these two links:

   • Gettext language codes
   • Gettext country codes

   Once you save, POEdit by default automatically creates a .mo file alongside your .po file. Put these files into 'lang' folder.

6. Access your wp-config.php file found in your WordPress' root folder. Your file should already contain define('WPLANG', ''); but if it does not, you can add it in. You simply need to add your language and locale code into the define. If you were to translate your theme into German, you would have this:
   define('WPLANG', 'de_DE');

Your internationalization is complete!

 

 

 

 

---

Once again, thank you so much for purchasing this theme.

Go To Table of Contents