#15 News Sidebar Carousel

Amy Marsh Is A Fashion Technologist In Training

Screen Shot

 

I am so excited to show you this! For such a pretty little feature, that to the untrained eye might look as if it has taken a while to code… it only take a few steps! Yet afterwards you have something to make your blog stand out from the crowd!

 

Maybe you have two blogs and want to link them up in an aesthetically pleasing way? Or maybe you just want to give another blog the recognition it deserves! Either way you are supplying your readers with more of a reason to go on your blog and that’s what is important!

 

This also is only part one for this widget we will be showing you at a later date how to add in multiple blogs as well.

 

Let’s get started!

 

 

First start by opening up the sidebar.php file and moving this section of code:

 

Above this line of code:

 

 

Add this section of code underneath the search aside tag and again before the ‘sidebar-1 php:

 

NB- You will need to of added the jQuery links and files we added in the featured post slider post here for this slider to work.

You will need to change this section of code you just added to the blog which you wish to take content from, remember to add “/feed/” at the end of the blog url which you wish to take content from:

 

NB-It is only a WordPress site you can add /feed/ at the end to.

Now click on your appearance then widgets and remove the search bar from Sidebar 1:

Screen Shot

 

Now I will go through and explain the section of code you have just added, the whole widget has been placed in an aside tag this is because an aside tag is used for content that should be placed in a sidebar.

 

These two lines of code simply add the the two titles used in it, therefore you may want to change these to something more suitable for your blog:

This section is the slider itself:

 

These details add the functions of the slider:

 

 

And this one helps combine the image and the title of the blog post which the image is from together because the have been joined together in a div with a class slider-news:

 

 

This section of code collects the feed from the website you are getting posts from and loads their posts urls:

 

This section of code shortens the title of the blog post you have imported in:

 

And then finally this section of code pulls in the images and the shortened title:

Now we can add the style, first I changed the over all look of the widgets’ title by centering the words and making the under of the title thicker. To do this change your h1.widget-title already in your style.css file to this:

 

 

Now for the slider! Add this section of code to the bottom of your style.css file:

I am not going to go through the styling code this time, set yourself a test and see whether you can decipher what each section does, you’ll be a better coder because of it!

 

DAY 15 COMPLETE!

Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!

Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">