#16 Fixed ‘Discover More’ Bar on Blog Post

Amy Marsh Is A Fashion Technologist In Training

discover more

 

It is the weekend and to start it off here is a cute feature to add to your blog!

I have made a discover more bar that shows as you scroll down a post to help promote other posts on the blog and increase user engagement.

I had to drag myself away from playing with what I made to start writing this tutorial! Try and sweep across the circle buttons just the once! It can’t be done!

This task was not that easy however I do feel like I am getting my head around coding more and more as I go on, with confused plea’s getting fewer.

 

Let’s get started!

 

First add this section of code to the content-single.php at the bottom just before the closing article tag (</article>):

 

 

This section of the code just added, sets the amount of posts shown in the footer, it brings the posts up in category 3 and it does not sure the current post you are as an opinion to click on. The next section asks if there are posts to be display:

 

 

In order find out what a category’s number is select posts then categories in the WordPress admin and hover over the category you wish to display posts from, and this url will appear in the bottom left hand corner. You can see here the category and tag id equals 3 therefore this is the category number I have entered in the code above:

Screen Shot

 

Next add this section of code to the bottom of the main.js file:

 

 

From the section of code we just added here you will notice it is similar to the jQuery we added for our fixed navigation bar, in the sense that it adds a class fixed. Here the code is adding the fixed class if the entry-content div has reached the top of the page:

 

 

This section of the code just added deals with the mouse over effect:

 

 

 

Next, add this section of the code to the functions.js file, this code will set the dimensions of the images it brings:

 

 

You need to add these to this section of code that should be already present in the functions.js file, it should look like this:

 

Next download and add this plugin to your WordPress site, now when you select tools you should have the option Regen. Thumbnails:

 

Screen Shot

 

Click on this and select the option to regenerate thumbnails:

 

Screen Shot

 

Finally add this styling to the bottom of your style.css:

 

I will now go through parts of the styling.

This part is styling the bar and telling the style what to do when the bar gets a class of fixed:

 

The inner div has been added to help make what in the bar centered:

 

The #ball-nav is setting up circles themselves:

 

 

This feature with the “>” included  means add this design to the first div in the span only:

 

NB- I have now added a footer to the site therefore I have had to change the code added in the main.js to this instead:

 

 

DAY 16 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="">