Skip to main content

GET ALL WORDPRESS THEMES - ONLY €59.00 (15 WordPress Pixelemu themes) Read more

First steps with WordPress theme

A. GENERAL

In start you must have a working version of WordPress already installed. For information in regard to installing the WordPress CMS, please see the WordPress Codex Installing WordPress Once you have a working of version of WordPress, you need to download All Files and Documentation and extract the downloaded zip to get various files including theme_name.zip.

Install Theme Via WordPress Dashboard

documentation

  1. Go to Appearance > Themes section
  2. Click Add New and select the Upload Theme option
  3. Choose the theme_name.zip file and press Install Now
  4. Once the theme is uploaded you need to activate it.

Install Theme Via FTP

  1. Access your hosting server using an ftp client.
  2. Go to the wp-content/themes folder of your WordPress installation
  3. Upload theme_name directory from downloaded package in wp-content/themes/.
  4. Go to WordPress Dashboard > Appearance>Themes section to activate the theme
  1. Go to Appearance>Themes section
  2. Click Begin installing plugins

    documentation

  3. Check all plugins.

    documentation

  4. Select Install and click Apply

    documentation

  5. After installation click Return to Required Plugins Installer

    documentation

  6. Check all plugins ( or skip W3 Total Cache until you set eveything on your website ).

    documentation

  7. Select Activate and click Apply

    documentation

  8. Now you should see message similar to this:

    documentation

One of the plugins recommended for the theme is Demo Content Importer - it will help you import demo content with just one click.

Please take a look at these notes before you do anything further.

  1. Run Demo Importer on a clean WordPress installation.
  2. Use Wordpress Database Reset plugin before running the importer. Go to Tools > Database Reset to reset (at least remove all default widgets which are inserted on clean Wordpress in sidebar Header)
  3. Ensure that the theme is installed & activated.
  4. Ensure that required plugins are activated.
  5. Do not refresh your browser during the operation.
  6. Do not run the Demo Import multiple times, one after the other. This will result in some duplicate content.

Go to Demo Content Importer.

documentation

If you are ready to import please click Import Demo Content.

documentation

When import will be finished you will see similar screen:

documentation

When finished installing our demo content, you can disable and delete Demo Content Importer plugin.

NOTE: While importing demo content data using one of our demo content importers plugins you can see the error: Sorry, an error occurred. Please try to import again or use the standard WordPress Importer plugin.
Please check this post for a solution.

 

Skip this point if you chosen to use plugin or manual import demo content.
  1. To install quickstart you need to have ZipArchive module enabled on your server.
  2. After install quickstart you can login to admin panel using login: admin and password: pixelemu
  3. Copy files from directory quickstart (installer.php and quickstart.zip) to your server.
  4. Type in browser address to your server and installer.php, ex. www.yourwebsite.com/installer.php
  5. Select Connect and Remove All Data, type your database host, name, user, passsword and select I have read all warnings & notices. Now you can click Run Deployment.

    documentation

  6. Click OK when you will see this warning.

    documentation

  7. Now you can change old paths to new ones. Installer will do that for you. Don't change anything, just click Run Update.

    documentation

  8. Done. Now you can enter site by clicking Test Site. You can also see install report, save permalinks or cleanup files.

    documentation

  9. To cleanup files click File Cleanup

    documentation

  10. Click OK when you will see this warning.

    documentation

  11. You will be redirected to admin panel. Now click Delete Reserved Files

    documentation

  12. Remember to delete quickstart.zip manually.

    documentation

Look for Import XML folder in unzipped package and use the XML within it.

Go to the WordPress Admin > Tools > Import and click WordPress as displayed in image below.

At 1st time you need to install WordPress importer plugin

documentation

documentation

Once installed you need to activate the plugin and run the importer.

documentation

Click the Choose File button, navigate to demo-data, then to content folder, select the content.xml file and click Upload File and Import.

documentation

After importing XML file.

  1. Assign content to an existing author or create the new one.
  2. Mark the checkbox to download and import file attachments
  3. Click Submit button

documentation

After that is done, you will have bunch of demo content.

documentation

Navigate to Appearance > Menus and use the Already Imported Menu from XML and assign it to theme location "Main Menu" from Menu Settings section below menu. After that save the menu.

documentation

You can import sliders that have you seen on our demo page. To do that navigate to Revolution Slider section and click Import Slider

documentation

Now navigate to the demo-data folder, and then the rev-slider folder and choose zip file. Finally click Import Slider.

NOTE: Choose if you would like to overwrite or append your current animations and styles. If you have made any changes to your Revolution Slider animations or styling options then we strongly recommend you choose the append option in order to maintain your custom settings and to import any included in the slider you’re importing.

documentation

Unfortunatelly WordPress does not handle the import or export of widget data natively. You need to install and activate gree plugin: Widget Importer & Exporter.
Once done, in the admin dashboard, navigate to Tools > Widget Importer & Exporter. Click the Choose File button, navigate to the demo-data folder, and then the widgets folder. Inside is the widgets.wie file. Select that file.
Finally, click Import Widgets.

