The new kid on the block, Vellum.

Our latest and greatest theme, Vellum, has arrived! Vellum – Responsive WordPress Theme

Runway Framework on Github!

Check out our open source Runway Framework on Github!

Tutorials

Blog Slider Widget for Salutation

What we are going to do here is create a little sidebar widget that displays the most recent post in three categories, one at a time in a slideshow.

Go to Appearance > Sidebars & Top Tabs and add a new sidebar; for its Title use “Blog Slider Sidebar” and for its Alias use “blog-slider-sidebar”.

Our blog slider widget will display latest posts in different categories with each peeling off to reveal another underneath.
Go to Appearance > Widgets and drag a Text widget into the Blog Slider Sidebar area. Make sure that Automatically add paragraphs is disabled, for the widget content use [slideshow alias="blog-slider-slideshow"] and click Save to save the widget.

Go to Appearance > Slide Shows and add a new slideshow.

  • Title of slide show: Blog Slider Slideshow
  • ID (unique identifier): blog-slider-slideshow
  • Width: 210
  • Height: 250
  • Timing: 10
  • Transition: turnDown
  • Pause on hover: Yes
  • Columns: 1

Click Save Slide Show to save these settings, then back in Design Settings click on the Blog Slider Slideshow name to get back to the settings page so we can add some slides.

Click Add new Slide to add our first slide. The only setting that needs changing from the default is the Slide format option which we need to set to Content only (custom).

In the Slide content area use the following shortcode for our content:

[blog category="11" images="true" image_width="210" image_height="50" post_content="excerpt" excerpt_length="50" author_avatar="false" comments_link="false" show_category_list="false" show_tag_list="false" posts_per_page="1" paging="false" read_more="more"]

Note that I have used a category ID number of 11, but your categories will have different numbers so you must go and find out what your category IDs are and specify an appropriate ID in your shortcode.

To find out what the ID of a category is, go to Posts > Categories, hover the mouse pointer over the category name and look in the status bar; you will see a parameter that begins tag_ID= and the number after the equals sign is the category ID.

Tip: The plugin Simply Show IDs makes it easy to find IDs for categories, pages and posts by displaying them in the WP admin next to the item.

Click Save Slide and then add two more slides each using the Content only (custom) option for the Slide format and for the content use the same shortcode as before, only change the category ID number to the ID of a different category. Don’t forget to click Save Slide each time.

Lastly we need to add some polish to our blog slider by tweaking a few styles. So let’s go to Appearance > Design Settings and add the following styles to our Custom CSS box:

.blog-slider-sidebar .contentSlide .inner { padding: 0 !important; }
.blog-slider-sidebar .item-container .the-post-content {padding-top: 12px !important; }
.blog-slider-sidebar .post-header-info address, .blog-slider-sidebar .post-header-info .published { font-size: 9px !important; font-weight: normal !important; font-style: normal !important; }
.blog-slider-sidebar .post-header-info .published { float: none !important; padding-left: 5px !important;}
.blog-slider-sidebar .content-post-list .hentry .entry-header { margin-bottom: 10px!important; }
.blog-slider-sidebar h2 { font-size: 12px !important; }
.blog-slider-sidebar .read-more { display: inline !important; margin-left:5px;}
.blog-slider-sidebar .item-container { -webkit-box-shadow: none !important; -moz-box-shadow: none!important; box-shadow: none !important; }

All that is left to do now is to deploy the sidebar. We can do this either via the layout manager by setting a sidebar page element for a page layout to be our Blog Slider Sidebar, or we can use [sidebar alias="blog-slider-sidebar"] in some content somewhere. Note that our blog slider has been designed to be used in a 1/4 column, if you use it in any other width column it may not look quite right and you may need to tweak the slideshow width and height settings.  



Resources