TownPress

Theme Installation

If you haven’t already, download the full package from your downloads on ThemeForest.

1. Click on the Download button next to your purchased item
2. Choose All files & documentation and download the zip file

1. Enable email notifications if you want to be informed when the new update is available
2. If you like the theme, please don't forget to rate it 5*. Thank you!

Parent Theme Installation

When you unzip the downloaded file, you will see a bunch of folders. The most important one is the THEME folder which contains the installable theme .ZIP.

1. THEME folder contains the installable theme .ZIP

Open your WordPress admin and navigate to Appearance / Themes

1. You can manage themes under Appearance / Themes

Upload the installable theme .ZIP file

1. Click on the Add New button
2. Click on the Upload Theme button
3. Choose theme .ZIP file
4. Submit the file

Child Theme Installation

If you don’t know what a WordPress child theme is, please read this article in the WordPress codex. The article also explains how to create a child theme, but don't worry, the TownPress child theme is already included in the package.

This documentation assumes that you are running the child theme, so it is highly recommended to install it. The Child theme .ZIP can be found in Child Theme folder. Install it in exactly the same way as parent theme, described in previous steps.

Once you have both parent and child themes installed, you need to activate the child one.

Plugins Installation

Before we proceed to plugins installation, let's talk about them a little bit first. This theme comes prepackaged with several plugins. Basically, any major functionality (like events, directory, galleries, etc.) has a separate plugin. This has one big advantage - you can choose which one you need. For example, if you don't need the events functionality for your site (or you plan to use a 3rd party plugin for that), there is no reason to install the LSVR Events plugin. And same goes for LSVR Notices, LSVR Directory, LSVR Galleries, LSVR Documents and LSVR People plugins as well. But let's do a quick overview of all of those plugins so you can decide for yourself which ones you need:

• LSVR Framework - this plugin contains a lot of custom functionality used throughout the theme and LSVR plugins, such as custom metaboxes and customizer fields. You should definitely install this one.
• LSVR Notices - notices are basically stripped-down standard posts, ideal for short messages which you can display in the sidebar of your site. However, if you rather prefer to use standard WP posts for all types of news, long or short, don't install this plugin.
• LSVR Directory - it handles the Listing custom post type functionality and all its widgets. If you don't need the directory functionality or are going to use a 3rd party solution for that, don't install.
• LSVR Events - this plugin handles the Event custom post type functionality and all its widgets. If you don't need the events functionality or are going to use a 3rd party solution for that, don't install.
• LSVR Galleries - this plugin handles the Gallery custom post type functionality and all its widgets. If you don't need the galleries functionality or are going to use a 3rd party solution for that, don't install.
• LSVR Documents - this plugin handles the Document custom post type functionality and all its widgets. If you don't need the documents functionality or are going to use a 3rd party solution for that, don't install.
• LSVR People - this plugin handles the Person custom post type functionality and all its widgets. If you don't need the people functionality or are going to use a 3rd party solution for that, don't install.
• LSVR TownPress Toolkit - it contains the theme's shortcodes (for example those used for the default front pages) and some custom widgets.
• Envato Market - it allows automatic theme updates for themes purchased from Envato Market. This is probably the easiest way to keep your theme up to date. However, it is not the only way. You can always just download the latest version directly from your account on Envato Market and either reinstall the theme or overwrite files via FTP. So if you prefer to update the theme manually, you won't need this plugin.
• WPBakery Page Builder for WordPress (formerly Visual Composer) - this is a recommended tool for building your front page. However, the front page can also be built just via shortcodes alone, making the use of page builder completely optional for this task. Of course, you may want to use it to build various other pages as well, as it comes with multiple basic design elements like accordions or tabs. Please note that this is a bundled premium plugin which has some limitations (this is the same for ANY theme which bundle this plugin). You can ingore any "license activation" notifications. You don't have to activate the plugin's license for it to work.

One last thing. You may be worried that so many plugins can have a performance impact on your site. The truth is that the number of plugins alone has no real impact on the performance. It's the way they are coded that's important. Since almost all of those plugins were coded in-house, their optimization and performance is fully under our control. Also, don't forget that the quality of your hosting plays a very significant role in overall performance of your site.

Bundled Plugins

Let's finally install some plugins. Once you've activated the theme, you should see a prompt message at the top of your admin informing you about recommended plugins.

1. Click on Begin installing plugins

1. Select either all plugins or just the plugins you need
2. Choose Install
3. Hit Apply

1. Wait for plugins to be installed and then click on Return to Required Plugins installer

1. Select all plugins
2. Choose Activate
3. Hit Apply

After you activate plugins, head to your Dashboard and that’s it. Plugins should now be installed and activated. Remember that all bundled plugins can be found in the Plugins folder in full package, so you can install any of those plugins manually anytime you need (via Plugins / Add New / Upload Plugin).

3rd Party Plugins

Here is a list of some useful 3rd party plugins. You can install them by typing their name in the search box under Plugins / Add New:

• Wordfence Security - very popular WordPress security plugin.
• bbPress - the most popular forum plugin. This theme comes with a custom styling for bbPress plugin.
• W3 Total Cache - a must-have caching plugin.
• Contact Form 7 - great plugin for creating simple contact forms.
• Intuitive Custom Post Order - allows you to reorder your posts and categories via drag & drop.

Demo Setup

Quick Demo Import

The quickest way to import the demo data is using the Theme Demo Import plugin. To install it, simply go to Plugins / Add New and type "Theme Demo Import" into the search field. Once installed and activated, go to Appearance / Import Demo Content where you can import content, customizer settings and widgets separately (they should be imported exactly in this order).

1. Choose what to import (content, customizer settings or widget)
2. Click on the "Import Demo Content" button and wait for the process to end

Once you've imported all three (content, customizer settings and widgets), continue here.

Manual Demo Import

If you want to have more control over imported data, you can do it manually. Demo data can be found in the Demo Data folder in full package.

Manual Content Import

You will notice there are several .xml files in the Demo Data folder. You can decide to import either all posts and pages or just specific post type posts.

To import the content, navigate to Tools / Import and click on WordPress. You may be prompted to install the Importer plugin if you don’t have it already. After you install and activate it, go back to Tools / Import / WordPress. Now choose which content you want to import. If you want to import everything, choose the content.xml file. If you want to upload events only, choose events.xml. You can of course do multiple imports if you want to import more than just one .xml file (for example events.xml and then documents.xml).

If you haven't installed all bundled plugins but are trying to import the content.xml file, you may notice several errors during the import process. Those are caused by the fact that posts related to missing plugins can't be imported (for example event posts without LSVR Events plugin installed). You can ignore those error messages, as they shouldn't affect the import of the other posts.

Manual Customizer Settings Import

You will need the Customizer Export/Import plugin to import customizer data. Once installed and activated, go to Appearance / Customize / Export/Import and upload the customizer.dat file from the Demo Data folder.

Manual Widgets Import

You will need the Widget Importer & Exporter plugin to import widgets data. Once installed and activated, go to Tools / Widget Importer & Exporter and upload the widgets.wie file from the Demo Data folder.

After Demo Import

Regenerate Events

If you did quick import or manual import with events, head to Tools / Regen. Events and hit the Regenerate button. You won't be able to see any imported events on your front-end unless you do that. If you are experiencing any issues with this tool, you will have to resave each of the event posts one by one (at least those event posts you want to display).

Another important thing to keep in mind when importing events is that by default, events archive will show only the upcoming events. But some or all of the demo events may have already ended by the time you purchased the theme and are doing the import. The demo data may not be kept up to date with current demo site. The solution is to simply change the start/end dates for each event post you want to display on your site.

Front Page

You will need to set your front page and news page under Settings / Reading.

Menu Links

You may notice that some of the menu links won't work because they were saved as absolute URL. To make them work, either edit them manually under Appearance / Menus, or use a plugin to change them to the correct URL. Basically you need to change "http://localhost/wordpress/townpress-content" to your site's URL.

Menus and Widgets

