OrangeWP is a port of our recent HTML Template Orange that's also available on ThemeForest. With our theme you get a set of powerful tools that will help you establish a rock-solid website in few moments.
In our package you'll also find a fully layered photoshop *.psd file so you'll be able to do some more designing or editing without any trouble.
The psd file is located in PSD/ folder.
Worth mentioning Whats worth mentioning - we've incorporated Twitter's Bootstrap grid system into our theme, so making some custom layouts or changing the appearance of the ones already defined comes with ease and is very fast to implement.
When you've finished downloading our theme, simply upload the contained *.zip file to your FTP server or extract the files
and upload the OrangeWP Folder to your theme directory. The default WordPress theme directory is yourdomain.com/wp-content/themes/.
Once finished uploading, head over to your administration Panel and under the Appearance > Themes and choose OrangeWP theme.
Be default, we've provided You with 5 different color themes. After installing and choosing our theme, click the customization
link. You'll find yourself in the WP Customization Panel - it's the place where you can decide which color theme to use.
We've utilized the use of WP Nav menu. In order to create yourself a nice looking menu head over to the
Appearance > Menu and create yourself a menu. When done, save it and next select it's placement in the "Theme locations form".
By default, we have here two select boxes. The first one is the regular menu that can be seen on site's top. The second one is
a select-box that's being revealed on devices with lesser resolution (small tablets, smartphones).
Although they are displayed in the same location depending on screen size, we thought it would be nice to present some more important content on mobile. Regardless to that, you can create just one menu and point it in two places to keep it consistent through the site.
We've hooked You up with YoPress ver 1.1, which is our author WordPress framework. It has some neat functionalities that will help you set up a modern website with ease and just with a few clicks.
Our framework settings can be found under YoPress tab in you Admin Panel.
In this section you can tweak the feel & look of your site. Specify on which side you want your sidebar to be. Where should attachment thumbnail lead to and how long should excerpts be.
We give You the ability to upload your very own favicon with ease. For best results we strongly recommend using a square image with dimensions like 32x32 or more.
By default, our theme uses Google Fonts (Oswald and Pontano Sans). We know that premium themes are used all around the world so we picked those with attention. They both have extended latin characters (that are significant for languages like Polish).
Although, most websites are in english so we decided to load a little bit lighter versions of fonts stripped down of those characters. It benefits in font weight and as follows - in the shorter page load times. But if it happens that you are a user, that needs those characters - simply tick the checkbox and save changes. Voila! You've got yourself some extended latin characters.
In the advertisements section you'll have the ability to specify a banner, it's title and a additional like. We also gave you the ability to choose on which pages the banner will be displayed (front-page, search, single (post) and blog (index)
It gives you some great opportunities to promote products / events and whatever you could figure.
In our framework You'll find some basic options to setup your slider in no-time. Head over to the slider tab, choose which slider you'd like to use. Setup the category from which posts should be pulled, how many of them you'd like to display in the slider and should the slider be displayed only on the front-page (we've found out that most users want to have it only on the front-page so now it's up to you to decide;)).
We've provided you a textarea, where you can paste some custom code - for example Google analytics asynchronous code or other stats. They'll be loaded near the end of the document. We've attached them to the wp_footer function.
We've hooked you up with a function, that hides the generator meta-tag, which shows the WordPress version. It's a little tweak, that's good for protection (there are some nasty bots out there that search for vulnerable websites depending on software version they use).
Without any additional plugins, we give you the right tools to make some viral marketing. You can choose whether to display sharing options to Facebook, Twitter and Google+. When it comes to sharing, we've bundled up a complementary list of og-tags for better user-experience. You can also setup the default og:image (in case your post doesen't have a thumbnail). And when it does, we automatically serve it at the right size with other post information.
Yes, it all comes right with our theme, without and additional plugins and hidden payments. What you see is what You get!
Like we said in the beginning of the documentation, we've provided you with 7 hand-made widgets. Those can bring some more attention to your website thanks to their unique design.
In order to setup our widgets, simply go to Appearance > Widgets and look for those witha "YoPress" prefix.
Next, simply drag them to the desired location and fill in the fields. You have 4 additional widget areas - one in the sidebar and three in the footer.
Displays basic contact information (address, phone, e-mail) in form of a nice vcard.
Displays the poster from the latest event (pulled automatically from events post-type).
Displays galleries based on attachments (pulled from user-specified category).
Lists out people, that contribute to the website (based on user roles - lists everyone besides subscriber role).
Displays specified social links to fanpages / profile pages.
Dynamically pulls out latest tweets based on Twitter user ID.
Pulls videos into a list from specified category.
We added some short-codes so that copywriting could be more fun. Some of us are bloggers and to be fair, we've covered only those short-codes that are really helpful when writing copy text. We didn't want to make thousands of short-codes that nobody will ever use. All of our short-codes are accessible through the dropdown menu, that's located in the TinyMCE's kitchen sink. By default you'll find:
We've provided you with some beautiful buttons. By default, there are three sizes of the button and the color is dependent on the chosen color theme. When selecting a button short-code from the drop-down menu you'll be able to provide an anchor text, link and target window.
In order to place the short-code manually, type:
[button type="small" title="Sample title" href="http://example.com" target="_blank"]Sample title[/button].
We all love those cute grids. By default, we've hooked you up with 2, 3 and 4 column grid. We could do all twelve, but for what? The usage is quite simple. Select the desired grid from the drop-down menu and voila, you're done.
Here's and example code version of 2column grid:
[grid][span6]Your text here[/span6][span6]Your text here[/span6][/grid].
We carefully picked some great looking icons and tweaked them especially for our design. All of them are available through the drop-down menu in the TinyMCE editor.
Here's the sample icon short-code markup:
[icon class=icon-folder][/icon].
The last short-code for now - the video. For your comfort, we've provided two methods of embedding videos. First one is reserved for two most-popular sites (YouTube and Vimeo). Second one gives you more flexibility - you can embed any content, that's iframed. We took care of proper resizing both types of media embedding, so you don't have to worry about responsiveness of your design.
Sample shortcode of embedded video
[video type="link" data="http://www.youtube.com/watch?v=C1UnNIEeqTg"][/video]
Added map shortcodes to easily embed a googleMap inside your post/page.
We found out, that tables were the most omitted elements in our competition's themes. We got that all covered up. Simply select the tables from the drop-down, enter the desired number of rows and columns and you're done.
Sample short-code markup for 2col 2row table
[table] [thead] [row] [th]Your header goes here[/th] [th]Your header goes here[/th] [row] [/thead] [row] [column]Your text goes here[/column] [column]Your text goes here[/column] [/row] [row] [column]Your text goes here[/column] [column]Your text goes here[/column] [/row] [/table]
This point is crucial to some themes. We took care of some basic styling for two (at least for us) most wanted plugins - the WP-Paginate pagination plugin and the famous WP Contact form (WPCF-7). Both will look beautiful with almost no work.
Download and install the plugin from it's repository. Turn it on. After that, go to the settings tab, that's located under
the Settings > WP-Paginate and uncheck the field that's labeled "WP-Paginate CSS File".
That's it! You all good to go. Right now, you should have the pagination up and running and looking great at the same time!
Download and install the plugin from it's repository. Turn it on. After that, go to the plugins tab, that's called Forms
and setup your form. We took care of the form styling, all you have to do is tweak the markup a little bit (one provided by default isn't
the best coding practice). Below's some sample code of what the form should look like:
<p>[text watermark "Name..."] </p>
<p>[email* your-emai watermark "E-mail..."] </p>
<p>[text your-subject watermark "Subject..."] </p>
<p>[textarea your-message watermark "Message..."] </p>
<p>[submit class:btn class:btn-xxl "Send"]</p>
Alter your code a little bit to look like the one pasted beneath and as a result you'll have a good looking form!
In this section we will try to cover some code-related things.
We encourage you not to edit the core files! Mostly because future updates will be more difficult for you. If you'd like to provide your blog with some custom functions, shortcodes and stuff
try to use our blank custom-functions.php file - this way you'll be able to apply updates in no-time while maintaining your own, custom functionalities.
Before each theme update, we'll try to cover up every bug and issue that's encountered. Although, before making any changes to your running website be sure to do a database and file (FTP) backup.
We do not owe any rights to sample images embedded in our theme. Those belong to it's authors and were used with watermarks just for previewing purposes.
Grid system - During template development we used Twitter Bootstrap's grid system, that has been extracted from Bootstrap and is Licensed under the Apache License v2.0 http://www.apache.org/licenses/LICENSE-2.0.
HTML5 Boilerplate - combined with bootstrap's grid system, we've used html5boilerplate.
Fancybox ver 1.3.4 - we've used a free version of Fancybox licensed under Open-sourced MIT license.
Nivo Slider - we've used a free version of Nivo slider licensed under Open-sourced MIT license.
FlexSlider - we've used a Flexslider by WooThemes licensed under Open-sourced MIT license.