Appz. A Free WordPress Theme to Show off Your New iPhone App

Category: Freebies, News, Themes, Posted by Paulius Rašytinis on: 12 Apr 13, Comments: 28

Themeshaker was launched half a year ago. Back then, we were so excited about it that we couldn’t wait any longer without introducing it to the world. Even though the site was missing a few basic parts, the application itself was ready for action. 6 months after, we have finally got our blog up and running.

During the last few weeks, we were thinking about the ways we could draw your attention with the very first post on this blog. Surely you don’t have the time to read lengthy intros while standard welcome messages are so damn boring. How about a free WordPress theme for a start?


Appz WordPress Theme

We are proud to present you a free WordPress theme called “Appz”. It’s a clean and modern theme that is best suited for landing pages, showcasing your latest iPhone apps. Many thanks to the guys @Best PSD Freebies. Their beautiful design has just turned into a full-featured WP theme.


Appz theme: Overview

It takes time and effort to build a competitive iPhone app and get it placed on Apple App Store. As this would already be a worthy achievement, you shouldn’t stop at this point. There’s a lot more you can do to get your app noticed. WordPress + Appz WordPress theme is a simple, fast and effective way to approach the audience with your app.

People learn about new apps not only by browsing within the App Store, but also by searching the web. A well-optimized landing page is an important tool to market your iPhone app and achieve long-term goals.


Features & Techs:

  • Slider. Featured content slider was built using bxSlider with a little help from Timthumb for cropping and resizing images.
  • Options panel. Clean and unbranded. A few simple settings and styling options were included in this theme using Option Framework Plugin.
  • Styling. You can choose a different font for the logo, pick a different accent color or change the background image of the header with a click of the mouse button.
  • Translation ready. It has been localized for easy translations.
  • HTML5 & CSS3. Enhanced with jQuery, Modernizr and dynamic stylesheet language LESS together with LESS elements.
  • 960 Grid System. Based on 960 pixel wide grid system.
  • Cross-browser compatible and WordPress 3.5 ready. Works well with the latest WordPress version.


Live preview Download


Getting Started:

The set-up of this theme is a fairly easy process and shouldn't take long to complete. First of all, you need to download the theme package on to your computer by clicking the download link above.

To install a WordPress theme, log in to your WordPress Dashboard and navigate to Appearance -> Themes section. Switch to Install Themes sub-menu and click on the upload button. Browse for the “appz-theme.zip” file on your computer and complete the installation by activating the theme.

Appz is a very simple theme, but the best way to get familiarised with any WordPress theme is to get the same look as in the demo. We would recommend you to load the dummy content that was included in the same .zip archive you’ve downloaded before (sample-data.xml).

To load the sample data, go back to your WordPress Dashboard and click on Tools -> Import, then choose “WordPress” to install the importer. Usign the WordPress importer browse for the sample-data.xml file and click “Upload file and import”. Make sure you select yourself as an author for all the new content that is being imported. Now you have the same content on your site as in our demo.

If you, however, decided to set up things manually, you probably won't get into any trouble. Anyway, let us guide you through the basics of this theme.

Under the Appearance menu, you will find a clean and unbranded Theme Options panel with a few settings and styling essentials. On the Main Settings tab you can change the name of the application, alter the short description and download link, write a different footer message.


Appz theme: Main settings

On the Styling tab you will be able to adjust the visuals of this theme. Customize the appearance by picking a different accent color or changing the background image of the header. You can also change the font of the logo. Choose from several different fonts that we have embedded into this theme.


Appz theme: Styling

After you're done with the settings, it’s about time to add some content. You will quickly find out that we’ve registered a custom post type for slider. By adding a custom post type we were able to remove what’s unnecessary for this particular type of post. To add a new slide, simply click on Slider -> Add New, fill in the details and set a “Featured Image”.


Appz theme: Add new slide

Use the slider to spotlight the best aspects of your application. Showcase your product's features in a clear and interactive way. You can add as many slides as you wish and reorder them at anytime.

Whenever you are done with the slider, continue by adding the rest of the content. In order to add some extra detail about your application, you need to create a single post using basic WordPress functionality. The Appz theme will automatically grab this post and display it under the slider on your landing page.


Appz theme: Add new post

We are doing great so far. Just in a few minutes we walked through the basics of this theme. We have learned how to customize the appearance and how to manage the content. The thing is, that there is nothing else to do here. It's as simple as that!

Comments

mathew porter
, at 18 Apr 13

Thats a great little theme, very 'app developers site' esque.

Juan Pablo
, at 25 Apr 13

Hi, I am trying to use this theme in my site, but the slider is not showing up the images, you have an idea what is wrong? I am using wordpress 3.5.1 Thanks, Juan

Paulius Rašytinis
, at 25 Apr 13

Hi Juan and thanks for trying out our theme :) I've just tested it once more on a few different hosts and it is working fine for me. There might be an issue with your hosting provider. Please check if you have a "wp-content/themes/appz-theme/cache" folder on your FTP and verify that the server has the permission to write into this folder. If such folder doesn't exist then it's definitely the permission problem, so create it manually and make it server-writable. If it's not the case, you can send us your error log file by email and maybe we'll be able to help you.

arjun murtyy
, at 27 May 13

is it possible to change the download button to an apps store icon

Paulius Rašytinis
, at 27 May 13

Arjun, you can only do it manually by altering the code, but there is no such built-in feature. It's good as a tip though, we might release an update for that

