Blog

Use MegaMenu Widget with its Plugin

Mega menu is something that enhances your menu bar i.e. navigation bar´s effect visually. It looks and works awesome.

Want to display so many pages and categories in your menu ? We have a MegaMenu for you.

Hover over Theme Features or Shop menu item to see the mega menu in action.

If you´re new to WordPress and website management in general you might be confused when someone says something like ´Overwrite xxxx.php in your /library/functions folder and xxxx.css in your /skins folder´. What we mean by that is that you need to connect to your site using an FTP client, navigate to the mentioned folder and overwrite (more on how to do this later).
Sometimes we say things like ´You need to make changes inside xxxx.php located in your theme root around line 100´. What we mean by that is that you need to connect to your site, navigate to that file, download it to your hard drive, edit it and upload it back. Sounds tricky – but it´s far from it.

To successfully connect to your server you´ll need 2 things:

1. FTP client
FTP client is a program you will use to connect to your server. We´ll be using FileZilla during this tutorial. You can download it here
2. FTP account
Most people get an FTP account from their hosting provider. In case you didn´t receive one or you forgot the information contact your hosting provider or create one yourself. In case you´re using cPanel follow this tutorial. If you´re using Plesk as a server management software following this tutorial

Connecting to your server

1. Open FileZilla

2. Enter your FTP account details in the boxes at the top left corner. In most cases you can leave ´Port´ empty

3. If you entered everything correctly the panel on the right should populate with some folders and files. The left panel is showing your hard-disk files

How to find my theme files?

In the right panel find a public_html folder (or htdocs on Windows servers). Open that folder. If you installed WordPress in the root folder of your site you should see three folders called wp-admin, wp-content and wp-includes. All theme files are located in the wp-content folder; more specifically, the themes folder inside wp-content. A lot of times you´ll hear us say the term theme root. Theme root means you need to navigate to the first/parent folder of your theme. The path will be something like public_html/wp-content/themes/your_theme_name

How to install a theme?

Installing themes using FTP is really easy – drag-n-drop easy. Unpack* your theme on your hard drive and navigate to it in the left (hard drive) panel. In the right (server) panel navigate to wp-content/themes. Now just drag your theme folder from the left to the themes folder on the right. When the files finish uploading go to your site Dashboard -> Appearance -> Themes and activate your theme. Piece of cake, right 🙂

* – make sure you don´t extract the theme in a folder, use ´Extract Here´ so you don´t create a double folder problem.

For optimal viewing experience watch the video in Full Screen and HD quality

How to update a theme?

For detailed instructions on updating themes please read the following article. For video instructions on updating start watching the video tutorial above around the 4 minute mark.

How to overwrite a file?

To overwrite one of the theme files navigate to the folder where the file is located and just drag the file from your left (hard disk) panel to your right panel. When you do that you´ll be prompted to overwrite – click yes.

How to edit a file?

In case you want to edit one of the files navigate to it in your right (server) panel, right mouse click on the file and select View/Edit. When you do that the file will open in your default text editor. Edit the file in your text editor and when done hit Save. As soon as you hit Save a popup will appear in FileZilla asking you whether you want that file uploaded back to the server- be sure to click Yes.

How to change file/folder permissions?

In the right Filezilla panel (the server panel) right click on a file or folder and choose ´File permissions…´. Inside the new window set the permissions either by clicking on the checkboxes or by entering the exact numerical value. Recommended permissions for files are 644, for folders 755. Some folders (like the cache folder) often require 777 permissions.

How can I find line no. 100 if there are no line numbers in Notepad?

If you plan on doing any serious file editing you´ll need to say goodbye to Notepad. My personal preference is Notepad++. The program is very easy to use, it features line numbers and also code highlighting.

How to make FileZilla open files in Notepad++

In case FileZilla doesn´t ask you which editor you want to use to edit php, js and css files go to (in Filezila) Edit -> Settings… -> File editing -> Filetype associations and add Notepad++ as a default editor for your files. This is how that area looks in my FileZilla

If you followed this guide carefully you should now be able to (easily) navigate, edit and overwrite any file in your theme.

Theme Features

Theme Features

Mobile Friendly Design

Just as all our recent themes, it is completely responsive and will look good on virtually every device. The best way to see it in action is to visit the demo site with your smartphone or to resize your browser window while on the demo site.

Hassle-free Updates

With it you wont have to worry about updating the theme, notifications about new updates will come directly to your WordPress dashboard. What’s more, you’ll be able to perform the update right there inside the dashboard. Be careful though…updating will undo all your customization so be sure to back everything up first.

More than just a Blog theme

On top of being an awesome magazine theme, it can also be used to start a fancy online webstore. To enable that it is compatible with the free WooCommerce plugin. Digital, physical, variable products with WooCommerce you can sell pretty much anything.

Unlimited Colors

Instead of providing a couple of preset skins, it will allow you to define colors for things like buttons, titles, header, footer and so on. All of this is accomplished using the WordPress Customizer meaning you get to see your site change in real-time.

New Shortcodes

it comes with an extensive selection of shortcodes created using Twitter Bootstrap. Along with standard shortcodes such as alert boxes or icon lists you can also add tabs, galleries, tooltips, popovers and more. A full list of shortcodes is available on the it demo site

Other features

 

  • 1-click install for getting started with the theme in literally seconds
  • Fully widgetized homepage lets you control and edit almost every homepage element, even the slider!
  • Full WordPress SEO by Yoast and bbPress plugin compatibility
  • Create massive header menus using the included Mega Menu widget

 

Something about us!

For those that want to see the theme back-end in action we have the test site. Just as the name suggests, the site allows you to take a test drive of a specific theme in order to ultimately decide whether it will be right for the project or not. Each test site is valid for at least ten days, allowing you to thoroughly test each aspect/feature of the theme.

Who we are ?

We are a group of designers and developers working round the clock to make a difference with WordPress. Providing high quality, completely customizable Premium WordPress themes is what Templatic is all about. Our mission is to take WordPress to the next level with unparalleled e-commerce, directory and app themes.

What we do ?

We provide all types of themes depending on the needs and demands of our customers. From a simple blog to a e-Commerce website; we have it all! Many of our themes feature functionality not available anywhere else. Not only that, many of our themes paved the way for entire niches. Perhaps the best examples of that are GeoPlaces and iPhone App. If you have an idea for a cool WordPress theme, let us know! To view our selection of WordPress themes please visit our Theme Gallery.

[templatic_msg_box type=’success’] Resize your browser window or better yet open this demo site in your mobile device to see the responsive design in action ![/templatic_msg_box]

Our Approach

Approach to Theme Design is another aspect which sets Templatic apart from many other companies. Each theme released has been created with the potential visitor in mind. Business sites tend to have a more professional look while modern directories often display vivid colors with lots of dynamic content. All of this is reflected in our theme’s designs.

Ever Growing Community

Templatic has a truly unique support system. It’s a place where members can share their experiences, communicate with other members and request professional support from Templatic agents. The system enables those that require assistance to get it quickly and efficiently while still providing lots of content (and discussions) for those that want to be active inside the community. As a reward to those that go out of their way to help others we give out free themes to active members each month!
Templatic has a truly unique support system. It’s a place where members can share their experiences, communicate with other members and request professional support from Templatic agents. The system enables those that require assistance to get it quickly and efficiently while still providing lots of content (and discussions) for those that want to be active inside the community. As a reward to those that go out of their way to help others we give out free themes to active members each month!
Templatic has a truly unique support system. It’s a place where members can share their experiences, communicate with other members and request professional support from Templatic agents. The system enables those that require assistance to get it quickly and efficiently while still providing lots of content (and discussions) for those that want to be active inside the community. As a reward to those that go out of their way to help others we give out free themes to active members each month!

Works with the Powerful Supreme Framework

Supreme is a child theme which works on top of our Supreme parent theme which also powers our other recent themes

With 3.0 release, WordPress has introduced a new user interface to help manage navigation menus, which simply means you´ll get a new page with some tools on it to help you add, delete, and arrange links.

To utilize this feature, you must first activate it. Without activation, your menu management page will display nothing, but an error.
If it´s currently inactive, in your WordPress administration panel, go to Appearance > Menus to see the error.

How to Activate WordPress 3.0 Menu Management

Add the following code to the functions.php file of your theme.
[php]if (function_exists(“add_theme_support”)) {
add_theme_support(“menus”);
}
[/php]
While add_theme_support(“menus”); is enough to activate the Menu Management page, the additional code around this necessary line makes sure if later or earlier versions of WordPress doesn”t have this feature then it will simply do nothing and cause no error.

What the code above means:

The code above simply means if the Add Theme Support function exists, use that function to add Menus feature. If it doesn´t exist, do nothing.

Step by Step

  1. Open theme folder and find functions.php.
  2. Open functions.php using Notepad or text editor of your choice.
  3. Copy and paste the code above.
  4. File > Save functions.php

Where to place the code

If the functions.php file of your theme is messy or you don´t really know where to place the code, go to the end of functions.php and paste the code before:
[php]?>[/php]
A question mark immediately next to a right arrow marks the end of a set of codes. The last combination of question mark and right arrow in the file marks the end of the file. Normally, if you add any code right before the file ends, you´d have no problem.

This set of codes is only slightly different from what you were first given. The additional
[php]<?php[/php]
and
[php]?>[/php]
at the beginning and ending of this set of codes means start PHP and end PHP.

You may close functions.php. For the rest of this tutorial, you don´t need it. Now you´ve activated the Menu Management feature or user interface, here´s what it looks like:

Using Menu Management User Interface

If you use wp_nav_menu() in theme template files to display the menu, by default, it will list only links with a Page attached to it. But, what if you wanted to add custom external links without creating a new page just to point to it? For example, adding a Twitter link to your site´s main menu. Here´s how.

First, create a custom menu because WordPress will not allow you to add, delete, or re-arrange links without at least having one custom menu. Name your menu then save it. For this tutorial, my first custom menu is named, ´first.´

After creating the custom menu, you have several options on Menu Management page to add links. For example, you can simply check the boxes next to the Pages and Categories you want to add then click the Add to Menu button. You can also add custom links and here´s what it looks like:
Don´t forget to click the Save Menu button after adding new links.

How to Display Custom Menu

Like I mentioned before, wp_nav_menu() by default displays your list of links based on what Pages you have. It doesn´t display custom menu links. To display the custom menu wherever you want it to show up, copy and paste the following:

Replace ´first´ with the name of your menu.

What the code above means:

  • Start PHP
  • Use wp_nav_menu() to display menu
  • The custom menu I want to use is ´first.´
  • End PHP

In whichever file you´re pasting it in, save the file. Upload this file to the theme folder on your server if you´re not directly editing it through the WordPress administration panel.

I created a blank theme just for this tutorial. Here´s what it looks like for me after putting the code above in the index.php file of my blank theme.

If you right click on the page currently displaying your menu and go to View Source, you get to see what this menu looks like under the hood. Here´s what it looks like for me:
[php]<div class="menu-first-container">
<ul id="menu-first" class="menu">
<li id="menu-item-4" class="menu-item menu-item-type-custom"><a href="http://son">son</a>
<ul class="sub-menu">
<li id="menu-item-6" class="menu-item menu-item-type-custom"><a href="http://grandchild">grand child</a></li>
</ul>
</li>
<li id="menu-item-5" class="menu-item menu-item-type-custom"><a href="http://daughter">daughter</a></li>
</ul>
</div>
[/php]
Wherever you see ´first´ in the set of codes above, you know it´s there only because I named the custom menu ´first.´

Display Multiple Custom Menus

To do that, you have to first create the second menu. Here´s my second menu, which is conveniently named, ´second.´ And, I´ve added two links under the second menu.
To display the second menu, duplicate code for the first menu and change menu=first to menu=second. If you named your second menu, ´submenu,´ then change menu=first to menu=submenu. Here´s the entire code:

Differentiating Custom Menus and Customizing Them

There are several ways to differentiate and customize custom menus. The most obvious one is using different names for first and second menus. The less obvious ways are customizing container_class, container_id, and menu_class.
Under the hood, by adding menu_class=my-main-menu using the ampersand sign (&), my menu list changes from:
[php]<ul id="menu-first" class="menu">[/php]
to:
[php]<ul id="menu-first" class="my-main-menu">[/php]
As you can see, to add another customizable option to the menu, you simply use the ampersand sign, the option you´re customizing, and the value of that option, which can be any string of texts of your choosing. After you´ve added the code, save the file, refresh the web page, and check under the hood by choosing View Source to see the changes made.

For a list of options you can customize or assign values to, go to wp_nav_menu at the WordPress Codex.

This wordpress theme is Responsive

This tutorial will show how to install Templatic WordPress premium themes. Just follow the below steps.

Step 1: Login to Member Area

  • Head over to templatic.com and click on Member Login.

    • ,

  • Enter your User ID and password and click on Login.
  • Now you will be redirected to your Members Area.
  • Click on the theme name and then the download process would start. All the themes which you purchased would be listed here
  • Save the file to your Computer

Step 2: Uploading theme

  • After downloading the file, unzip it and a folder would be created with that theme name
  • Now we have to upload the theme to wp-content/themes
  • For this we will be using a FTP client like FileZilla
  • FileZilla is a free software and it can be downloaded from here
  • Now open FileZilla and your hosting provider must have provided you the FTP details. Insert those details like Host, username, password and port and click on ´Quickconnect´ or simply press Enter
  • Navigate to public_html > wp-content > themes (On the server, which is in the right hand side)
  • And in the left hand side, which is your computer, navigate to the path where you have downloaded the theme. Simply right click on the theme´s folder and click on ´Upload´. That´s it, your theme has been uploaded.

Step 3: Activating the theme

  • Now login to your WordPress Admin area and navigate to Appearance > Themes
  • Here you would be able to see the theme name and screenshot, just click on Activate.

So now your theme is activated and its also populated with some added dummy content to help you get started. If you do not want that dummy content then click on Yes Delete Please!.
So this is how you can install Templatic theme. Now go ahead and customize it according to your needs.2

Still having issues installing the theme? Watch our theme installation video tutorial:
http://www.youtube.com/watch?v=dFN95RM_jJQ

Step 4: Login to Member Area

  • Head over to templatic.com and click on Member Login.

    • ,

  • Enter your User ID and password and click on Login.
  • Now you will be redirected to your Members Area.
  • Click on the theme name and then the download process would start. All the themes which you purchased would be listed here
  • Save the file to your Computer

Step 5: Uploading theme

  • After downloading the file, unzip it and a folder would be created with that theme name
  • Now we have to upload the theme to wp-content/themes
  • For this we will be using a FTP client like FileZilla
  • FileZilla is a free software and it can be downloaded from here
  • Now open FileZilla and your hosting provider must have provided you the FTP details. Insert those details like Host, username, password and port and click on ´Quickconnect´ or simply press Enter