NewArt

Theme Documentation

---

Created:20.11.2014

By: Vergo

Support*: Vergo’s Profile Page

Web: www.vergo.me

---

---

 

 

Theme Instalation – top

Installation via WP Dashboard:

1. Unzip the main (downloaded) file – to get newart.zip file.
2. Go to Appearance >Themes,
3. click on “Add New” > and “Upload theme”,
4. click on ‘Browse’ and find newart.zip file on your computer and press Install Now,
5. After that activate theme,
6. Go to NewArt admin panel and setup theme.

 

Installation via FTP:

1. Unzip the Main downloaded package – twice – to get main theme folder ‘newart’,
2. Using FTP client (e.g. Filezila) upload ‘newart’ folder into themes folder in your WordPress installation ( YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/” ),
3. Go to Appearance >Themes, find Final theme and activate it,
4. Go to NewArt admin panel and setup theme.

 

NOTE! It is possible that after theme activation are images wrong cropped and looks 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!

Default Setup – top

Right after the installation go to NewArt admin panel

and hit “Save All Changes” button to set default style settings:

 

 

Homepage Setup – top

 

1. In Pages section create new page called ‘Home’
2. select ‘Builder’ template and save page,
3. Go into Settings > Reading and set created ‘Home’ page as Static page – Front page,
4. Empty homepage is created now! In next steps we’ll create homepage content using ‘Page Builder’.

Page Builder

1. Go to Apperance > Page Builder
2. Create new Template with and name it; e.g. ‘Home content’ and save template
3. Then you can build you own layout using Drag & Drop.
4. Just drag ‘Available Blocks’ into template section (more in ‘Builder Blocks‘ chapter + in ‘Blocks Screenshots‘ chapter are screenshots of these blocks)
5. If you are finished click on “Save Template” button!
6. Go to ‘Home’ page created in previous steps and using ‘Add Template’ button insert created ‘Home Content’ template:
7. After insert save the page!

Builder Blocks

1. Important!Into ‘Text & Divider*’ block is possible to add any HTML code; e.g. ‘Revolution Slider’ shortcode, ‘Contact form’ shortcode, ‘Google map’ iframe code etc.
2. Don’t forget to disable ‘wpautop’ and adjust (or remove) padding!

– For some blocks is possible to add background color, text color (for titles) and/or item color.

– ‘Blog posts’ block –
displays classic wp posts.

– ‘Portfolio’ blocks –
displays ‘Portfolio’ posts (custom post type).

– ‘Slider’ block –
displays ‘Slider’ posts (custom post type).

– ‘Services’ block –
displays ‘Services’ posts (custom post type).

– ‘Info’ block –
displays ‘Info’ posts (custom post type).

– ‘Staff & Testimonials’ block –
displays ‘Clients & Testimonials’ posts (custom post type).

1. All custom post types, mentioned in previous step, can be created in dashboard menu:

Blocks Screenshots

1. Portfolio Classic block – displays ‘portfolio’ posts (in 2 or 3 columns layout):
2. Portfolio Masonry block – displays ‘portfolio’ posts:
3. Blog Posts block – displays classic wordpress posts:
4. Services – displays ‘Services’ custom post type (in 2 or 3 columns layout)
5. Info Posts block – displays ‘Info’ custom post type
6. Staff & Testimonials block – displays ‘Staff & Testimonials’ custom post type and 2 layouts are available for this block (‘Pick type of block’ block option):Staff layout:Testimonials layout:

   

7. Slider – Flex block – displays ‘Slider’ custom posts type. 2 layouts are available for this blockClassic slider:“Feature” slider (tick ‘Enable “Feature” layout’ in block options):
8. Text & Divider* blocka) you can set background image for this block and add some text content:b) you can use this block as map section:

   

   

   c) you can add shortcodes into this section (Revolution slider, Contact form 7 etc.):

   

9. Social Icons blocks- Social icons needs to be set in NewArt admin panel– you can add ‘Contact Form’ shortcode into this section too

1. ‘Column’ blocks are important blocks to create basic page layout:
2. You can create two columns combination:or 1/3 and 2/3

Blog Template

If you want to create ‘Blog’ page:

1. create empty page (Default template),
2. name it ‘Blog’,
3. in Settings > Reading set this page as Post page

If you want to use ‘Blog’ on the front page use default setting in Settings > Reading

Theme Setup – Admin panel – top

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

General Settings:

1. If you want to upload your Main logo image – use bigger image (eg. 380x65px),
2. Upload favicon,
3. Paste Analytics Tracking Code.

General Layout & Archives:

