Oxygen Theme Tutorial – Using the Showcase Page Slider

***** Note: The explanation in this blog post is for wordpress.com users. For anyone with a wordpress.org account, please head to this link -> http://alienwp.com/documentation/oxygen-theme-documentation/ *****

————————————————————————————-

I had an incredibly hard time trying to achieve the beautiful and professional look that’s shown in the Oxygen Theme demo picture. But, good thing for me, and you, that I’m incredibly stubborn and I hate giving up!

Thus, I’m able to explain to you how I went about getting the look I was aiming form.

My explanation may be a bit too detailed for some of you, but I would have liked to have a step-by-step process like this.

For the wordpress.com users, this link has all of the basic instructions on how to get a page that looks similar to the “Oxygen” demo picture -> http://theme.wordpress.com/themes/oxygen/

What you’re specifically looking for here, though,  is the “Showcase Page” slider template.

So that you understand what this actually is, (I had issues with this at first) the “Showcase Page” slider is basically a scrolling stream for 6 sticky posts. I like to think of it as a slide show.

Before you start assembling your “slide show”, you’ll have to designate your desired page for the “Showcase Page” slider.

Note: Pages and posts are different things. A page is a place where you assign posts, a post is merely a post.

If you have not created a page you want to use, please do this:

1) Hover over your blog name at the top left corner of your screen, then click on “dashboard.”

2) From the dashboard section, choose the “pages” tab.

3) Select the “Add New” option from this tab to create your page.

4) You do not have to add anything to the text portion of this page, but do add a title. Also, if you want a banner on this page, do that by adding a “featured image” using the option at the bottom right. Just follow the prompts.

5) Click “Publish” or “Update” in the right margin to save the changes you made to this page.

If you want this “Showcase Page” slider to be your front page, you’ll have to make the page “static.”

Make your page static by:

1) In Dashboard go to the settings tab.

2) Under settings, choose the “Reading” option.

3) When this window opens, at the very top you’ll see a section for “Front Page Displays.”

4) Choose the option for a static page.

5) Right below that, you’ll have the choice to pick which page is your “Front Page.”

6) After you select the page you want, click “save changes” at the bottom of this window.

Now you can go ahead and start assembling your “Showcase Page” slider.

Instructions on how to get to the “Showcase Page” option:

1) Click on Dashboard at the top left of your page, and go to the “pages” tab.

2) Select the page you want your “Showcase Page” slider to appear on. (Typically that would be the page you just set as “static.”

3) On the opened page editing screen, you should have a box along the right margin that says “Page Attributes.” If you don’t see that box, click on the “screen options” tab at the top right of your page, and select the box that says “Page Attributes,” and you should now be able to see it in your editing window.

4) Under “Page Attributes” go to the drop down under “Template” and select “Showcase Page.”

Selecting this will give you the space you see in the “Oxygen” demo where there’s a large picture at the top of your page with a back and forward arrow at the bottom corners of the picture.

At this point, if you can see the space on your page, but there’s no picture and title in that space, it’s because you do not have any of your posts set as “sticky.”

Like I said earlier, the “Showcase Page” slider is just a scrolling stream for 6 sticky posts, much like a slide show.

To start assembling your “slide show” with “sticky” posts, follow these instructions:

1) Go to dashboard.

2) Select the “Posts” tab.

3) Choose the post you would like to have in the “slide show.”

4) Once in the post editing window, look for the “Publish” section near the top of your window.

5) Click on “edit” for the “visibility” portion.

6) Make sure the “public” option is selected.

7) Check the box that says “stick this post to the front page.”

8) Click “update” to save these changes.

Now, ideally your post should appear in the “slide show.”

Head over to your home page of your blog to see what it looks like.

If you still can’t see your post, here are some trouble shooting tips.

1) You may not have a “featured image” selected for that post.

– You need to select a “featured image” for your post in order for it to appear in the “slide show.”

