How to Add a Main Slider to Read WP Theme?

  • Posted in : Read WP
  • Mehmet Sali
    Keymaster

    Important: Do the steps below only for yor blog type.

    – for Blog Type: No Sidebar

    – for Blog Type: Sidebar

    – for Blog Type: Masonry



    for Blog Type: No Sidebar

    – create a new page with name is “Slider”,

    – don’t add this page to your custom navigation menu,

    – use [inline_slider] shortcode in that page’s content like this:

    [inline_slider autoplay="true" ]
    	[slide src=""]Slide one title[/slide]
    	[slide src=""]Slide two title[/slide]
    	[slide src=""]Slide three title[/slide]
    [/inline_slider]
    

    – go to Appearance > Editor > blog-nosidebar.php

    – find the line below at the top of the file:

    get_header();
    

    – paste the code lines below after that line, like this:

    get_header();
    
    echo '<!-- Main Slider -->';
    query_posts( 'pagename=slider' );
    while ( have_posts() ) : the_post();
    	the_content();
    endwhile;
    wp_reset_query();
    echo '<!-- end Main Slider -->';
    


    for Blog Type: Sidebar

    – create a new page with name is “Slider”,

    – don’t add this page to your custom navigation menu,

    – use [inline_slider] shortcode in that page’s content like this:

    [inline_slider autoplay="true" ]
    	[slide src=""]Slide one title[/slide]
    	[slide src=""]Slide two title[/slide]
    	[slide src=""]Slide three title[/slide]
    [/inline_slider]
    

    – go to Appearance > Editor > blog-sidebar.php

    – find the line below at the top of the file:

    get_header();
    

    – paste the code lines below after that line, like this:

    get_header();
    
    echo '<!-- Main Slider -->';
    query_posts( 'pagename=slider' );
    while ( have_posts() ) : the_post();
    	the_content();
    endwhile;
    wp_reset_query();
    echo '<!-- end Main Slider -->';
    

    Important for Blog with Sidebar: Paste the code below to Appearance > Theme Options > Style > Custom CSS:

    #primary { margin-left: 0px; }
    


    for Blog Type: Masonry

    – create a new page with name is “Slider”,

    – don’t add this page to your custom navigation menu,

    – use [inline_slider] shortcode in that page’s content like this:

    [inline_slider autoplay="true" ]
    	[slide src=""]Slide one title[/slide]
    	[slide src=""]Slide two title[/slide]
    	[slide src=""]Slide three title[/slide]
    [/inline_slider]
    

    – go to Appearance > Editor > blog-masonry.php

    – find the line below at the top of the file:

    get_header();
    

    – paste the code lines below after that line, like this:

    get_header();
    
    echo '<!-- Main Slider -->';
    query_posts( 'pagename=slider' );
    while ( have_posts() ) : the_post();
    	the_content();
    endwhile;
    wp_reset_query();
    echo '<!-- end Main Slider -->';
    


    – Work carefully.

    Note: For more info about [inline_slider] shortcode go to Documentation > Shortcodes > Inline Slider.

    Selektor
    Participant

    I probably wasn’t doing something right, but i tried these steps and no slider showed up, just an empty page. Btw, I don’t have a blog, just a plain ‘ol site, not sure if that applies here.
    But i did use [inline_slider] shortcode on the homepage to add my slider, and that worked. I’m just not sure if that’s the right way to go about it.

    Mehmet Sali
    Keymaster

    Your way is the right way for you. Because you don’t have a blog.

    filroots
    Participant

    Hi, how would you make the images in the slider link to certain blog posts?

    Thank you!
    Philippe

    Mehmet Sali
    Keymaster

    Sorry, I’m not exactly sure what you’re asking?

    filroots
    Participant

    OK, the Main slider i added at the top of the home page contains images. 3 images that rotate right now. It looks great. I want these images to link to a blog post within the website as these images reflect the blog posts. How can I achieve that?
    thanks
    Philippe

    Mehmet Sali
    Keymaster

    Hi, it is a good idea. I will release an update with this feature in few days.

    Thanks for the feedback.

    Note: At this time you can use link text in the slide title if you want.

    Example:

    [inline_slider autoplay="true" ]
    	[slide src=""][/slide]
    	[slide src=""]Plain text title[/slide]
    	[slide src=""]Link title[/slide]
    [/inline_slider]
    
    schindlergraphics
    Participant

    I implemented this for my blog (adamschindler.com) and when I did it removes the post “Read More” formatting. So I removed the above code snippet from “blog-masonry.php” and it restores the “Read More” formatting. Any ideas?

    Mehmet Sali
    Keymaster

    Please try again step by step carefully. Don’t forget any step.

    justintime67
    Participant

    Any ideas why this banner is cascading and not all showing on the same horizontal line here – http://www.endthewar.com.au/?

    Have dug deep into css and the code and can’t seem to see why it is happening..?

    ahmetsali
    Keymaster

    Hi @justintime67

    i just checked your site and your slider markup is wrapped by a pre tag, remove that pre tag and it should be fine.

    Alex
    Participant

    Hi,

    I tried to add a slider, and followed your instructions for a masonry front page, and nothing is happening. As in, no slider is visible/loading on the front page.

    Please advise, thanks!

    Alex
    Participant

    Further to my query, I forgot to mention my website is: http://www.spec-fiction.ca

    Thanks!

    Mehmet Sali
    Keymaster

    Hi, did you use the shortcode for the reference page?

    Alex
    Participant

    Hi Mehmet,

    In answer to your question, yes. I used the shortcode, and followed all the steps as written out on this page. But nothing shows up on the front page.

    ahmetsali
    Keymaster

    Hi, we have just released an update with the fix. You can download and update.

    Alex
    Participant

    Thank you!

    So far, everything seems to now be working. The slider appears, and is scrolling. The update seems to have done the trick.

    Again, my sincere thanks.

    Mehmet Sali
    Keymaster

    You are welcome.

    DualiasS
    Participant

    Hi Mehmet,

    Would it might be possible to modify the template so that the slider won’t show’s up under the navigation menu anymore (and before post header for post pages or first post post header for archive pages) but, in a pretty much more readable way I think, between the website tagline and the navigation menu?

    The weird impress for now is that you don’t usually see banners at this place —and I personally choose to use this cool hack you made as a banner replacement, see (?! ^^), not for navigation throught articles…

    The result isn’t fully satisfying on my page actually : Dualias(.fr).

    Thx,

    Stan

    Mehmet Sali
    Keymaster

    Sorry, it is not possible by default.

    DualiasS
    Participant

    Well anyway! Thanks fort giving me at least a clear answer :)

    Now I tried to simply add an image at this place, thanks to the header social icons widget and his perfect location on the page for that mean, and it fits well enought… except one important detail, image doesn’t adapt his size depending on the client screen size or ppi. In my case (an iPad Air + M7), full size is ideal but absolutely not recommended for a common or cheap smartphone with a slow data connection (really too slow…).

    Would you have a kind of solution (even if it’s not ‘clean’ or ‘nativ’ one)?

    Thx,

    Stan

    ahmetsali
    Keymaster

    @dualiass

    There are several methods for responsive image solution, you can check out the post below, and choose what suits you best.

    http://www.smashingmagazine.com/2014/02/03/one-solution-to-responsive-images/

    Mehmet Sali
    Keymaster

    You can use inline_slider shortcode with the Text widget to create a slider in the header.

    helikoppter
    Participant

    Hi,

    I’m looking for a way to have the slider centred with a fixed height & width without having to upload separate images. Is there an easy way to achieve this today?

    Cheers,
    Anna

    ahmetsali
    Keymaster

    @helikoppter

    Hi, can you provide your related page url?

    pageoflife
    Participant

    The Yandex browser image slider hidden. The images are not visible.

    pageoflife
    Participant

    Excuse me, it works. The problem was one of the additions to the browser!

    pageoflife
    Participant

    I tried to make the slider. But it turned out why something small.
    http://savepic.ru/9402245m.jpg
    In addition, it uses the name of the image file (slider.jpg), instead of the short code files

    serkan
    Moderator

    Hi pageoflife,
    Could you provide me your related url please?

    berelkovsky
    Participant

    I tried to make it, but I failed. Sidebar was huge and took the place of whole screen. Is it possible to make it of minimum size?
    Thanks.

Viewing 30 posts - 1 through 30 (of 39 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register