Due to some limitations of the importing functionality, some sidebars and menus may not be set properly after the import. Just go to Appearance / Widget to configure your sidebars (for example you may want to set the menu of TownPress Menu widget to "Main Menu" in the Default Left Sidebar).

Post-Installation Setup

General Settings

Your first post-installation steps should head into Settings / General.

Time Zone, Date Format and Time Format settings will be used to display date info for all post types (including event start and end dates), so make sure they are set correctly based on your locale.

Permalinks Settings

Now head to Settings / Permalinks and change Common Settings to Post name. You can also change URL slugs for all LSVR custom post types and their taxonomies below if needed.

Front Page / Blog Page

If you've imported the demo content, head to Settings / Reading and choose which pages should be used as your Front page and Posts page. If you haven't imported the demo content, then don't forget to come back to this option once you create your front page and blog pages. More info.

Managing Menus

If you already have some pages / posts on your site (for example via importing demo content), you should check out Appearance / Menus to manage your site's menus.

Media Settings

Head to Settings / Media and change the settings to the following values:

• Thumbnail size - 300x300 (crop enabled)
• Medium size - 600x600
• Large size - 1024x1024

If you already have some images on your site, use a 3rd party plugin to regenerate new image sizes based on the settings above.

Google Maps API Key

If you are going to use the Directory or Events functionalities via bundled LSVR plugins, or a header map, you will need a Google API Key for Google Maps to work. Here is more info on how to obtain your API key (double check the allowed domain of your API key to match your site domain, since this is the most common issue preventing Google Maps from working).

Once you have the API key, insert it under Appearance / Customize / Google Maps.

OpenWeatherMap.org API Key

If you are going to use the TownPress Weather widget, you will need a OpenWeatherMap.org API Key, which you can insert under Appearance / Customize / Misc.

Typography

If your site is running in a language other than English, you should check out Appearance / Customize / Typography and set the Font Subsets option accordingly. Please note that not all font families support all font subsets.

You may also notice that not all Google Fonts are available - we handpicked only the most popular ones. If you need to use font which is not available, disable Google Fonts (uncheck Enable Google Fonts option) and use some 3rd party plugin instead.

Front Page

The following tutorial assumes that you want to create a front page similar to the "classic home" from the demo. The preferred way to create a front page is using the WPBakery Page Builder for WordPress (formerly Visual Composer), which is bundled with the theme, so make sure it's installed and active.