To do this, you simply have to open the edit window for your post, scroll to the bottom right, and follow the prompts to select a featured image. Click “update” to save your changes.

2) Your “featured image” isn’t the right size.

– In order for your post and “featured image” to appear in the “slide show,” it has to be bigger than 750 pixels wide.

The following text is the exact excerpt from the “featured image” directions for the “Oxygen” theme. You can also find it here -> http://theme.wordpress.com/themes/oxygen/

Post thumbnails are 470 pixels wide, unless you make the post Sticky to show off in the featured slider, in which case they’re 750 pixels wide. Keep in mind: if you mark a post as Sticky but the featured image is less than 750 pixels wide, then it won’t display in the slider and will still disappear from the river of posts.

Keep in mind that it says 750 pixels WIDE.

That should be all you need to get the basic “Showcase Page” slide show effect on your page.

Some other things to remember:

– You can only have 6 “sticky” posts in the slide show. All other posts beyond that marked as “sticky” will not appear in your slide show, and it will be hidden from the blog list on the main page.

– You can decide whether you want to have a “header banner” on your “Showcase Page.”

To do this, you’ll need to go to the editing window for your selected page, and insert a “featured image” the same way you would for a blog post.

Keep in mind the dimensions for the header.

I don’t know the exact pixel size, but check this link for more information regarding headers -> http://en.support.wordpress.com/themes/custom-header-image/

This was long, but I do hope it helps. I would have benefited from a step by step instruction list like this.

Take care, and I hope your blog flourishes even bigger and better than you hoped!

~ RQ

Advertisements