1. Enable classic (grid) gallery as slider,
2. Select layout for portfolio archives – to match portfolio page styling,
3. Enter full URL of created portfolio page (http:// including)
4. Add “header” image for portfolio archives
5. Enter full URL of created blog page (http:// including)
6. Set ‘header’ image for blog pages
7. Limit categories (menu items) in blog menu
8. Set ‘header’ image for shop pages (if Woocommerce plugin is used)

 

 

Primary styling:

1. Choose Font family with color, style and weight,
2. Choose colors for typographic elements: body text/links, navigation BG and links, hovers etc.).

 

Header styling and settings:

1. Choose Font family with color, style and weight,
2. Choose colors for typographic elements: header text/links, navigation links, hovers etc.),
3. Set type of header (Classic, Transparent, Left or Right)
4. Set vertical margins for logo
5. Set width limitation for logo
6. Add/type ‘Topnav’ text
7. Disable ‘Topnav’ section

 

Footer nad Topnav styling:

1. Choose Font family with color, style and weight,
2. Choose colors for typographic elements: footer and topnav text/links, hovers, borders etc.),

 

Other Styling:

1. Choose bg color for elements,
2. Select text/link color for elements,
3. Enable/disable ‘uppercase fonts’ for headigs and navigation

 

Headings Typography:

1. Select Font-size for all headings (h1- h5),
2. Select Font-family for all headings (h1- h5),
3. Select font weight for all headings (h1- h5),
4. Select font color for all headings (h1- h5).

 

Post Settings:

1. Turn On/Off partial post sections.

Social Networks Settings:

1. Enter the full URL of social network, your profile or account. Enter full URL (http://.. including).

Custom Footer:

1. Enable custom footer and enter some text.

 

If you are finished click on “Save changes” button!

 

 

Custom Templates – top

Custom Templates:

1. Create a page by going to Page > Add New.
2. In Page Attributes section select custom page template (Portfolio Masonry,Portfolio, Redirect etc.),
3. for ‘Portfolio’ templates can be ‘Header image’ set (Set featured image)
4. Click the Publish button to publish your page.

 

Custom Widgets – top

Theme comes with few custom widgets (marked as – Vergo). Widgets are very easy to setup. Just follow and set partial widgets fields.

Note! You need to get “consumer and secret” codes for ‘Vergo – Recent Tweets’ widget:

1. Go to https://dev.twitter.com/apps/new and log in, if necessary
2. Enter your Application Name, Description and your website address. You can leave the callback URL empty.
3. Accept the TOS, and solve the CAPTCHA.
4. Submit the form by clicking the Create your Twitter Application
5. Copy the consumer key (API key) and consumer secret from the screen into widget fields

 

Images – top

NOTE! It is possible that after theme activating are images wrong cropped and looks 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!

Featured Images:

1. It is easy! Images and thumbnails are generating automatically. To display thumbnails correctly upload images via WP interface,
2. then use “Set featured image”
   button to set featured image.

Images – Minimal Sizes

1. Background images in Text & Divider block (in page builder): 1920x1300px
2. Background images in portfolio / blog pages (header images): 1920x500px
3. Featured images in ‘Portfolio’ post: 1140x650px,
4. Featured images in ‘Classic’ wp posts: 786x340px,
5. Background images in ‘Staff & Testimonials’ posts: 278x278px
6. Images in ‘Info’ posts: 450x450px
7. Images in Flex slider (Slider posts): 1920x900px images
8. Images in Flex slider (when “Feature” layout is enabled): 800x500px images

Galleries – Native (grid) vs Slider gallery:

1. If you want to create post with gallery, you need to create classic wp gallery
2. Classic wp gallery is in grid layout with lightbox image preview (select ‘link to media file’).
3. You can enable Gallery slider in Photolic admin panel > General layout.

Post Formats – top

Theme comes with these posts formats:

Standard post

Default (native) WordPress post.

Video post

Check ‘Video’ post in the Format tab and enter video embed code (iframe) into Video field:

Audio post

Check ‘Audio’ post in the Format tab and enter audio embed code (iframe) into Audio field:

Gallery post

Check ‘Gallery’ post in the Format tab and create wp gallery (see: images section)

Link post

Check ‘Link’ post in the Format tab and ads URL into Link field.

Shortcodes Generator – top

After theme activation will be following notice visible in wp dashboard:

Click on ‘Begin activating plugin’ link and install and activate Shortcodes Ultimate plugin.

Then you can create different shortcodes using ‘Insert shortcode’ button in Post/Page screens:

After plugin activation will be visible following notice; you can ignore this message:

Menu & Theme Icons : – top

 

Big menu (Megamenu)

1. Go to Appearance > Menus and create new custom menu,
2. save this menu for ‘Main Menu’ location.
3. In ‘Screen options’ allow ‘CSS Classes’
4. From left tab add new menu items (Pages, Categories or Links).
5. for parent menu item, create 4 submenu items
6. for each submenu item add another submenu (2nd submenu).
7. Toggle parent menu item and into ‘CSS Classes’ field type ‘ bigmenu ‘

Menu Icons (like in demo)

 

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

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

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

3. All Fontello icon names are HERE

 

4. You can see how-to video here. It is not tutorial for my theme but the process is the same.

 

 

Font Icons in ‘Services’

In ‘Services’ post add icon name into field. Add just the name (no matter if Font Awesome or Fontello)

 

Font Awesome – Update (optional)

1. Download latest Font Awesome package.

2. In downloaded file is ‘font’ folder with 4 font files (.eot, .svg, .ttf, .woff)

3. Upload all these font files into ‘fonts’ folder (located in main theme folder) on your server.

4. Upload css files (font stylesheets) to ‘styles’ folder on your server.

 

Adding New Fonts: – top

 

Google Webfonts

1. in ‘admin-interface.php’ file (functions folder) find ‘Font Face’ section

2. add your font (follow previous font lines).

Three new lines in this file are necessary:

$font72.....  
...
if (strpos.....      
...
$output .= ' < option.....

Backup your files!

 

@font-face

1. generate web fonts http://www.fontsquirrel.com/tools/webfont-generator

2. upload font files into ‘fonts’ folder and add font face code into your style.css

3. add font face code into your style.css

e.g.

@font-face {
	font-family: 'CartoGothicStdBook';
	src: url('fonts/CartoGothicStd-Book-webfont.eot');
	src: url('fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'),
	url('fonts/CartoGothicStd-Book-webfont.woff') format('woff'),
	url('fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'),
	url('fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg');
	font-weight: normal;
	font-style: normal; }

Then repead steps 2. 3. in prevous ‘Google Webfonts’ sub-chapter.

Backup your files!

 

Plugins: – top

 

Revolution slider

Unzip main theme package (downloaded from http://themeforest.net/downloads).

In this theme package is ‘RevolutionSlider’ folder, where is located revslider.zip = package to install.

1. Go to Plugins > Add New (in left dashboard menu)
2. Click on ‘Upload’ link
3. Using ‘Browse’ button find revslider.zip on your computer.
4. Install and activate Revolution slider plugin
5. Use plugin documentation to create your own Revolution slider.Go to ‘Documentation-RevolutionSlider’ folder in theme package and click on index.html to open plugin documentation.
6. NOTE! Use ‘Text & Divider’ block in Page builder to output created rev slider:
7. FYI: exported sliders (.zip files) from NewArt demo pages are located in ‘ …RevolutionSlider/example-zips/newart-theme-related’ folder

Simple Share Buttons Adder

Theme is ‘Simple Share Buttons Adder’ Plugin ready: Plugin Homepage

In search field (Plugins > Add New) insert ‘Simple Share Buttons Adder’ and Install this plugin

Plugin can be set its screen in Settings > Share buttons

Contact Form 7

Theme is ‘Contact Form 7’ Plugin ready: Plugin Homepage

In search field (Plugins > Add New) insert ‘Video Thumbnails’ and Install this plugin

Plugin can be set in its screen

You can insert created ‘contact’ shortcode into Divider or Social Networks block (in Page Builder) and into any calssic page/post.

Video Thumbnails

You can easily create thumbnails from video posts with ‘Video Thumbnails’ Plugin: Plugin Homepage

In search field (Plugins > Add New) insert ‘Video Thumbnails’ and Install this plugin

Plugin can be set in Settings > Video Thumbnails:

Into ‘Custom field’ option insert ‘vergo_video‘ for portfolio posts or ‘vrg_video‘ for classic posts, one of these should work.

 

Note: Video thumbnail can be generated after post saving (when video iframe code is entered in posts ‘Video field’).

 

 

Dummy Content (XML files) – top

In main theme package (downloaded from http://themeforest.net/downloads) is XML file..

Go to Tools > Import; install and activate ‘WordPress Importer’ plugin, then you can import XML file.

Check “Download and import file attachments” option.

XML file is bit bigger and sometimes needs to be imported more times (until ‘Have Fun’ message is shown).

After XML file import:

– set Home page (with ‘Builder’ template) as front page;

– save imported custom menus for ‘Menu loactions’;

– set featured categories for blocks in Page builder;

– import Revolution sliders (pack) – more info in plugin documetation

Translation – top

This theme is translation/localization ready and comes with vergo.po file. File is located in ‘lang’ folder.

1. You need to use localized WordPress installation (core): WordPress in Your Language.
   If not localization will be not successful.
2. Download poedit software here,
3. Install it and in this software translate vergo.po file (line by line) screens,
4. Once you have translated all the strings, you can save this as your .po file.The filename of your .po is crucial. Gettext uses the ISO 639 standard for language abbreviations and ISO 3166 for locales. If your translation is written in American English for example, your file name will look like en_US.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.

5. 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