Kalin Kirev
, at 25 Jun 13

Hi, thank you for developing this awesome theme. I am trying to use it in our website, but i would like to use a font different from the four you have preinstalled. Would you be able to tell me how you created your fonts, so I can use it to create a more standard font, such as Calibri. Thank you!

Julius Jurgelėnas
, at 15 Jul 13

Hello, there is a folder called "fonts" in the theme's directory which contains all the font files and CSS. For example, when you set OleoScript via options panel, in header.php theme loads oleoscript.css from fonts directory and adds custom class "font-oleoscript" to body element. That's all :)

Jennie Wallace
, at 25 Aug 13

I love the theme, but can't figure out how to reorder the slides?

Paulius Rašytinis
, at 27 Aug 13

The slides are ordered by date. You can edit your slides anytime and change the date to get the desired order. Simple as that.

shahram anver
, at 09 Sep 13

This is a great theme guys, fantastic work!!! I was looking at how to automate the slide transition, so transitions every 3 seconds. Is there a way to do this in configuration? If not, any tips on where in the code I should look at to modify it? I know basic coding. happy to share the code back once done if it helps the community. This really is an awesome theme guys thanks so much for building it.

Joel
, at 15 Sep 13

Nice theme; love the price too. I'll second the request to have an option to select official iPhone, Google Play, etc. download buttons in addition to "Download."

Julius Jurgelėnas
, at 21 Sep 13

Shahram Anver, It is possible to do so :) for example you can hover on different slides with jQuery every 3 sec.

robhob
, at 17 Oct 13

Great one pager! Thanks. How would I change the orientation and size of the image in the phone at the top? I want to use this theme to advertise and apartment and will also need to remove the hand. Is it permissible to remove the "Made by..." bit in the footer? Thanks Rob

Paulius Rašytinis
, at 22 Oct 13

Hi Rob. Appz is a simple theme with just a few styling options. If you want to make a more significant change, you will need some custom coding. A link back to our site would be appreciated, but not mandatory.

Ivy
, at 28 Oct 13

hi guys, I love your theme! I do have some trouble making it work: the images that are supposed to be in the iphone frame and "move" or slide, they just appear outside of the frame of the phone. You can see that here www.iiartadvisory.com/eng/onlineartadvisory/ Do I need to install a particluar plugin to make this work? Thanks a lot

Ivy
, at 28 Oct 13

Hi, i just made it work by simply installing jQuery Thanks!

Karan Chopra
, at 05 Dec 13

Thanks for bringing in such a great theme. What if one don't want any "Download" button at all or any other button at that place. Karan

lalulula
, at 13 Jan 14

Hi, i am loving the theme <3 thanks!! but i was wondering if there is a way to add an external link for the thumbs in the slider. i just need that when you click on the thumbs another window oppens with an external urld.

chris
, at 14 Jan 14

Great theme! Would be perfect if we could edit the "download" link to our respective app in the iTunes store. Can you provide some guidance on how to edit the code to make that change? My limited knowledge has given me no success.

Jorge
, at 15 Jan 14

For those who have asked how to change the download button. It is not an image file, but a text encoded with CSS. You can change the word "Download" for something else. For example, to display the price or say that it is free. To do this, in WordPress, Select: Appearance-->Editor then Main Index Template (index.php) In the text, look for the word "Download" and change it for whatever you want. Just make sure you keep the text inside the quotation marks like this "Download it today". My wish list for this great theme are: 1. Include two buttons to download the app, one for Android and another for iOS. 2. Allow to have showcase more than one App (for example a Menu to select other apps you have developed) Great job with this theme. Thank you!

Paulius Rašytinis
, at 17 Jan 14

Hi Jorge, thanks a lot for sharing your experience with the rest of the users

Shane
, at 25 Mar 14

Hi I cannot get the images on sliders working. Can you kindly help me out? I have added a cache folder myself to theme folder, made it writable, but still no use. Kind regards Shane

Paulius Rašytinis
, at 25 Mar 14

Hi Shane, When you were importing the sample data, have you ticked the checkbox to "Download and Import file attachments"?

Jerome
, at 25 Mar 14

Hi Paulius, I'm customizing your WP theme on my computer with MAMP, and I have some problems with the CSS file. I want to change height & weight of a picture directly in main.css but nothing changes on the front page. I have read that I have to modify the .less instead, but ... What do you suggest to do in order to watch the modif. immediatly on my browser ? Many thanks.

Paulius Rašytinis
, at 26 Mar 14

Hi Jerome, I'm confused, as I don't see why you could't be able to make the desired changes live on your browser. Main.less is used to generate the main.css, so you can easily make the changes you want with Firebug or any similar tool.

Martin B
, at 08 Apr 14

We bought a theme. We fought with it. We lost the fight. Then we found this theme. The sun came back again. Thank you so much. 1.) It took me a while to figure out, how to "sort" the slides (changing the release date). You should mention that. Things that are for you (the coder) obvious are sometimes a mystery to us (the users). 2.) And yes, i also would love to have one or two real buttons (IOS and google store) buttons where i could add the link to. I will try to alter the code in the main.css so i fear that i will get lost, while trying.

Martin B
, at 10 Apr 14

Could you tell us: "Translation ready. It has been localized for easy translations." Does this mean we can have the template multilingual?

Paulius Rašytinis
, at 10 Apr 14

Hi Martin, it means that with the right plugin (WPML, Polylang) you can make this template multilingual

Write a comment