2021 Q4 Sale BFCM – Free Users Sitewide Banner

  1. Documentation
  2. Themes
  3. PixelPress

PixelPress

Important: This theme was retired in October 2015 and is not for sale. Documentation is no longer being updated.

Installing your Theme ↑ Back to top

To learn how to install your theme please reference our documentation here: Installing a WooTheme

PixelPress Theme Demo: demo.woothemes.com/pixelpress

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: PixelPress > Framework

Activate your Theme Key ↑ Back to top

After you install your theme, be sure to activate your theme key by downloading and installing the WooCommerce Helper plugin. This will verify your site when contacting support and will enable 2-click updates for quick theme upgrades down the road.

Updating your theme

It is very important to ensure you have the latest version of your theme at all times. This is the best way to proactively troubleshoot issues on your site.

Please reference the WooCommerce Helper Documentation to learn more.

Setting Up PixelPress ↑ Back to top

PixelPress is a fun and flexible business theme ready to take your site to the next level. It’s packed to the brim with Woo features. Let’s go over how to set up the theme.

The PixelPress homepage can be setup in two ways. Either the standard module based setup, or you can have it be widgetized. Going widgetized lets you re-order any of the modules on the homepage using our included Woo – Component widget. See Customizing the Homepage below.

Setting up widgets is as easy as drag and drop, but let’s go over using the modules and how to enable those. Running from top to bottom on the homepage we have the Slider, Mini-Features, Portfolio, and Blog section. There is also an included Content area that you could use to pull in a page or any blog posts.

Setting Up The Slider ↑ Back to top

Go to: PixelPress > Settings > Featured Slider to enable and setup the slider.

PixelPress-slider-settings-wf6
PixelPress Slider Settings

Be sure after you’ve configured the settings you save the changes. It’s important to note that you need to create at minimum the number of slides you set in the settings. If you’ve set it to show 3 slides then we need to create at least 3 slides. You can do so by going to Slides > Add New. Be sure to title your slide and write a short description/excerpt. Then you can either upload an image using the Featured Image panel, or you can paste a video embed code. The slider will handle either type of media just fine.

If using an image, note how PixelPress uses slide images here. In addition to the image you upload in either the featured image or custom settings panel there is also a place for the slide’s background image.

pixelpress-post-metabox
PixelPress Slide Settings

This provides you with a lot of flexibility, for example take how we’ve built our slides. We’re using the default slide background, but then building the header, slide body, slide image, and slide button inside the content editor of the slide post. We think this addition to the normal slide post lends to much more flexibility in how you can create slides.

pixelpress-slide-add
Creating A Slide In PixelPress

To add a slide follow these steps:

  1. Go to Slides > Add New.
  2. Type a title for the slide and complete all of the post’s body content.
  3. If you want an image to appear as the background to the entire slide then add an image via the Featured Image panel.
  4. If you want to use a video simply past the embed code in the proper box under the Custom Settings
  5. Publish the slide.

Features Area ↑ Back to top

Next is the Features Area. You can enable this under PixelPress > Homepage Options > Homepage Setup. Then go to PixelPress > Homepage Options > Mini-Features to configure the options.

pixelpress-mini-features
PixelPress Features Settings

Once you’ve setup your options you will need to create at minimum the number of features you specified in the settings. If you set it to show 3 Features then be sure to create at least 3 features.

To add a feature follow these steps:

  1. Go to Features > Add New.
  2. Type a title for the feature and complete all of the post’s body content.
  3. If you want an icon to appear beside the feature than add a “Features Icon” in the Custom Settings panel.
  4. Add an excerpt for the feature in the “Features Excerpt” field in the Custom Settings panel.
  5. Optionally add an alternative URL where this feature will link to.
  6. Publish the Feature.
pixelpress-features-metabox
PixelPress Feature Custom Settings

Setup The Portfolio ↑ Back to top

The portfolio area below the Features is a great spot to show off the work you’ve done and is pretty simple to setup.

First we’ll need to be sure that your portfolio page is setup correctly. Create a page and title it however you’d like, we’d recommend calling it Portfolio. Then be sure to assign the Portfolio page template to it.

pixelpress-pageatts-portfolio
Portfolio Page Template

From here we need to add items to the portfolio.

To add a portfolio post follow these steps:

  1. Go to Portfolio > Add New.
  2. Type a title for the post and complete all of the post’s body content.
  3. If you are posting an image(s) upload them via the appropriate image options you’ve chosen.
  4. If you want to use a video simply past the embed code in the proper box under the Custom Settings
  5. Publish the portfolio post.

To add multiple images to a portfolio post simply upload all of them when setting a featured image. Once you’ve set your featured image the rest of the images will be pulled into the post.

Portfolio Area ↑ Back to top

Now that we’ve setup our portfolio and added some work to it, we need to show a few of our latest posts on the homepage.

Go to PixelPress > Homepage Options > Homepage Setup to enable this and then go to PixelPress > Portfolio Settings and tweak any other options here to your liking.

pixelpress-portfolio-settings
PixelPress Portfolio Settings

Blog Area ↑ Back to top

Our last area on the homepage is the Blog Area. As it says this is where you can feature a few of your latest posts on the homepage.

Go to PixelPress > Homepage Options > Homepage Setup to setup the options here as you’d like.

You can choose how many posts to show, or alternatively choose to show content from a page there instead.

To display your latest blog posts:

  1. Go to PixelPress > Homepage Options > Content.
  2. In the Content Area Content dropdown, select Blog Posts.
  3. Optionally enter one or more categories to be excluded from the homepage blog section.
  4. Go to PixelPress > Homepage Options > Blog.
  5. Configure the various options for your homepage blog section.

To display content from a page:

  1. Go to PixelPress > Homepage Options > Content.
  2. In the Content Area Content dropdown, select Page Content.
  3. In the Page Content dropdown, select which of your pages you would like to display content from.

Shop Area ↑ Back to top

If you have our WooCommerce plugin installed, you can also display a slider on the homepage containing your latest products.

To enable the shop area go to PixelPress > Homepage Options > Shop Area.

Customizing the Homepage ↑ Back to top

If you want to change the order of certain homepage modules, you can use our Woo – Component widget.

  1. Go to Appearance > Widgets
  2. Drag the Woo – Component widget into the Homepage widget area on the right.
  3. Select which homepage component you want it to display (Features, Portfolio, Blog posts or page content, Feedback or Shop)
  4. Repeat for any additional components you want to add to the homepage.
  5. Drag and drop the widgets to reorder them.
Screen Shot 2014-07-16 at 16.38.59
Adding a Woo-Component

Note: If there are no widgets in the Homepage widget area, then the homepage will display the default homepage elements.

Image Dimensions ↑ Back to top

Here are the ideal image dimension to use for PixelPress. Larger images will be dynamically resized to fit, while smaller images will be stretched larger to fit. Product images will scale width and height and will not be cropped into a square (unless you use the ‘Hard Crop’ setting found in WooCommerce > Settings > Catalog > Image Options). For greatest control of your image sizes, it is best to save out your images to the exact size before uploading.

Please note! We do not recommend that you force the height of your slider or product images with CSS as this will break the responsiveness of the theme images. Rather, it is best to save out your slider/product images with the same height before uploading.

Recommended Image Sizes ↑ Back to top

  • Homepage Featured Slider suggested dimensions: 960px x 360px
  • Mini features icon images: 90px x 90px
  • Single Blog Post Page Images suggested width: 505px

Custom PixelPress Widgets ↑ Back to top

The theme includes 9 custom widgets that you can add to any of your 5 widgetized regions – 1 sidebar and 4 footer widgetized regions. PixelPress also includes styling for many of our WooDojo widgets.

The custom woo widgets included are:

  • Woo – Adspace
  • Woo – Search
  • Woo – Flickr
  • Woo – Blog Author Info
  • Woo – Embed/Video
  • Woo – Subscribe/Connect
  • Woo – Component

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment