Joomla Templates, WordPress Themes - HotThemes

WordPress Responsive Theme

WordPress version

Responsive All Devices

Hot Responsive is a wall for publishing brick-like posts from WordPress. Every brick contains the post's title and category, intro text and featured image. Size of the bricks has been determined by the sizes of the featured images.

WordPress Responsive theme looks simple, but under the cover, there's a complex code that makes such unusual way of showing the posts possible. First of all, jQuery mobile handles the top menu and all interactive elements, such as buttons, selection boxes, as well as the transitions between pages (if enabled). Masonry is jQuery plugin which is used for lining up the posts like bricks in the wall. This plugin dynamically determines the available space in the user's screen, and then calculates the widths of the posts in order to maintain the proportions of the bricks and overall look of the wall. Masonry can line up bricks in many columns in order to display more information for users with larger screens. But it can also, show only one column of the bricks is user looks your site on a smaller screen, such as a smartphone.

It's worth mentioning that same system of the bricks in the wall are used throughout your WordPress site. Not only the front page, but also all categories, tag listing pages, author pages and search results pages are displayed in this format. Therefore, the uniformity of your site and overall responsivity is guaranteed.

Infinite Scroll jQuery plugin has been used to replace default WordPress' Older Posts and Newer Posts links. With infinite scroll, the first set of posts/bricks (which number is set as usually in WordPress Configuration - Reading) will be shown first. After user scrolls the page down, as soon as s/he reaches the end, the new set of posts/bricks will be loaded. So, there's no need to click anywhere and reading the information from the wall is fluid and uninterrupted.

This theme uses a handy feature of WordPress, custom fields. They are used when some bricks should be colored differently (you probably noticed different colors of some bricks on our demo). For this purpose, custom field with name 'color' should have appropriate value set, in example 'green'. Also, if some posts contains only text, their width can be set by making a custom field named as 'width' with value in example 'dynlayout_wide2' (the number can be from 1 to 5, use bigger number for wider brick).

WordPress Responsive theme has many parameters in the theme options page that allows you to configure all mentioned features. You can control on what minimum screen size the left and the right widget positions will be displayed in different columns or in the same column. You can also set when they will be moved to the footer area to make more space for the posts. The width of the normally sized posts/bricks in the wall is another parameter that you would find useful. What value you would use there depends of your content. If you want to show more posts with less content, you will keep the value low (as on our demo). But you can also decide to have less posts with more content (text) in each. In this case, you would need to increase 'Box Width Unit' parameter.

This theme is not just responsive but also very configurable and it can be used as a starting point for development of more complex responsive sites based on WordPress.

WordPress Responsive theme features:

  • Responsive system based on jQuery Mobile, Masonry and Infinite Scroll. Works great on all devices and screen resolutions.
  • 5 pre-defined styles with different main color and backgrounds. Each color is customizable in theme options.
  • HotStart (SQL dump) for easy copying of our demo data. It installs theme with demo data.
  • Widget positions on top, left and right. The positions change their places according to the screen size.
  • Valid HTML, CSS and JavaScript code.
  • Support for core WordPress front page, category, search results and tags pages.
  • Drop-down top menu compatible with mobile devices. It changes its layout on mobile devices for better user experience on smaller screens.
  • Theme is tested with IE7+, Firefox, Chrome, Safari, Opera.

 

Theme Demo
view it live
Sign Up Now!
(all themes $39)
Single Theme
(this theme $29)

Existing customers login here to download