Documentation

In addition to our documentation we have a YouTube Channel with loads of helpful videos.

Installation & Set Up

Download the Socrates 5 zip file from the download page to your hard drive
In your self-hosted WordPress install goto Appearance > Themes > Add New > Upload
Upload and Activate

Customizing The Theme

Unlike previous versions of Socrates all our options are in Appearance > Customize. This is best practice for WordPress themes and lets you make changes and see them live. You can learn more just playing around with the customizer in a few minutes, so we recommend you just click each section to see all the options now. The rest of this will make more sense once you do.

Site Identity

This is where you can change your site title and description, upload a small logo (not a big header) and control other identity options.

Layout

Socrates has full or wrapped(boxed) layouts. You can choose your layout option, container width and header sizing here. Important. If you’re going to upload a header into “Header Image” section, you need to set the height of that header image here. A 200px height header, should be a 200px minimum height.

Colors

Here you control the colors of the theme.

Header Image

While we’re most well known for our Socrates Header Images, you can also use colored backgrounds, text titles and also small “logos”. If you have a large header image say 1200×200, you’d upload that image here. A common mistake is to upload big header images to Site Identity > Logo. That’s only for small logos. Also make sure you match your header image height with Layout > Header Minimum Height.

If you’re uploading your own custom header image (per page feature) make sure all your custom headers are uniform in height and width to match the main header image and fit the default container size.

Background Image

We don’t really recommend background images as they usually just slow down a site load. However, we’ve added the core WordPress background function if you want to add a background to your site. (backgrounds are really rare these days, and have little benefit)

Menus

Menus are typically set up in Appearance > Menus. We recommend you use that area to create and assign your menus, but you can also do it using WordPress customize system here.

Widgets

Widgets are typically set up in Appearance > Widgets. We recommend you use that area to create and assign your widgets, but you can also do it using WordPress customize system here. Socrates has a number of unique widgets

Right Sidebar – Default sidebar that appears on all posts and pages
Page Left Sidebar – Only appears on Left Sidebar page template
Member Sidebar – Only appears on Member Page Template
Footer – Appears on all pages/posts if active. Stacks widgets horizontally.
Header – Appears to right of header area. Disabled on mobile.
Top Banner – Call to action area below primary navbar, See Prebuilt CTA’s Here
Bottom Banner – Call to action area above footer.
Landing Page Footer – Only appears on landing page template. Great for funnel menus, disclaimers or copyrights.

Static Front Page

If you want to use a static front page you can assign it here or in Settings > Reading. Here’s a video I created which explains what this is used for.

Additional CSS

If you want to make design changes that aren’t covered in our customizer you can use our Additional CSS box. The greatest web design trick ever is to “right click” on a design element you wish to change and then click “inspect”. You’ll see the CSS that controls that element. You alter that code live to see it change, and then just enter that code in Additional CSS to make the site change.

This code will stay in this box regardless of Socrates Updates.

Fonts & Sizes

Here you can control the font styles and sizes for all the major font elements of the theme.

Font Awesome Icons

Socrates comes with FontAwesome 4.5.0 icons pre-loaded. You’ll see some of them on the toolkit drop down menu, but a full list can be seen here (note, not all of these may work due to versioning)

Social

Enter your social links here and then you can use our “social widgets” in Appearance > Widgets to add social follow buttons to your site. If you’d like to add “social share” links to your site we recommend the Social Warfare plugin.

Footer & Affiliate Link

On the lower left side of the them we have a copyright and affiliate link area. Socrates has an affiliate program that pays 50% commissions. So we encourage our customers to replace our link with their affiliate link. If you want to remove the link totally, that’s fine. But we assure you that customers do make passive sales with this link. We hope you’ll use your affiliate link here, or add a banner to your sidebar. You can replace that area with any copyright notice, or just add one blank space and save if you want to make it blank. You can also hide it with custom css.

#footer-copyright {display:none;}

Other

In this section we have miscellaneous design options to hide or show elements and modify the 404 page.

Page Templates

On the right side of your page editor under Page Attributes you’ll see a Templates drop down menu.

This is where you can use our page templates to create all kinds of different looks.

Full Width – No sidebar
Home Sections – Full width, and requires Full Section shortcodes in toolkit plugin
Landing Page – Simple boxed landing page template
Left Sidebar – Left sidebar navigation with its own widget area
Masonry – Shows multiple posts in 2 or 3 columns
Masonry w/Sidebar – Above with sidebar
Member Area – Organize member only widgets using this template
Plain White – Clean blank template for landing or sales pages or funnels
Page Builder – Blank slate for Page Builder plugins

The Masonry Template

This creates a simple masonry style layout of your recent posts. We’ll work on improving on more styling if customers like this feature.

To set up,

Goto Pages > Add New
Give the page a name like: Masonry Test
Select Masonry from Page Attributes drop down
Leave page blank and Save.
View page and see your posts load in masonry style.

If you have no posts, nothing’s going to show. So make sure you have posts on your site.

Hide Elements

You can hide different elements on a per page basis. So if you want to hide the header, navbars, title, or footers you’ll see the “Elements” option on right side of page editor.

GOOD TO KNOW

SEO Meta Descriptions

Most new themes don’t have the meta description code in the header anymore. Socrates 5 included.

SEO plugins insert it automatically, and you all should be using an SEO plugin like Yoast or All In One SEO Pack.

That being said, if you don’t have your description templates set up properly, the meta description might not be showing on your pages.

If you view source and don’t see a meta description, check your seo plugin settings to fix.

Often just by adding %%excerpt%% into Yoast description box for posts/pages for example.

Header Widget

The Header widget is automatically disabled on screens smaller than 767 pixels. This is because it will conflict with the header height settings and may overlap other elements. It also doesn’t work well with an image only header background. If you’re going to use the header widget, I recommend a color only background with site title/tagline.

If you want to enable the header widget on mobile screens add this code to your Additional CSS. Depending on your needs can add padding or margin css to position as well.

@media only screen and ( min-width: 360px ) and ( max-width: 767px ) {
		#header-widgets {display:inline !important;}
}

There seems to be an extra line break or P tags in my column shortcodes.

Make sure you’re editing the columns in text mode and hit enter button after column code and content. Sometimes column shortcode alignment can be tricky and you either need to make sure there’s a definite line break after the column shortcode or remove any line breaks to get proper alignment.

Use “Text Mode” to make sure the gaps are equal or remove all gaps and line breaks to correct.

Here’s another fix for this issue.. in text mode add a fake DIV around the column shortcodes like this.

<div class="spacefix"> All your column shortcodes and content  </div>

Using Image URL in shortcodes.

A few of our shortcodes have image URL inserts. Do NOT add these image urls in Visual mode or WordPress will try to add extra parameters and codes. You just want to use the exact URL and paste in the Text Tab into the shortcode. So click Add Media, find the image, copy the URL of image on right hand side. Click “Text” tab, and paste the URL only into the space provided.