There’s a lot of debate in the WordPress community as to whether WordPress themes should include shortcodes, or if they should even be used at all. I don’t mind shortcodes per se, as long as they’re used sparingly and they’re kept simple. I’ve seen way too many themes that include hundreds of shortcodes and require you to use them to build complex page layouts. When they’re used like this they’re cumbersome, messy and make editing your page content a complete nightmare! Other times, themes include all these shortcodes and 99% of the time, people just don’t need them.
I’m of the opinion, if you need shortcodes, then go grab one of the many plugins from the WordPress Plugin Directory that provide that functionality. That way, you can find something that not only matches your needs, but for the other people who don’t need them, there wont be unnecessary code clogging up the theme.
Like shortcodes, images sliders and contact forms are best served from dedicated plugins. If you’re looking to implement a contact form, I highly recommend Gravity Forms. It makes adding forms super easy!
If you want a simple image slider that’s easy to implement and customisable, go check out Meteor Slides.
It’s super simple to use the icons if your’re modifying the theme. Simply add the relevant icon class to an
<i></i> tag. You can find the complete list of icons on the sample typography and icons page.
Place Font Awesome icons just about anywhere with the
<i class="fa fa-rocket"> fa-rocket
To increase the size of icons relative to its container, use
fa-lg (33% increase),
<i class="fa fa-camera-retro fa-lg"> fa-camera-retro
<i class="fa fa-camera-retro fa-2x"> fa-camera-retro
<i class="fa fa-camera-retro fa-3x"> fa-camera-retro
<i class="fa fa-camera-retro fa-4x"> fa-camera-retro
<i class="fa fa-camera-retro fa-5x"> fa-camera-retro
fa-spin class to get any icon to rotate. Works best with
Spinning Spinner icon
Spinning Refresh icon
Spinning Cog icon
<i class="fa fa-spinner fa-spin"> Spinning Spinner icon
<i class="fa fa-refresh fa-spin"> Spinning Refresh icon
<i class="fa fa-cog fa-spin"> Spinning Cog icon
Rotated & Flipped
To arbitrarily rotate and flip icons, use the
<i class="fa fa-shield"> normal
<i class="fa fa-shield fa-rotate-90"> fa-rotate-90
<i class="fa fa-shield fa-rotate-180"> fa-rotate-180
<i class="fa fa-shield fa-rotate-270"> fa-rotate-270
<i class="fa fa-shield fa-flip-horizontal"> fa-flip-horizontal
<i class="fa fa-shield fa-flip-vertical"> icon-flip-vertical
To stack multiple icons, use the
fa-stack class on the parent, the
fa-stack-1x for the regularly sized icon, and
fa-stack-2x for the larger icon.
fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
<span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"><i class="fa fa-twitter fa-stack-1x"></span> fa-twitter on fa-square-o
<span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"><i class="fa fa-flag fa-stack-1x fa-inverse"></span> fa-flag on fa-circle
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"><i class="fa fa-terminal fa-stack-1x fa-inverse"></span> fa-terminal on fa-square
<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"><i class="fa fa-ban fa-stack-2x text-danger"></span> fa-ban on fa-camera
The button was added using a simple html link within a Text Widget in one of the Front Page Banner Widget areas. The link was then assigned the
To increase or reduce the size of the button, use the
btn-small class as well.
<p><a class="btn btn-large" href="#">Call to action!</p> <p><a class="btn" href="#">Call to action!</p> <p><a class="btn btn-small" href="#">Call to action!</p>
You can add separator in between the dropdown menu items simply by adding a custom link and assigning it a class. On the Appearance > Menus page, add a Custom Link similar to below. The URL should be ‘#’ and the Label can be whatever you like. Add it to your menu by clicking the Add to Menu button.
After the link has been added to your menu, simply add ‘divider’ to the CSS Classes field. (If you can’t see the CSS Classes field, you will need to enable it using the Screen Options button at the top right of your page).
You can add non-clickable menu headers in between the dropdown menu items simply by adding a custom link and assigning it a class. On the Appearance > Menus page, add a Custom Link similar to below. The URL should be ‘#’ and the Label can be whatever you like. Add it to your menu by clicking the Add to Menu button.
After the link has been added to your menu, simply add ‘dropdown-header’ to the CSS Classes field. (If you can’t see the CSS Classes field, you will need to enable it using the Screen Options button at the top right of your page). After the link has been added to the menu, you can also remove the ‘#’ from the URL field. This will prevent the menu item from being clickable.
(Please note: You can’t add a Custom Link to a menu without having a valid URL, hence the need for the ‘#’ in the initial step)
If your blog page is displaying the whole Post, rather than just a ‘teaser’, all you need to do is insert a ‘More tag’ into your content by clicking the ‘Insert More Tag’ button on the Editor Toolbar (). When you insert a “More” tag into your Post, everything prior to the tag is considered as this post ‘teaser’. Most times you’d only use this button when you’re creating a blog Post, rather than a Page.
First up, your need to change your sites Front Page so that it’s displaying a Static Page, rather than your latest posts. You do this within the SETTINGS > READING page. For the option ‘Front page displays’, select ‘A static page’ and then select the Page you want to display for the homepage and the page you want to use for your blog posts.
When creating the page to use for your ‘Front Page’, make sure to set the template to Front Page Template using the ‘Template’ dropdown list in the Page Attributes panel on the right of the page.
Next, in the APPEARANCE > WIDGETS page, add a text widget to the First Front Page Banner Widget. Add a title to the text widget and in the content area, I added the following:
<h2>Your basic building block for creating beautiful, responsive custom themes built on HTML5 & CSS3</h2> <p><a class="btn btn-large" href="#">Call to action!</a></p>
You can obviously change the text as you please and add a proper url to the link.
In the Second Front Page Banner Widget I just added another text widget and added the following img html tag:
<img src="insert-your-image-url-here" alt="Add your img ALT text in here" />
You could also use something like this Image Widget plugin. It’s a great little plugin that allows you to add images to your widgets really easily.
The three widget areas below the main content are simply text widgets again, added to the First Front Page Widget Area, Second Front Page Widget Area and Third Front Page Widget Area.
There sure are. I purposely haven’t included heaps of theme options so that the theme is real easy to setup. Too many times I’ve seen ‘Premium’ themes with hundreds of theme options. Not only is this confusing for people to setup, but it’s also extremely time consuming.
In Quark, I have two pages of theme options. One page is simply for you to manage your social media urls and the other is to change a few miscellaneous options such as your banner background image, footer colour, Google Analytics ID and a couple of other options. You can view the pages below.
Manage your social media urls on the Basic Settings tab.
Manage your other settings on the Advanced Settings tab.
You can also manage the site background image/colour and the logo by using the standard WordPress Background and Header options, located under the Appearance menu option.