PrimoNews - A Premium Magazine WordPress Theme” Documentation by “Alex Gurghis” v1.0


“PrimoNews - A Premium Magazine WordPress Theme”

Created: 05/06/2013
By: Alex Gurghis
Email: Alex Gurghis

Informations about Updates and New Themes are always announced on Twitter and Facebook. Twitter updates are usually more up to date, Facebook updates are more detailed and easier to follow :)

Hello! First of all I would like to thank you for purchasing my theme! :)

This file will teach you how to set up and use the “PrimoNews” WordPress Theme.
This file is really extensive so you might think the theme is hard to use,
actually its not, you probably just might jump to the options page and explore everything yourself, this file is more of a reference work if you do not know what to do, or if you are not familiar to WordPress.

Have fun with your new theme! best regards
Alex Gurghis


Table of Contents

  1. Folder Structure
  2. Installation
  3. Setting up the Menus on your site
  4. Forum functionality
  5. Setup category colors
  6. Setup front-end editor
  7. Add Login/Register Ajax plugin
  8. Homepage blocks (widgetized zones)
  9. Setup sliders
  10. Setting up the Theme Options
    1. General
    2. Color
    3. background
    4. Font
    5. Top Social Icons
    6. Front End Editor
    7. Review System
    8. Contact Options
    9. 404 Error Page Options
    10. Footer
    11. Modal Window
    12. SEO
  11. Using custom Widgets
  12. Using Shortcodes
  13. Galleries
  14. Template Pages
  15. HTML Structure
  16. CSS Files and Structure
  17. JavaScript
  18. Sources and Credits

Folder Structure of PrimoNews - top

The Theme is built with WordPress best practices in mind, therefore it makes heavy use of the WordPress template engine. What exactly does that mean?

Whenever you see a php function call like this within your php files (get_header(), get_footer() or get_sidebar() ) the theme retrieves a reusable code snippet, most of the time a chunk of code that is used in many different files.

Apart from the php structure the theme uses a lot of modern CSS3 features, most notably the power of media queries to serve different layouts for different viewport sizes. If you use a modern browser (IE9 +, Chrome, Safari, Firefox) and resize your browser window you will realize that the theme adapts its size to the viewport.

 


Installation - top


Step #1

You can either choose to upload the theme to your server via ftp (only upload the unzipped folder „RedStar“ into the folder wp-content/themes/ ) or via WordPress upload function. to use the upload function of the WordPress admin panel make sure to ONLY upload the “PrimoNews” folder and not the whole archive file that you received by themeforest.

Step #2

Go to “Themes” menu and upload your theme then hit “Activate” button.



Step #3 (pass this step if you don’t want import demo data (posts, pages, portfolio posts, etc…))

Go to “Dashboard > Tools > Import > WordPress”



Hit “Install Now” button and then click on “Activate” link





And then following screen comes up:



1 – Browse for served XML dummy files

2 – Click to the button, and follow the screen below;



1 – Select user that you want to relate importing data with.

2 – Tick the “Import Attachments” check box (if you like to import provided medias. This option will take longer time to import but much better)

3 – Click on the “Submit” button.

Several minutes later (related with current network status and other things) you will see the screen below;

Important : Some reported they see only white screen, no worries! Simply once hit “F5 (refresh page)” key and everything will be alright. We believe this occurs on current server and network status, because there are media stuffs to download and import into your current installation.

And pages, posts, portfolio items etc… have to imported right now. You are ready go now, edit your widgets, change the content and more…

Setting up the Menus on your site - top

The Theme improves the WordPress 3.0 menu items with a few additional options that make it possible to create subheadings for the main menu items. To do this just enter some text into the menus description field. If you have problems pulling that off: here is a short demonstration on how its done.

Using custom Widgets - top

The Theme comes with several custom widgets that let you display latest blog posts or your latest tweets either in your sidebar or if used in conjunction with shortcodes also within your content area.


Forum functionality - top

To enable the forum functionaliy download the forum here, then install and actiavte it like any other plugin.

Before inporting the dummy content make sure you installed the bbPress Forum plugin. It's located in plugins folder! After installation go to Permalinks and click save.

Setup category colors - (Video Tutorial) - top

First step: Go to Dashboard ->Posts -> Categories. If you have categories and want to add color just edit it and in the description add the code for the color you want, ex: #ff0000. If you don't have categories, add it and add in the description the color code.


Second step. Add the category to menu and add color class to it: Go to Dashboard -> Appearance -> Menus. Add a custom link to category. In the URL copy the category address ( to get it go back to categories and on top you wil have "View Category", open the page and copy the link. Paste it in the menu and add a name. Add css class to it. the structure should be "cat-"+"category slug". If you don't have the css class input field visible click on "Screen Options" (top right corner) and check the CSS Classes option.



Setup front-end editor - top

First step: Add a new page for "Add Post" and select the "Front End - Add Post" template, publish it and save on a paper the page id.

Second step: Add a new page for "Edit Post" and select the "Front End - Edit Post" template, publish it and save on a paper the page id.

Third step: Add a new page for "View Posts" and select the "Front End - View Posts" template, publish it and save on a paper the page id.

Fourth step: Go to PrimoNews option panel -> FrontEnd-Editor, turn on the Login/register buttons and add the pages id's. Save Changes!



Add Login/Register Ajax plugin - top

To have the front end login/register you have to install "zM Ajax Login & Register". You can do it fron dashboard by seacrhing it and installing or go to it's page: http://wordpress.org/plugins/zm-ajax-login-register/ and download it.


Homepage blocks (widgetized zones) - top

The homepage is fully widgetized. It has 5 different spots (blocks): Block 1, Block 2, Block 3, Block 4, Block 5 (below you have the image with the structure). Add widgets to theme to fulfill the homepage. Check the next step for homepage sliders.



Setup sliders - top

Sliders options (below the text input field on pages):


Setting up the Theme Options - top

If you want to change the general Options of the Theme open the “RedStar” Theme Options Panel (located in your admin sidebar) and click it, you will notice several tabs with options, which we will discuss now one by one.


General - top

Here you will add the logo, favicon, google analitycs id and custom css.



Color - top

On this part you can change the color of the theme.



Background - top

Here you can setup the background.



Font - top

On this part you can change the font face and font size of the theme.



Social Icons - top

Here are the inputs links for top social icons.



Front-End Editor - top

Here you will setup the front-edn editor.



Review System - top

Here you will setup the front-edn editor.



Contact Options - top

Here are options for contact page.



404 Erro Page - top

Here are options for 404 error page.



Footer - top

Here you can add footer copyright text.



Modal Window - top

Here are the modal window options. You can turn it on/off and change links.


If you want to change the modal window content you have to open footer.php file from PrimoNews folder and go to line 124 to line 169.



SEO - top

Here you can add Meta Keywords and Meta Description.



Under Construction Page - top

Here you an configure the under construction pag. Here you can take a look on it.



Using shortcodes - top

What is a shortcode and how do i use it?


Shortcodes are small text snippets that get converted by WordPress. As an example:

Using shortcodes is very easy. To use one, create a new post (or edit an existing one), and in the the editor type a shortcode in brackets, such as:

[quote]This is a pull-quote.[/quote] 

to generate a pull-quote. Other example would be the use of shortcodes to create columns within your post:

[one_half first]Content here.[/one_half] [one_half]Content here.[/one_half] 
[one_third first]Content here.[/one_third] [one_third]Content here.[/one_third] [one_third]Content here.[/one_third] 
[one_fourth first]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] 
[one_fourth first]Content here.[/one_fourth] [three_fourth]Content here.[/three_fourth]
[one_third first]Content here.[/one_third] [two_third]Content here.[/two_third]


The theme comes with quite a few shortcodes that are easily accessible from a select drop down menu situated under the text input (post or page).

Most shortcodes require you to enter additional information and then get generated by the theme on its own, starting from columns to content slider. You can also choose to nest various shortcodes. The sky is the limit :)

Attention: Please make sure to always start new shortcodes on new lines. Most of the time you wont encounter any errors if you don't do that but unfortunately WordPress does mess up the html sometimes. This is true for all shortcodes but the inline ones like drop-caps buttons and icon links, those are the only ones that don't need a new paragraph.

In case you encounter odd behavior always make sure that all shortcodes are closed as expected. Also when trying to nest shortcodes please be aware that you cant wrap a shortcode with the same name around another one with that name: For example: [one_third first] [one_third first]Content here.[/one_third] [/one_third] would result in messed up html code since WordPress is not able to identify which opening tag belongs to which close tag. However what you can do is nest shortcodes within each other if they don't share a name. for example you could easily place a slideshow within a 3rd column tag. Just make sure to add new paragraphs between them ;)


FlexSlider - top

Here I will explain you how to use FlexSLider. From Dashboard left menu click on Flex SLider -> Add New -> Add title, on right top right side you will see a spot for Link, you can add a link or not, if you don;t want just leave it blank. Under it will see Featured Image option, add the image and click publish. To add the slider to a page just open the page and from top right corner select the slider. For best results the image should be 1120x460px


FleaturedList - top

Here I will explain you how to use FleaturedList. From Dashboard left menu click on FleaturedList -> Add New -> Add title for slide title and content sub-title. Under it will see Featured Image option, add the image and click publish. To add the slider to a page just open the page and from top right corner select the slider. For best results the image should be 1120x570px


Galleries - top

Here I will explain how to add galleries. From dashboard left side menu click on Galleries -> Add new, on right top right side you will see a spot for Link, you can add a link or not, if you don't want just leave it blank. Under it will see Featured Image option, add the image and click publish. For best results the image should'nt be smaller than 1060x442px. To add images in the gallery press Add Media button on top left corner and add images. From top right corner select thegallery post type. You can have three different fullscreen post types, one slideshow and one default with PrettyPhoto lightbox.


Team - top

Here I will explain how to use team members post type. From Dashboard left menu click on Member (Team Members) -> Add new and here in title add the name, in content add the description (sumary) and under the text field input add the Position (eg. CEO) and social media buttons. Add Featured Image for member image, for best results the image should be 450x280px.


Template Pages - top

PrimoNews comes with 18 different template pages


Here is the whole list of the pages:

  1. Default Template - Right sidebar page
  2. 404 Page - 404 custom error page
  3. Archives - Archive page with pages and last posts
  4. Contact - Contact page small map.
  5. Full Width Page
  6. Gallery 4 Col - Gallery page with four images in a row. Attach images to the page and it will display theme.
  7. page Left Sidebar

HTML Structure - top

The Theme uses valid HTML and comes with predefined classes for common elements needed in web design.
All templates share basic elements like header, footer, main, and entry so be carefull when editing those or adding/changing the CSS for those ids and classes :)


CSS Files and Structure - top

The CSS for the theme is split into various files: one that holds the basic markup for layout which is called style.css.


JavaScript - top

The theme uses advanced jQuery functions. You do not need to know how to use jQuery to activate them, almost everything is controlled by WordPress. All the function calls as well as as the custom created jQuery plugins are located in the custom.js file.


Sources and Credits - top


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

Alex Gurghis

Go To Table of Contents