As the OnePress Community team continually flushes out bugs and adds functionality, we will be releasing new versions of the framework. To clear up an confusion and capture your stomach butterflies, here’s a quick rundown on the best way to upgrade your site currently running OnePress Community.
Download the latest OnePress Framework version Use your FTP client to log into your site. Locate the directory /wp-content/themes/ Unzip the downloaded OnePress file and upload it into the /wp-content/themes/ directory You should be prompted whether or not you wish to overwrite the contents of /wp-content/themes/onepress/. Choose “Yes” or “OK.” After uploading is complete, navigate into your /wp-content/themes/onepress/ directory and verify that the directories–images, op, scripts, and widgets–all exist. In your web browser, navigate to http://www.mysite.com/wp-content/themes/onepress/style.css (path may vary depending on site structure), replacing mysite.com with your site’s domain. Verify that the seventh line in the file reads “Version: 1.*.*” (the asterices representing the version you meant to install.) If this is the case, you’re done! Optional. If you are using a OnePress module (i.e. phpBB), verify that the settings.inc.php file exists in the /wp-content/themes/onepress/ directory. If it is not there, create an empty file with that name and set the permissions, in chmod, to 666.Adding onto the Tabbed Content Widget
December 3, 2008
Because we can’t anticipate every single way that you might want to use the tabbed content widget, we have made it extremely extensible with the option of User Function as a tab’s content type. By choosing this type, you can enter the name of a callback function you wish to use to determine the content for that tab in the widget.
Setting up the callback function for custom output in the tabbed content widget is quite simple. First, make sure you choose a unique function that will not create any conflicts. When working in OnePress, I always prefix a function name with “op_” to be on the safe side. After creating, fill the function with the functionality you wish, returning an array consisting of both name and content as keys.
function op_extra_tab(){
$content = 'The content I want to display as a string';
return array(
'name' => 'My extra tab',
'content'=> $content
);
}
Workflow Tips: Building a New Site with OnePress
November 21, 2008
Workflow Tips: Building a New Site with OnePress
Because OnePress is such a powerful framework for building sites, it’s not hard to get overwhelmed by all of the customizations one will want to do. To provide some insight, I have decided to share with you how I start out building new site in which I’m working with OnePress.
First things first, I need to get OnePress installed and activated as my WordPress theme. Doing this is fairly simple as I just need to unzip and upload the theme to my server and browse to my administration panel to activate the theme.
Because OnePress is really a WordPress “Theme Framework,” I am going to focus most of my energy into creating a child theme, which references OnePress for all of its content management features. If you’ve never created a child theme in WordPress before, don’t worry, it’s really straight forward. In my /wp-content/themes/ directory, I am going to make a new directory called “seanasullivan.” This is where all of the files for my child theme will live.
The true magic of this theme takes place in the creation of a style.css file. At the top of the newly created filed, I enter the following:
/*
THEME NAME: Sean A Sullivan
THEME URI: http://www.seanasullivan.com/theme
DESCRIPTION: Use for Sean A Sullivan's site.
VERSION: 1.0.0
AUTHOR: Sean A Sullivan
AUTHOR URI: http://www.seanasullivan.com
Tags: onepress, sean sullivan, sas
TEMPLATE: onepress
*/
Notice the second to last line of the commented code: “TEMPLATE: onepress” This is telling WordPress that it is a child theme and it will derive its functionality from “onepress.”
There exists some base CSS functionality in OnePress that your child theme can easily inherit. This CSS handles the layout, widgets, and navigation CSS. Now, these are default styles to get you off the ground and running. If you wish to customize the look of, for example the widgets, we recommend that you copy and paste the appropriate CSS file into your child theme’s directory for complete control.
To use the default CSS, simple add these lines to the style.css file:
@import url('../onepress/op-layout.css');
@import url('../onepress/widgets.css');
@import url('../onepress/navigation.css');
Now that “Sean A Sullivan” is a valid theme (as far as WordPress is concerned) I am going to go activate it. With this theme active, WordPress will now become my blank slate on which I can setup and style as I see fit.
Activating a new theme
After taking care of my initial layout setup, it’s time to make this all look as desired. Read my next post in this series to learn how I attack a mock up for implementation in OnePress.
Shine the Spotlight on WordPress Posts with the Featured Posts Carousel
November 21, 2008
As you pour hours of energy into writing content for your site, there will be those posts which you would to receive a little more attention than others. With OnePress, you can easily feature posts by using the Featured Posts Carousel. After placing this widget on your main column (we recommend at the top) you can feed your posts into this widget using the tag “feature.”
Concerning the topic of, how it is determined which posts show in the widget, there are a number of factors that come into play, but we have made it fairly automagical. The widget takes into consideration all of the posts that have been tagged “feature.” From all of the posts tagged “feature,” the most recent posts will be displayed. If there are multiple featured posts carousels on a page, it will only display the same post once.
One way you can refine the posts that show up in a featured posts carousel is by selecting an extra tag in the widget’s options. When you edit the widget, you will see a drop down selector displaying the tags available to choose from. Once selected and saved, only posts with “feature” and the extra tag will show up in that carousel. This is incredibly helpful if you have a featured posts carousel widget on your “fall” tag page that you only want to show posts tagged “fall”. For this example, we are going to edit the widget extra class to be “photo,” which will display the features in a gallery style.
Featured Posts Carousel Options
Posts to be used as features in the carousel desire an extra step when being created. This is due to the fact that the featured posts carousel uses an image to represent the post’s content. Assigning the image is easy since OnePress leverages the WordPress media uploader. Just attach the image to the post as you normally would and upon closing the uploader window, you will see the “Image Selection” post meta box populate with the picture you just uploaded. Now just select “Feature” as the type you are going to assign the image for and click the image you just uploaded. Now this will be the image that appears in the feature carousel for this post! We recommend images that are at least 800 pixels wide and 200 pixels tall for use in the featured posts carousel. If it’s a little too big, don’t worry, the widget will only show what it needs.
Choosing the Feature Image
Next, make sure you have the appropriate text as the post’s excerpt, because that is what will be used to give the user a preview for your post.
Edit your post's excerpt to be suitable for the widget
Here is what the post will look like in the feature carousel:
What your feature will look like rendered in the widget
The widget will support up to four posts, rotating through them at a pace perfect to give your readers a chance to comfortably take in all of your features. Controls are also available for jumping between the features quickly.
Getting Started with Your OnePress Layout
November 21, 2008
The beauty of OnePress as a WordPress theme is the flexibility and functionality that you inherit upon activating it to drive your WordPress powered site. With that flexibility, however, comes a relatively blank canvas that you will need to paint to really expose the power of OnePress in representing your site’s content. Your site consists of a number of “layouts” that you need to appropriately configure to your liking.
Each layout type in OnePress has the potential to have its own unique layout. For instance, the display of search results can be totally different than the display of all posts matching a particular tag. If you have not customized the layout for that that is being rendered, OnePress will use your default configuration. The default layout is the backup, if you will. Since this is the case, setting up your default layout the way you wish is a logical first step.
To set up your default layout, log into your administration panel and navigate to Design (Appearance if you’re using 2.7) and choose “OnePress Layout.” Here, you can easily choose how many columns you would like and you can also rearrange their order by dragging and dropping the columns. Once you have set this up appropriately, save changes and navigate to “Widgets.”
OnePress Layout Selector
OnePress sets up your layout using WordPress sidebars correlating to the columns you have chosen. In my case, I have chosen to use a one sidebar (Sidebar1) layout. When choosing the widgets for your layout, your must first select the appropriate sidebar in which to place them. Here, use “Default Main” to adjust the way the main column of your site looks. Once you have “Default Main” active, notice that the “Featured Posts Carousel” and “Content Body” widgets are already there. This is because upon activating OnePress for the first time, these are inserted to maintain basic WordPress functionality. Let’s go ahead and add pagination to your site so users can easily move among the pages of posts. Doing this is simple, just find “OP Pagination” and add it! Let’s go ahead add it twice so there’s pagination on the top and bottom of the page. You might also find at this point in the process to edit the “Content Body” widget, which defines how posts look. We’re not going to make any changes to the default sidebar, but if your wanted to that could be edited by selecting “Default Sidebar1.”
Widgets added to Default Main
Select Default Main Sidebar
Customizing Content Body Widget
Now that you have your default layout set up as you would like, head back over to the “OnePress Layout” screen. Since you more than likely want single posts to display completely different than those pages showing multiple posts, choose to customize the “Single” layout. By doing this, you will now have new sidebars in the widget selection menu. Back on the Widgets screen, choose “Single Main” and add the “Content Body” widget. Go ahead and edit the widget to reflect however you want your posts to look in single mode. Make sure to add the “comment-form” component so users can leave responses to your posts.
Customize Layout for Single
Select Single Main Sidebar
Customizing Content Body Widget
Now that you have customized your default and single layouts, you are well on your way to harnessing the full potential of the OnePress layout. Go ahead and choose other layouts to customize and build out the rest of your site the way you prefer. Keep in mind that you can easily change your layout down the road so be sure to experiment and have fun!