45 responses to “Oxygen Theme Tutorial – Using the Showcase Page Slider

  1. Hi. I have done everything you said and it worked but my posts aren’t in a slider they are just one under the other. But when I got to customize the theme on my preview is shows up as a slider but not when I return to my actual website. Is there a way to get in them in the slider or not? I really need help with his. I am using hosting through hostgator and I have a website not a blog, if that makes any difference. Please help me out with this.

    • Hello!

      I’m sorry to hear you’re having a hard time. I know how frustrating that is.

      My first thought is that you’re using a wordpress.ORG platform, and not wordpress.COM. My instructions are for wordpress.COM.

      This site has instructions for wordpress.ORG users -> http://alienwp.com/documentation/oxygen-theme-documentation/

      My second thought is that your featured images are not the right size. The images have to be at least 750 pixels WIDE in order for them to show up in the slider.

      Other than that, I’m not sure what it could be.

      If you followed my instructions that should get you the slider if you’re using the wordpress.COM platform.

      Let me know if either of those solutions work!

      RQ 🙂

      • i know my images are all the correct sizes if you go to my website 1cyberplaza.com you will see what i am talking about. this is really frustrating and i am just looking for a solution. thank you for you time.

  2. THANK YOU, i have been searching for quite a while already. I tried different explanations from other bloggers, but your´s is the best. I had it done in about 10 min. Amazing. Thank you so much.

    • Hello!

      Happy to hear the information helped!

      I’m sorry to say that I don’t know the answer to your question off the top of my head. When you say “recent” and “more” articles, which section are you talking about?

      • I’m talking about the ‘Recent articles’ section in the front page. Can I change the number of blog posts shown under recent articles? Currently they only allow a maximum of 3. Let me know if you know the answer. Thank you.

      • Ok,

        After some research and comparison I have concluded that there is a default setting for 3 articles and that cannot be changed.

        I decided this after reviewing all of the options in dashboard, and looking at other Oxygen theme blogs. You can see 6 examples at the official template page -> http://theme.wordpress.com/themes/oxygen/

        If you look at those sites, you’ll see that they all have only 3 items in the “recent articles” section. It looks like there is an unlimited amount of items that appear in the “more articles” section right below the “recent articles” portion.

        I hope this helps!

        RQ

  3. hi! Just wanna say thanks for this! i have been using the Oxygen theme for months and I haven’t figured out how to use the Showcase template until I saw this. You made my blogger life a whole lot better. haha!

    • Awesome! I’m so happy for you!

      I must admit that getting the slider on your own is a little too complicated and not very user friendly. At this point in time when internet use is so important, it’s beyond me that programmers and developers still don’t understand the importance of making things accessible and easy to use/understand.

      I still had to go through much trial and error when trying to figure out the wordpress provided instructions to figure out how to get the slider to work. If I can write a guide, then someone working for wordpress should be able to I would imagine.

      Take care, and happy blogging!

      God Bless 🙂

      Tanara

  4. I really love this theme and want to keep it, but I can’t seem to get my in post links to work. It’s driving me crazy. I tried activating another theme and the links worked fine, but not with this one. Is there a trick to this that you know of?

    • Hello,

      Ok, let’s trouble shoot.

      1) Are you a wordpress.COM or wordpress.ORG user? If you’re a .ORG user, I won’t be able to help you, but this person may be able to -> http://alienwp.com/documentation/oxygen-theme-documentation/

      2) Do you mean the links you post like ‘www.god.com,’ or are you talking about hyper links? I’m not trying to be patronizing when I say this, but a hyperlink is when you use a word that is linked to a specific website. When you click on the word, it sends you to the webpage.

      3) I have found that using wordpress.com in certain browsers can be difficult. For a while I had to have two browser windows open (firefox and internet explorer (IE)) to do different things. Sometimes pictures weren’t uploading properly in firefox, so I had to use IE, and sometimes formatting wasn’t working in IE so I had to use firefox. Have you tried using a different browser?

      4) It appears that there’s a positioning option you may have to look at changing. I found someone who appears to have the same issue as you did -> http://wordpress.org/support/topic/links-within-content-not-working.

      Scroll down the the page and read the solution he/she found.

      If none of this helps please let me know and I’ll try to help you find a solution as best as I can.

      Stay positive, we’ll figure it out!

      RQ 🙂

      • awwww, thanks so much for rolling your sleeves up and offering some very helpful tips! I actually did get it working. I’m using wordpress.org and the problem was that my social comments plugin was fighting with the some of the theme functions.

    • Hello,

      Sorry for the late reply.

      Because you have an official url, I’m guessing you’re using the wordpress.ORG program? If so, then sadly I won’ be able to help you. My tutorial is for wordpress.COM users. If you go the the very top of this tutorial, you’ll see a link I posted to someone who can help you with wordpress.ORG. -> http://alienwp.com/documentation/oxygen-theme-documentation/

      If you’re a wordpress.com user, I’ll do my best to help, but please let me know first which wordpress platform you’re using.

      Thanks, and I hope this works for you!

      RQ

  5. Hello, Congratulations on your tutorial.

    I’m following the steps, but when I get in step 4 (4) Under “Page Attributes” go to the drop down under “Template” and select “Showcase Page.”), Does not have the “Showcase Page.” The options – Archives, Bookmarks, Front Page, Full Width.

    What can I do?

    thank you

    • Hello Antonio,

      Thanks for the note!

      May I ask, are you using wordpress.com or wordpress.org?

      I did some preliminary trouble shooting for you and couldn’t figure out why you’re having issues.

      I know that wordpress.org and wordpress.com offer different setting options, and the process can be a lot different depending on the platform you use.

      I did a google search and found this post -> http://alienwp.com/documentation/oxygen-theme-documentation/

      The images shown here have the same options in your “template” dropdown as you explained.

      According to that link, you have to choose the “front page” option in the “template” drop down.

      If this doesn’t work for you, please let make now and we can continue to trouble shoot.

      Take care, I’ll say a prayer that you get the issue resolved!

      ~ RQ

    • I should also add that the link I posted for you is for wordpress.org, which I suspect is why you’re having issues with my blog insturctions.

      I’ll edit my blog today to reflect that it’s for the wordpress.com platform.

      Thanks and happy blogging!

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s