documentation

Navigate to Settings > Reading and set options like that:

documentation

Do it before update:

1. Backup your website. We recommend plugin Duplicator.

2. Download the latest version of theme package theme_name.zip

3. Download the latest version of theme plugin theme_name-plugin.zip

Update theme via WordPress dashboard

1. Go to Appearance -> Themes and click on Add New
documentation

2. Click on the Upload theme button
documentation

3. You will see a form. Now you need to choose ZIP file theme_name.zip and click Install Now
documentation

4. Now click on Replace current with uploaded button.
documentation

5. Now you should see the success message
documentation

6. Go to Plugins -> Add New and click on Upload Plugin
documentation

7. You will see a form. Now you need to choose ZIP file theme_name-plugin.zip and click Install Now
documentation

8. Now click on Replace current with uploaded button.
documentation

9. Now you should see the success message
documentation

Update theme manually - optional

1. Go to wp-content/themes and upload unzipped theme folder theme_name (override all files).

2. Go to wp-content/plugins and upload unzipped theme plugin folder theme_name-plugin (override all files).


B. Get info about sidebars and widgets types

Plugin installation

  1. Download PE Theme Elements Info plugin from pixelemu.com
  2. Install and activate the plugin
  3. Refresh the browser window to see results (visible for logged with the administrator access)

Get the info now!
The small box above each widget gives you the info about sidebar name and widget type. See the example, let's find this widget.
It's placed in the Sidebar: Top2 and I should look for Type: Pe Short Info 
 
get info about sidebars and widgets types

That's all :)  Now you may check each widget location and replace its sample content with yours.
 
simple WordPress plugin to easily find widgets location, sidebars names, widgets types

Download PE Theme Elements Info plugin
 

C. PAGES

This page displays posts with FAQ post type as accordion. To create that page go to Pages > Add New. Now select template FAQ Page and click Update/Publish

documentation

documentation

This page displays contact page. To create that page go to Pages > Add New. Now select template Contact Page and click Update/Publish.

documentation

documentation

This page displays your text in Left-Content-Right layout. To create that page go to Pages > Add New. Now select template Left-Content-Right and click Update/Publish

documentation

documentation

This page displays your text in Left-Right-Content layout. To create that page go to Pages > Add New. Now select template Left-Right-Content and click Update/Publish

documentation

documentation

This page displays your text in Left-Content layout. To create that page go to Pages > Add New. Now select template Left-Content and click Update/Publish

documentation

documentation

This page displays your text in Content-Left-Right layout. To create that page go to Pages > Add New. Now select template Content-Left-Right and click Update/Publish

documentation

documentation

This page displays your text in Content-Right layout. To create that page go to Pages > Add New. Now select template Content-Right and click Update/Publish

documentation

documentation

This page displays your text in default page template in Full Width Content layout. To create that page go to Pages > Add New. Now select template Full Width Content and click Update/Publish

documentation

documentation



D. PLUGINS & WIDGETS

Very useful plugin that allow you to show/hide widgets on certain pages. These options are displayed on the bootom of all widgets.

You can choose

    1. Display widget for everyone, only logged-in or only logged-out users.
    2. Show or hide widget on pages selected below.
    3. Pages to show/hide widget.

documentation

Plugin that allows you to create nice main menu with mobile devices support.

More about configuration you can see here.

Add PE Recent Posts widget to sidebar, ex. Right Column.

documentation

You can choose here:

  1. Title: title of widget
  2. Posts Category: posts category for slides
  3. Number of items in row
  4. Number of rows
  5. Number of all items: number of posts that will be loaded in widget
  6. Readmore: show or hide readmore button
  7. Order direction: ascending or descending
  8. Ordering: date, title or most commented
  9. Navigation: Bullets or None
  10. Description Limit: number of characters to display for each post
  11. Image alignment: image position (left, right, top, bottom)
  12. Show thumbnail: yes or no
  13. Image Size: size of featured image (thumbnail, medium, large)
  14. Grid Spacing: space in pixels between items

documentation

Click Save when you are done.

More about this plugin

Add PE Easy Slider widget to sidebar Primary Widget Area.

documentation

You can choose here:

  1. Title: title of widget
  2. Style: 2 styles of items arrangment
  3. Source: Posts or images folder on the server
  4. Category: posts category for slides
  5. Number of items in row
  6. Number of rows
  7. Number of all items: number of posts that will be loaded in widget
  8. Readmore: show or hide readmore button
  9. Order direction: ascending or descending
  10. Ordering: date, title or most cCommented
  11. Navigation: bullets, arrows or none
  12. Image Size: size of featured image (thumbnail, medium, large)
  13. Image height: height of one image in pixels, "0" for disable this option
  14. Grid Spacing: space in pixels between items

documentation

Click Save when you are done.

More about this plugin

Add PE Panels widget to sidebar Primary Widget Area.

documentation

You can choose here:

  1. Title: title of widget
  2. View: allow to chose panel style (tabbed or collapsed)
  3. Pages: list of pages to show in panel
  4. Posts: list of posts to show in panel
  5. Items order: current items ordering (It depends on the order of clicking)
  6. Content limit: if you want to shorten the content
  7. Show readmore: to display read more link
  8. Show date: to display creation date in selected place
  9. Show article thumbnail: display post / page image (select thumbnail size and side to display)
  10. Full width: allows re-size tab panels to full available space (only tabbed view)
  11. Responsive break point: width at which panel will turns into mobile layout
  12. First panel opened: (only for collapsed view)
  13. Multi select: allow to open more than one panel (only collapsed view)
  14. Grid Spacing: space in pixels between items

documentation

Click Save when you are done.

More about this plugin

To show Revolution Slider on your website navigate to Appearance > Widgets and add new Revolution Slider widget to sidebar Header

documentation

Now choose slider that you want and click Save

If you are using Revolutin Slider in sidebar Header please add a custom class pe-margin (remove margin for this widget).

documentation

This widget has options to show only for certain pages but for safety don't use it beacause we use plugin Display Widgets.

PS. If you have problems with paths to images in sliders follow this.

Simple plugin that allows users to use any image from your WordPress Media Library as a custom user avatar.

Navigate to Users > Your Profile and select any image you want as your avatar.

documentation

Click Update Profile when you are done.

Plugin that allows you to display widgets in posts or pages.

documentation

If you want to display widget in post, you need to copy special shortcode from widget configuration and paste in content.

documentation

Please remember to set also proper display widget settings.

Documentation: Installation and FAQ



E. ADDING CONTENT

Navigate to Posts > Add New. Enter title, category, description and click Publish.

documentation

Navigate to Pages > Add New. Enter title, description and click Publish. Optionally you can choose template.

documentation

Navigate to FAQ > Add New. Enter title, description and click Publish.

documentation



F. OTHER

All widgets have additional functionality: add custom class.

documentation

Classes are visible here in the code:

documentation

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

 Extra small devices Phones (<768px)Small devices Tablets (?768px)Medium devices Desktops (?992px)Large devices Desktops (?1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Example:

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

documentation

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

See helpful guide:
How to use bootstrap grid system with WordPress theme?

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

 Extra small devices
Phones (less than 768px)
Small devices
Tablets (768px and up)
Medium devices
Desktops (992px and up)
Large devices
Desktops (1200px and up)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

The .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

Group of classesCSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

So, for extra small ( xs ) screens for example, the available .visible-*-* classes are: .visible-xs-block , .visible-xs-inline , and .visible-xs-inline-block .

The theme comes with Shortcode Generator. It is a drag & drop tool for placing shortcodes in widgets and posts.

How it works:

Step1: Open the Shortcode Generator

When editing a post, page or widget, click on the "Add shortcode" button to open the Shortcode Generator tool:

documentation

Step2: Drag & drop a shortcode into the "Drop area"

Choose a shortcode and drag & drop the shortcode box into the "Drop area".

documentation

Step3: Enter the shortcode parameters

When you click the shortcode title in the "Drop area" you will be able to fill in the shortcode parameters. Remember to click the "Set parameters" button to apply the parameters.

documentation

Step4: Display the shortcode

Once you are done, click the "Use shortcode" button to add the shortcode into the editor:

documentation

Remember to save the post, page or widget after all.



G. WPML

You need to to purchase a recent version of WPML, including the String Translation and Translation Management modules.

  • Install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management), and then other WPML plugins.
  • Set up WPML from WPML->Languages. See WPML Getting Started Guide for complete reference, but the initial simple three-step setup is self-explanatory (choose your default language, a set of active languages, and a language selector).

To translate a page you need to go to WP Admin –> Pages and in the list you will see columns for each active language, with a pencil icon (for ‘edit translation’) or a ‘+’ icon (for ‘add translation’) next to each page.

documentation

Read this to easily duplicate your existing content.

PE Beauty Center comes with extra custom post types (Members, Testimonials, Services, FAQ) and custom taxonomies. In order to get a similar interface for translation/duplication as for posts and pages, you need to go to WPML->Translation Management, and select the tab Multilingual Content Setup.

To translate strings you need to follow the procedure for Theme and Plugin Localization. Go to WPML->Theme and Plugin Localization, and click on Scan the theme for strings and you will see translated and untranslated theme strings.



H. OPTIMIZE YOUR SITE

To optimize our theme we use plugin W3 Total Cache

documentation

The highest-rated and most complete WordPress performance plugin. Dramatically improve the speed and user experience of your site. Add browser, page, object and database caching as well as minify and content delivery network (CDN) to WordPress. See documentation.

This plugin is recommended but by default is not installed on a quickstart package.

How to speed up WordPress site - htaccess optimization, part 1

How to speed up WordPress site - images optimization, part 2.

Satisfaction guaranteed

Connect With Us

INDICO S.C.

ul. Przyjaźni 9, 84-215 Gowino, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2021 Pixelemu.com All rights reserved.