Thank you for purchasing our theme!

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.

Our theme contains:

  • Five color themes
  • Cross-browser responsive design
  • Written with SEO Optimization in mind (our site is SEO friendly)
  • Integrated the famous FlexSlider & NivoSlider
  • 7 theme-dedicated widgets (Contact Note, Event Poster, Gallery, Our Team, Social Hub, Latest Tweets, Video Player)
  • 4 widget-ready areas
  • Support for WP-Paginate pagination plugin
  • Support for WP Contact form (WPCF-7) form plugin
  • Fully functional, built-in Upcoming Events plugin combined with Latest Poster Widget
  • Covered-up styling for default WordPress Widgets
  • Utilized WordPress Customization Panel capabilities to dynamically change color themes, logotype, site description and more
  • Used our very own Theme Framework (YoPress ver 1.1) which contains the following:
    • Sidebar placement
    • Uses WordPress wp_nav_menu
    • Dedicated mobile menu
    • Default attachment linking manager
    • Custom post excerpt length (limited to number of characters)
    • Custom post sharing options (Google+, Twitter, Facebook)
    • Custom favicon uploader
    • Control of extended latin characters while using GoogleFonts (better loading times when latin characters are unnecessary)
    • Slider selection, displaying posts from certain category
    • Preventing slider to show only on front-page, setting up max slides number
    • Text-area for embedding additional scripts to footer
    • Ability to hide WordPress Generator (version) Tags
    • GoogleMaps Short-code
    • Advertisements manager (ability to set-up a banner and display it on certain pages) with file uploader
  • Handful of great short-codes (grid short-code, buttons short-codes, media embedding short-codes, table short-codes and a ton of icons)

With our theme you get

  • Custom front-page
  • Custom contact-page
  • Dedicated eventcalendar page & single event page
  • Custom attachment page
  • Custom category & archive pages
  • Redesigned search form
  • Redesigned comments form

Layered PSD source file

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.

Good to know We've separated the short-codes into a single file for better user experience. If someday you'll decide to switch from our theme to another one, you'll be able to pick our functions and incorporate them with no pain into your new design.

Installation & basic setup


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.


Choosing theme color / logotype / site name & description

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.

Specifying menus

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.

Power-user options thanks to YoPress


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.

Appearance

General settings

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.


Favicon

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.


Fonts

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.


Advertisements

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.

Slider

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;)).


Other

Embed additional scripts

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.


Hide WP Version

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).


Social sharing

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!

Custom widgets


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.


YoPress: Contact Note

Displays basic contact information (address, phone, e-mail) in form of a nice vcard.

YoPress: Event poster

Displays the poster from the latest event (pulled automatically from events post-type).

YoPress: Gallery

Displays galleries based on attachments (pulled from user-specified category).

YoPress: Our Team

Lists out people, that contribute to the website (based on user roles - lists everyone besides subscriber role).


YoPress: Social Hub

Displays specified social links to fanpages / profile pages.

YoPress: Twitter latest

Dynamically pulls out latest tweets based on Twitter user ID.

YoPress: Video player

Pulls videos into a list from specified category.

Short-codes


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:


Button short-codes

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].

Grid short-codes

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].


Icon short-codes

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].


Video short-code

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]

GoogleMaps short-code

Added map shortcodes to easily embed a googleMap inside your post/page.


We hope, that our shortcodes will be easy to use and you'll achieve some great results with using them!

Table short-codes

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]
			
Good to know We encourage you to combine shortcodes with each other. For example - inserting an icon inside the button will give it some personalized look. With little effort you can combine buttons with tables to do some cool looking price-tables or comparison pages.

Our theme is plugin-ready for some most-wanted plugins!

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.

Setting-up WP-Paginate

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!

Setting-up WP-Paginate

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!

Troubleshooting, tips & tricks

In this section we will try to cover some code-related things.


Core-editing

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.

Theme updates

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.

Disclaimer & authoring info


Stock images used in our template

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.


Third-party javascript plugins & solutions

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.