HTML5up Dimension Theme for Wordpress
If this kind of stuff has any value to you, please consider supporting me so I can do more!
A configurable Wordpress Theme version of HTML5up Dimension Theme made for the internet by @cogdog. It creates a simple, elegant calling card something that looks like
The box links below open content overlays (each is a Wordpress post) with optional links to external sites or to a Wordpress Page created on the same site:
Now you can also create standalone WordPress pages in case you have more info than you want to show in a front box, so it can link internally to a full page.
Examples
- Cowboy flavored demo http://lab.cogdogblog.com/dimension/
- Mariana Funes http://marianafun.es/
- Laura Killam http://nursekillam.com/
- Dan Zuberbier http://dpzuberbier.com/
- Kim Jaxon http://www.kimjaxon.com/me/
- Simon Thompson http://about.digis.im/
- Tim Owens https://timowens.io
- SPLOT demo site http://splot.ca/domains2017/
Installing from Scratch
Install this theme on any self hosted Wordpress site. No luck on Wordpress.com, get a real web hosting package.
You should download a ZIP file of this GitHub Repo (that's via the green *Clone or Download" button above as a file wp-dimension-master.zip).
The zip can be uploaded directly to your site via Add Themes in the Wordpress dashboard. Of you run into size upload limits or just prefer going old school like me, unzip the package and ftp the entire folder into your wp-content/themes directory.
Updating the Theme
If you have ftp/sftp access to your site (or this can be done in a cpanel file manager), simply upload the new theme files to the wp-content/themes directory that includes the older version theme.
For those that lack direct file upload access or maybe that idea sends shivers down the spine, upload and activate the Easy Theme and Plugin Upgrades plugin -- this will allow you to upload a newer version of a theme as a ZIP archive, the same way you add a theme by uploading.
Customizing with the Customizer
The main elements are set and previewed in Appearance -> Customize
Site Name and Tagline. Anything you want!
Under Site Identity edit to define the headline elements (leave blank to remove)
It says Set Headers but it's really Set Background. So sneaky!
Under Header Image upload an image (recommended size 1568 x 1024 px or bigger) to place a background image
The reason we use Header image controller, is you can upload more than one image, and use the option to randomize each time.
Front Quote and Footer
Under Dimension Front Text edit fields to add an optional quote (appears below tagline) and custom footer text
Any Footer text added will be placed before the current credits line at the bottom.
Front Icon
Under Dimension Logo upload your own image. Amazing!
Social Media Icons
NOTE Previous versions of this theme recommended the Customizer Social Icons plugin but it conflicts with the current version of Wordpress and make the Customizer unusable. If you have this plugin, Deactivate it and delete it. You will not lose your menus, just follow the instructions below to modify your menu to work with a different plugin.
To have a customized set of icon links on the front of the site, install and activate the Font Awesome 4 Menus plugin. This allows you to add an icon to any menu item.
From the Wordpress Dashboard look under Appearances for Menus. Click create a new menu name it whatever you like -- social is a good choice. Under Menu Settings next to Display Location check the box for Social Media.
To add a social media (or any link), open the panel for Custom Link.
Enter a title for the site and provide the URL that points to your content on that site. Add as many as you like. You can drag and drop them to change the order.
To set the icon, you must first enable the visibility of CSS classes for each menu item. Click Screen Options in the upper right, and check the box for CSS Classes.
Open an item in your Social Menu and you will now see a field for entering CSS Class names. You have the choice to add from well over 400 icons in the Font Awesome collection. Find the name of the icon you wish to use, and enter it's name as a CSS class with fa- in front.
For example, these are the class names to render the icon for typical social media sites (these should be all lower case):
- fa-twitter
- fa-facebook
- fa-youtube
- fa-linkedin
- fa-instagram
- fa-flickr
With the Font Awesome icons, you can add any site you wish to be represented on the front page and pick the icon you prefer.
Save your menu and check out the spiffy icons up front.
Buttons! On the Bottom!
The content for the lower row of buttons is driven by plain old posts. You can have up to 8, but 4 or 6 look better.
For each create a post. You can use long titles.
A featured image os optional, but will appear on the content overlay. The order of the buttons is via the post sidebar option for... Order
Extra "Stuff" on Posts
Look for a few more settings in Extra Dimension Stuff box below the post content. The text entered in Front Button Label will be what is used to diplay the link in the box on the front page. If left blank, the theme will use the text of the post title. The label allows you to use a longer title when the box opens up.
You can also enter and optional link applied to the featured image and a bottom button to go to a designated URL.
Enter under Go Button Destintion URL the web address the bottom button should link to. You can edit the label on the button as well (if left blank it will be Go) The Font Awesome Icon Button can be changed to anything available from Font Awesome.
Note on Featured images
The featured images displayed for each post will be scaled down to fit a size with an aspect ratio of 480px wide and 200px high. Wordpress can never scale an uploaded image large than the original
The image you upload needs to be bigger than this in both dimensions It will be scaled and cropped to the center of the image. If you do not want to experience cropping, creating your image with the same aspect ratio (it can be larger, e.g. 960x400).
Suggested Plugins
- Font Awesome 4 Menus used to add the icons to the social media links below the tag line
- Fluid Video Embeds will make sure your auto embedded videos (and other content wordpress can embed by URL) are responsive sized to fill the column width
- Easy Theme and Plugin Upgrades allows you yo update the theme by uploading the zip file again as a new server (because wordpress does not provide this capability)
- JetPack can add a number of capabilities, such as adding a contact form. If you do create a contact form, make sure you also add and activate Akismet because you will get spam
- Regenerate Thumbnails If you change to this theme from another one, you should run this plug to re-generate previously uploaded images in the specific sizes used by the theme.
Features / History
- v1.4 (Jan 3, 2018) Deprecated use of Customizer Social Icons plugin and re-wrote instructions to use Font-Awesome 4 Menus
- v1.3 (Aug 21, 2017) Integration of Social Media Icons for the WordPress Customizer plugin to provide a front page display of icons / links for social media sites, new post meta data field option to store an optional short name for the button display, another field to customize the link button label, CSS updates for
aligncenter,alignleft,alignright classes, edit links added to post display. - v1.2 (Jun 19, 2017) Added a page template to create longer content pieces
- v1.1 (May 20, 2017) Added shortcodes for link buttons, display and show order in the posts view of Wordpress Editor
- v1.0 (Feb 19, 2017) First release http://cogdogblog.com/2017/02/new-dimension/
Requests
- you tell me Fork and edit to suggest features or toss them into the Issues bin