Activate the theme

Activate the theme

Go to WP-admin -> Appearance -> Themes as seen on the screenshot and click the "Activate" button.

You will now be walked through the One Click Installation process. Just keep pressing Next Step button and then Finish it.

In the next step you can have a look at your site.

Ta-daa!

Ta-daa!

If you now open your site on the front end, you can see the barebones of the theme. For your convenience we have already filled it with some content, but you should learn how to add the rest of the content later in this Documentation.

Photos have been blurred/changed due to copyright reasons, please use your own images.

What is the difference between Basic and Full Demo Installations

What is the difference between Basic and Full Demo Installations

After you first activate the theme, you will be prompted with a Basic Installation that will create some content for you, but not much. If you wish to import even more content to make it look more like on our Live Preview server then you should do the Full Demo Installation. Make sure you carefully read all alerts before proceeding. Below you can see 2 screenshots, the first one is the Basic Demo Installation and the second image is the Full Demo Installation.

Basic Demo Installation - Front End

Basic Demo Installation - Front End

Full Demo Installation - Front End

Full Demo Installation - Front End

Creating your Top Navigation

Creating your Top Navigation

As you can see in the screenshot we need to create your Top Navigation

Create a Top Navigation Menu

Create a Top Navigation Menu

(1) Open Appearance -> Menus

(2) Enter your desired name for the Top Navigation

(3) Save it

Assign Your Navigation to Navigation

Assign Your Navigation to Navigation

Now we have created a navigation called Top Navigation and we need to assign it under the Navigation select.

We have also added some Menu Items (Sample Page, Uncategorized) from the left side, please do so as well.

Ta-daa!

Ta-daa!

Done. As you can see you now have your Top Navigation ready.

Theme supports Retina devices. There were several approaches on how to implement this support, but in the end we opted for the most simple one. That means you only upload 1 image. That image is automatically scaled for normal and retina devices and saved into 2 separate images and served to retina devices - also automatically. Let me give you an example:

 

In the screenshot (taken on a normal non-retina device) you can see that the image area is 980x527px in size. That means you should (but you don't have to if you don't want to support retina) upload at least double it's size, that's 1960x1054. The theme then takes your 1960x1054px image, scales it and saves it as normal.jpg(980x527) and retina.jpg(1960x1054). The uploaded image does not have to be double, it can be triple or just about any size - the bigger the better.

So the bottom line is...

Upload images in as high resolution as you can - theme takes care of the rest.

This is a basic "Sample Page" that comes with each basic WordPress installation. We will try to customize it now.

The most important option here is the "Page Template" selectbox on the right side. You can easily switch your page template from right sidebar, to left, to contact or even a wiki.

Let's start by switching the page template to "Sidebar Right" and saving. Next, let's look at the result.

As you can see the page template has changed and now shows a sidebar on the right side.

Create a page and name it for example "Contact Us". Also switch to a "Contact" page template and then fill all the other boxes like shown in the screenshot above.

Let's have a look at the front end. As you can see, we still need to add our Contact Form. Let's do it now.

Theme comes with a Contact Form 7 Plugin out of the box (if you installed the Basic content).

Navigate into the plugin tab and copy the Contact Form shortcode into your clipboard.

Paste the copied shortcode into your post content area and save it.

As you can see your new Contact Form has been added. Let's customize the form a little bit by implementing a CAPTCHA field and changing the design a little.

Click on the EDIT button so we can customize our form

Contact Form 7 plugins needs another plugin called Really Simple CAPTCHA in order to insert CAPTCHA field.

Generate the CAPTCHA tag as shows in the screenshot.

Now all we need to is to add our new Contact page into the Top Navigation menu we have created earlier in the Installation chapter.

Great, Contact menu item has been added.

Result

Result

Please now refer to the Contact Page lesson on how to add a page to your Top Navigation Menu.

Add a New Portfolio Item

Add a New Portfolio Item

Let's create a new Portfolio Item

Fill in the data

Fill in the data

Portfolio Single View

Portfolio Single View

How to get to Portfolio Category View

How to get to Portfolio Category View

Portfolio Category View

Portfolio Category View

Add your new Portfolio Category into Top Navigation Menu

Add your new Portfolio Category into Top Navigation Menu

Now let's add our new Portfolio category into the Top Navigation

Result

Result

Add Home link to your Top Navigation Menu

Add Home link to your Top Navigation Menu

Your current Home Page

Your current Home Page

By default (without Full Demo Installation), the Home Page shows a list of your blog posts.

Portfolio

Portfolio

Portfolio - Result

Portfolio - Result

Page

Page

Page - Result

Page - Result

Page + Portfolio

Page + Portfolio

Page + Portfolio : Result

Page + Portfolio : Result

How to insert a shortcode

How to insert a shortcode

Result

Result

Please always backup your files and database before updating.

You have 2 ways to update:

A) Replace the old theme folder with the new one, navigate to "Appearance -> Themes" and re-activate the theme.

B) Replace only the changed files as per our changelog: http://demo.freshface.net/file/ny/wp/wp-content/themes/newyork/changelog.txt When done, navigate to "Appearance -> Themes" and re-activate the theme.

Insert your Tracking/Analytics code here:

Insert your Tracking/Analytics code here: