1. Start
  2. Installation
  3. Demo page structure
  4. SquareGrid video tips
  5. Adding Menu
  6. Shortcode
  7. CSS Structure
  8. JavaScript
  9. Sources and Credits
  10. Support & Troubleshoot Tips


Fully Responsive Premium Theme for Portfolio and Creative

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

This documentation will teach you how to set up and use the "SquareGrid" Wordpress Theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form following into Twitter, Facebook and ThemeTON site.

If you like this theme please don't forget to rate it on the ThemeForest site.

Best regards ThemeTON.


Surely you have already installed Wordpress on your server. If you are new to wordpress and have problems installing it, you might want to check out this link:

Unzip the file you download after the purchase. The following files and folders will be in the unzipped file:


1. Via FTP client
"SquareGrid", unzip it and upload the folder to the main WordPress installation folder » wp-content » themes. Please note that if you prefer this way of installation, you have to make sure that the main files of the theme are contained just within one folder of the themes folder. The right way to locate your root theme files is for example themes/squaregrid but not themes/squaregrid/squaregrid.

2. Via the built in WordPress theme uploader (recommended)
"SquareGrid". After this you have to go in the admin panel » Appearance » Themes, click on the Install Themes tab and in this section in the top there is a link "Upload". After you click the "Upload" link, a new page will be opened where you will be asked to find the squaregrid.zip file on your local file system.

Dashboard»Appearance » Themes. In this section you should see the theme with a title SquareGrid. Just click on Activate button and your theme should get activated. 

Note: After the installation we need to check little environment configs. I've used in this theme Timthumb script. TimThumb is a simple, flexible, PHP script that resizes images. If your featured image doesn't show on your site you should check your timthumb requirements. Here is a some tips.

How to I know current theme version?

  1. You should go to the Appearance => Themes
  2. Then you can see the theme and theme version as below example image
Theme version

How can I to know is there have newer version?

  1. Lets go to the downloads link of your marketplace account menu.
  2. Then find down PressGrid theme and lets check version number from thumbnail image.
Theme version
  1. Also you can check updated date of the theme from item profile page.
Theme version

Update tips of new theme version

Usually updating a theme means replacing the old files with the new ones. You can see changelog.txt file from the new download archive and you can get updated files list as modified/added and deleted. Upload and overwrite those files on your theme directory.

If theme changed lots of files and you really hard to collect changed files, there is a better way to do it when it comes to WordPress themes.

WordPress treats two version of the same theme as different themes. That is, if you have PressGrid v1.2 and v1.3 in your wp-content/themes folder they are treated as two different themes independent of each other.

That means you can have multiple version of the same theme installed on your blog. So whenever there is a new version of your theme available, instead of replacing or deleting the files of the older version follow this procedure.

  1. Try to upload new theme archive to the site
  2. If the folder name of the new version clashes with the old version, rename the folder of new version.
  3. Upload the new version to your wp-content/themes folder via FTP or through the interface provided by your web host or by using the upload feature in WordPress.
  4. Activate the new version from your dashboard.

The main advantage of following the above procedure is you can quickly switch back to the old version of the theme if you find any problems with the new version or if it clashes with any plugins you are using.

Theme Options panel

Note: This video made on my another theme called ExtraGrid. If there has some different things, don't pay attention on those. I think most of the parts are very similar :)

Theme SEO panel

Note: This video made on my another theme called ExtraGrid. If there has some different things, don't pay attention on those. I think most of the parts are very similar :)

Demo page structure and simple explanation


SquareGrid video tips


About some updates since v1.2

Home page selecting

Adding Menu

The Theme comes with support for the new Wordpress 3.0 Menu feature. If you don’t have any experience on wordpress menu you might want to check out this link


 Appearance->Menu (1) in your backends Sidebar and add a New Menu called "Main" (2), and then add to this menu whatever menu items you need from including section (3).

As shown above, I named the two menus “Main”, but you can call them as you prefer. The important thing is to select them in the “Template Locations” box (5) after you finished managing menu elements (4).


CSS Structure

Style.css contains all of the specific styling for pages. The file is separated into sections


If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. 

If your changes required not a big style change on file, you should use custom style on Theme Options panel. This section will print your custom style very bottom of the styles. It means your custom styles always privilege than other style of the theme.


This template imports following JS files (from js folder). 

a. JQuery & Plugins

jquery.cycle.min.js – scripts of the jCycle slider
jquery.easing.1.3.js – scripts for the Easing plugin
jquery.hoverIntent.js –scripts for the mouse over effect
jquery.overlabel.js – scripts for the over label of contact form validation
jquery.preloader.js – scripts for the image pre loader
jquery.prettyPhoto.js – scripts for the prettyPhoto plugin
jquery.validate.min.js – scripts for the validation plugin
iscroll.js - For iPhone scrolling effect for the contents of posts
jquery.isotope.min.js - An exquisite jQuery plugin for magical layouts
jquery.jplayer.min.js - for jQuery JavaScript Library
jquery.tinyscrollbar.min.js - for content area scroller
jquery.touchSwipe-1.2.5.js - for device swipe effects.

b. Setting ups of the all js files


Sources and Credits


I've used the following sources, sites or other files as listed.

Admin panel and Options Tree


Open source projects & jQuery

Graphics (doesn't included download)


Timthumb Tips

I have a dedicated support forum. Please join on here http://themeton.com/support
Best regards ThemeTON