1. Create a new page under Pages, or edit an existing one.
2. Type the title. Note how this demo home page title contains some basic HTML tags.
3. Set its page template to Not Boxed and then click on the Backend Editor button above content editor (it is possible that your page builder interface is enabled by default and you don't have to click on this button).

   

   1. Insert title
   2. Set page template to "Not Boxed"
   3. Click on "Backend Editor" button (only if the page builder is not enabled by default)

4. If you see the page builder interface, click on Add Element button to display modal window with all available elements.

   

   1. Click on "Add Element" button

5. The page builder comes with many default elements, but we are interested only in custom TownPress elements for this tutorial. You can recognize them simply by their name - it starts with "TownPress".
6. Now we will insert the TownPress Sitemap element, but first, we need to do some preparations. This element requires a standard menu to work, so if you haven't done so already, go to Appearance / Menus and create a standard menu. Once the menu is created, you may need to refresh your page so the new menu appears in the Townpress Sitemap element settings. Simply save your work by clicking on Publish or Update and then refresh your browser. Then you can insert the TownPress Sitemap element from the modal window.

   

   1. Select TownPress Sitemap element

7. After you select the element, you will see a new modal window with all of its settings. For the demo look, set Icon to "icon-road-sign" (check out the list of all available icons here) and Number Of Columns to "3".

   

   1. Configure element's settings
   2. Don't forget to scroll down to see all available options
   3. Click on "Save changes" button

8. Now we will insert the TownPress Posts element. Click on the "plus" button right after TownPress Sitemap element.

   

   1. Click on the "plus" button right after an existing element to add a new element.
9. Set Icon to "icon-reading", Featured Limit to "1", configure all other settings as you need and save your changes.
10. Once you are done, save your page and set it as your front page under Settings / Reading.

Menus

Menus can be managed under Appearance / Menus. This theme contains three static menu locations - Header Menu, Header Mobile Menu and Footer Menu. You can also put a menu into your sidebar using TownPress Menu widget under Appearance / Widgets. More info about managing your menus can be found in the WordPress Codex.

Since this may be a bit overwhelming at first, let's take a better look on how to recreate a main menu sytem from the demo.

1. Select an exiting menu or create new
2. Choose which post types and taxonomies will be available in the left sidebar
3. Insert a recognizable name
4. Add items to your menu
5. Select menu location. Since we are not using a regular header menu, select just "Header Mobile Menu"
6. Save your menu

Right now we have just a mobile menu which will be displayed only on mobile devices. If you want to display the same menu in a header for desktop devices as well, then select the "Header Menu" location too. However, in our demo we are using the sidebar menu instead. So let's head to Appearance / Widgets and insert TownPress Menu widget into Default Left Sidebar (or any sidebar where you want to put this menu).

1. Select your menu
2. Since we are using a dedicated mobile menu which contains the same items as this side menu, there is no need for this side menu to be displayed on mobile devices too
3. Save your settings

Header Mega Menu

To display the submenu of a header menu as a megamenu, insert "lsvr-megamenu" into the CSS Classes field. This will work only for top level items and only if the menu's location is set to Header Menu.

1. Show Screen Options
2. Make sure CSS Classes option is checked
3. Add "lsvr-megamenu" into CSS Classes field
4. Save the menu

Sidebars & Widgets

Sidebars can be managed under Appearance / Widgets. By default there are three sidebars - Default Left Sidebar, Default Right Sidebar and Footer Widgets which, as the name implies, contain widgets displayed in the footer of the site.

You can create additional sidebars under Appearance / Customize / Custom Sidebars.

Footer Widgets

Widgets placed into the Footer Widgets sidebar will be automatically displayed in the site footer. You can change the number of columns under Appearance / Customize / Footer with the Widget Columns option.

Left and Right Sidebar Widgets

You can assign left and right sidebar to any standard page using Left Sidebar and Right Sidebar options in Sidebar Settings metabox.

1. Choose the left sidebar
2. Choose the right sidebar
3. Save page

But what if you want to assign a sidebar to a post archive or post detail? Since those are not standard pages, there is a different approach to this. Sidebars for posts are managed under Appearance / Customize. Every post type has its own customizer section - Standard Posts, Notices, Directory, Events, Galleries, Documents and People. Each of those sections contains Archive Left Sidebar, Archive Right Sidebar, Detail Left Sidebar and Detail Right Sidebar options to manage the post type's sidebars. Please note that this only apply to standard (blog) posts and LSVR post types.

Colors

Theme colors can be managed under Appearance / Customize / Colors. You can either choose from predefined color schemes, pick your custom colors or create your own color scheme. The difference between Custom Colors and Custom Scheme is that the latter is much more involved and requires some coding. On the other hand, it gives you more freedom and it is the recommended way for customizing theme's colors.

Since the Predefined Scheme and Custom Colors options should be pretty much self-explanatory, let's describe the process of creating your own custom color scheme.

1. Open default color scheme .scss file. It should open directly in your browser, but some browsers may download it on your disk instead.
2. Copy all the code from that file to any text editor. If your browser downloaded your file, open that file in the text editor. You can use for example Notepad++ for Windows or Brackets for Mac, but any basic text editor (for example Windows Notepad) should do.
3. Make your changes. Basically you just need to change color variables at the top of the file. The most important is the $accent1 variable on line 28. By default, it look like this:

   $accent1: #ec5237; // primary accent color
   

   There are many online tools where you can generate a hex code for your color, for example colorpicker.com. Just change #xxxxxx to the hex code of your custom color (don't forget that it has to start with the # sign). Feel free to change values of other color variables in the file as well.

4. Once you've made your changes, copy the whole code and paste it to the left column on sassmeister.com (SCSS). Please note that any typo in your syntax may lead to an error.
5. Copy the generated code from the right column.
6. Make sure the child theme is active under Appearance / Themes.
7. Go to Appearance / Editor, set Select theme to edit: to TownPress Child and paste your generated CSS after the "/* Add your custom css after this comment */" comment.

   

   1. Make sure TownPress Child theme is selected
   2. Select the stylesheet file
   3. Put your CSS here
   4. Save the file
8. Last step: go to Appearance / Customizer / Colors, switch Set Colors By option to Custom Scheme and save.

Translation

If you are going to use this theme in any language other then English, you will need to translate it. The important part is that you need to translate the theme and all LSVR plugins you are using. Most of the translatable text is part of the admin area, so if you plan to translate only the front-end, there won't be that much text to translate.

There are two general approaches to translation. You can either use a 3rd party plugin, or do it the old-fashioned way via the Poedit software. If you prefer the plugin approach, check out their respective documentations on how to do that. We will describe the manual process of translation via Poedit.

Before we begin, download and install Poedit to your computer.

Theme Translation

1. Make copy of the townpress.pot file from the theme's languages folder. You can either just unzip the townpress.zip file (which you got from full package) on your local computer and find the .pot file there, or you can use FTP to access your WP installation and copy the .pot file from the wp-content/themes/townpress/languages folder.
2. Paste the file anywhere on your computer and rename it to townpress-xx_YY.po. "xx" stands for your language code and YY for country code (for example "townpress-de_DE.po" for German). Notice how the file extension changed from ".pot" to ".po".
3. Open your .po file in Poedit, make your changes and save the file. This will create a new file - townpress-xx_YY.mo.
4. Copy both townpress-xx_YY.po and townpress-xx_YY.mo to your WP installation under wp-content/languages/themes and that's it.

Plugins Translation

The whole process is very similar to theme translation, you just need to do it separately for each plugin. Let's translate the LSVR Events plugin for example (but it is the same for all LSVR plugins).

1. Make copy of the lsvr-events.pot file from the LSVR Events plugin languages folder. You can either just unzip the lsvr-events.zip file from the Plugins folder (which you can find in full package) on your local computer and find the .pot file there, or you can use FTP to access your WP installation and copy the .pot file from wp-content/plugins/lsvr-events/languages folder.
2. Paste the file anywhere on your computer and rename it to lsvr-events-xx_YY.po. "xx" stands for your language code and YY for country code (for example "lsvr-events-de_DE.po" for German). Notice how the file extension changed from ".pot" to ".po".
3. Open your .po file in Poedit, make your changes and save the file. This will create a new file - lsvr-events-xx_YY.mo.
4. Copy both lsvr-events-xx_YY.po and lsvr-events-xx_YY.mo to your WP installation under wp-content/languages/plugins and that's it.

Notice

• Default notices URL is yoursite.com/notices. You can change it under Settings / Permalinks.
• You can manage your notice posts under Notices.
• Global notices settings can be changed under Appearance / Customize / Notices.
• This post type comes with several custom widgets which you can find under Appearance / Widgets.

Directory Listing

• Default directory URL is yoursite.com/directory. You can change it under Settings / Permalinks.
• You can manage your listing posts under Directory.
• The settings of a particular listing can be edited via the Listing Settings panel located under the content editor.
• Featured Image of the listing will be used as a map thumbnail.
• You can add images to your listing via the Listing Gallery panel located in the right sidebard under the Featured Image panel. Please note that due to the nature of this gallery (wide carousel at the top), you should upload at least five images for optimal appearance. If you have fewer images, you should insert them via default WordPress gallery instead, just don't forget to set the Link To option to Media File in the Gallery Settings modal for lightbox to work correctly in that case.
• Add schema.org metadata via the Listing Metadata panel located under Listing Settings.
• Global directory settings can be changed under Appearance / Customize / Directory.
• This post type comes with several custom widgets which you can find under Appearance / Widgets.

Event

• Default events URL is yoursite.com/events. You can change it under Settings / Permalinks.
• You can manage your event posts under Events.
• The settings of a particular event can be edited via the Event Settings panel located under the content editor.
• Global events settings can be changed under Appearance / Customize / Events.
• This post type comes with several custom widgets which you can find under Appearance / Widgets.

Gallery

• Default galleries URL is yoursite.com/galleries. You can change it under Settings / Permalinks.
• You can manage your gallery posts under Galleries.
• You can add images to your gallery via the Gallery Images panel located on the right under the Featured Image panel.
• Global galleries settings can be changed under Appearance / Customize / Galleries.
• This post type comes with several custom widgets which you can find under Appearance / Widgets.

Document

• Default documents URL is yoursite.com/documents. You can change it under Settings / Permalinks.
• You can manage your document posts under Documents.
• Each document post can contain multiple file attachments which can be added via the Document Settings panel located under the content editor.
• If all your document posts contain only attachments and no real text content, you may want to switch your document archive layout to Attachment View under Appearance / Customize / Documents.
• Global documents settings can be changed under Appearance / Customize / Documents.
• This post type comes with several custom widgets which you can find under Appearance / Widgets.

Person

• Default people URL is yoursite.com/people. You can change it under Settings / Permalinks.
• You can manage your person posts under People.
• Global people settings can be changed under Appearance / Customize / People.
• This post type comes with several custom widgets which you can find under Appearance / Widgets.

Icon

This shortcode displays a simple icon.

[lsvr_townpress_icon
icon="icon-check"
id="my_unique_id"]

icon

Icon to display. Check out the list of icons.

id

Unique ID which can be used for applying custom CSS to this element.

TownPress Posts

This shortcode displays standard (blog) posts.

[lsvr_townpress_posts
title="Latest News"
icon="icon-reading"
category="123"
limit="8"
featured_limit="1"
more_label="More News"
id="my_unique_id"]

title

Element title.

icon

Element icon. Check out the list of icons.

category

Category ID or slug to pull posts from.

limit

Number of posts to display.

featured_limit

How many posts will be displayed as featured - with excerpt and featured image.

more_label

Label for a "More" link which links to a post / category archive.

id

Unique ID which can be used for applying custom CSS to this element.

TownPress Post Slider

This shortcode displays standard (blog) posts as a slider.

[lsvr_townpress_post_slider
category="123"
limit="8"
align="left"
show_excerpt="true"
autoplay="5"
overlay_opacity="90"
id="my_unique_id"]

category

Category ID or slug to pull posts from.

limit

Number of posts to display.

align

Alignment of slide content.

show_excerpt

Display post excerpt.

autoplay

Time between slide change in seconds. Set to 0 to disable autoplay.

overlay_opacity

Opacity of overlay element. Set to 0 to make it completely transparent.

id

Unique ID which can be used for applying custom CSS to this element.

TownPress Sidebar

This shortcode displays a sidebar. Sidebars can be managed under Appearance / Widgets.

[lsvr_townpress_sidebar
sidebar_id="123"
columns_count="4"
id="my_unique_id"]

sidebar_id

ID of the sidebar which will be used. It is lsvr-townpress-default-sidebar-left for the Default Left Sidebar, lsvr-townpress-default-sidebar-right for the Default Right Sidebar and lsvr-townpress-footer-widgets for Footer Widgets. For custom sidebars it is lsvr-townpress-custom-sidebar-X where X stands for the sidebar number. You will get this custom sidebar number by visiting Appearance / Customizer / Custom Sidebars and mousing over the "sidebar remove" button for a few seconds. Omit the # sign, so the final custom sidebar ID should look like lsvr-townpress-custom-sidebar-3 for example.

columns_count

How many columns will be used to divide widgets.

id

Unique ID which can be used for applying custom CSS to this element.

TownPress Sitemap

This shortcode displays a custom menu. Menu can be created under the Appearance / Menus.

[lsvr_townpress_sitemap
menu_id="123"
columns_count="4"
id="my_unique_id"]

menu_id

ID of the menu which will be used. To get the menu ID, head to Appearance / Menus, switch to your menu and copy the value of the "menu" attribute from the page URL

columns_count

How many columns will be used to divide the sitemap.

id

Unique ID which can be used for applying custom CSS to this element.