Responsive WordPress Theme Tutorial – Part 9 – FlexSlider + WordPress Loop

Wordpress Tutorials

Responsive WordPress Theme Tutorial – Part 9 – FlexSlider + WordPress Loop


We setup our custom FlexSlider and give it the ability to dynamically pull content like text and images from our database. We also discuss the most basic way to modify the WordPress loop.

Download the Slider Files:

Music by DeceasedSuperiorTechnician. More at:

What’s this series about?

In this series we are going to create a custom WordPress theme from scratch. We will learn how to create WordPress themes, use advanced features such as: custom post types, custom fields and meta data. We will be focusing our theme on a site based on a site like Kongregate.com or Armorgames.com.

Links
———
Skeleton:
WAMP:
Wordpress:

Website:
Twitter:

36 Comments

36 Replies to “Responsive WordPress Theme Tutorial – Part 9 – FlexSlider + WordPress Loop”

  1. i cant download the slider file from awfulmedia.. where i can find the slider file..pls reply…i really need this

  2. awesome series, really well done. I am however, giving up on creating my own theme and will just find a good free one on wordpress. After my slide bar got messed up moving the firefox window (super frustrating and stressful) I’m going to be like water, and take the path of least resistance. Awesome series though, clear presentation and funny! I’m just not good at this stuff lol

  3. Hi Austin; Thanks so much for your time — I have a question about flexing the slider.

    My ‘featured’ image posts are resizing with horizontal distortion when I have a smaller window. I’m not sure how to go about fixing this, would be very appreciative for a push in the right direction! Thanks again!

  4. @Steven Dana @Awful Media

    First off, Austin, I’m loving the videos. Going through them one by one. Loved the first series.

    Steven, your problem with the distortion, I was having trouble with myself and I think I may have a solution. . . A fun css selector. (bare in mind, I’m very new to website development.)

    Inside your media query css, add in this line to both your mobile and tablet queries.

    .flex-viewport ul.slides li img {height: auto}

  7. wow this is incredible. one question what are you using with sublime to show the descriptions of the html tags and the auto fill wordpress php parts? thanks!

  8. Hi Austin, thanks for the series, much appreciated! As soon as i complete my blog, i’ll link up your tutorials if you dont mind. But for now I have a question: when im looking at the site on smaller devices, the menu stays behind the slider and impossible to see it… any hint where to look for the solution?

  9. actually, the dropdown menu stays behind the slider, and not showing on the top of it…

  10. Thank you so much! I couldn’t figure out why this wasn’t working, and then I realized I hadn’t set the posts to “featured”.

  11. I do not understand what i have done wrong. By the end of this video all i seem to have is a next and previous button on the side of the page which do nothing. I can’t see any of the flexslider with the posts. Help please.

  13. Hi guys i have been following this tutorial since the beggining and i have to say it is amazing, I do however have a problem with my slideshow. I have linked the flexislider.css file in my head and everything i showing up but for some reason the slideshow has came out to the full width of the screen. Any ideas where i have gone wrong?

  15. Hey Austin, awesome tutorial! I went to download the files on the address you gave but the site is unavailable 🙁

    cheers!

  17. I’m so dumb. i searched for my mistakes everywhere until i finally red this comment. :D. I really forgot to link the flexslider. 😮

  18. Hey Austin, awesome videos. They’ve helped me start understanding how wp and the code connect. I’m having the same problem as DriftedMass. My slider is showing up at the full width of the screen…What am I doing wrong?

  19. The slider doesn’t show on my site :/, I tried downloading and activating your theme from your site, but a lot of elements aren’t showing there either…

  20. Great so far.  I noticed a few people said their slider spanned the entire width of the screen.  Be sure to remove the last tag from the header file.  Your header file should be ending with as the last thing.  I had the same problem.

  21. thank you for the great tutorials of wordpress theme development. i was looking for something like this since a while 

  23. Don’t know how can you memorize so much stuff, i mean, so many variables, and then there are the ones that create the compilers, like wordpress, the language HTML, CSS,jQuery and etc etc etc, you guys are not normal…

  24. My slider is missing the square buttons in the bottom left corner and underneath the slider it shows:
    “1
    2
    Previous
    Next”

    Is this just a CSS issue? Also, some people have mentioned linking the flexslider css in the header. How is this done?

  25. You have done an outstanding job of explaining this section of the loop. A suggestion I have is that you should show the end results first so we have a feel for where the presentation is going.

    Also, how the discussion pertains to the interaction of the administrator would be a value.  

  26. Hate to seem like I’m just re-posting peoples comment for attention, but I feel it well help others who come along. Simon Gomes provides a fix for the problem I was having with the styles not working and getting a strange result on render. Example: seing number “1 2 3” and “next previous”.

    “Simon Gomes” 1 year ago
     
    Nice work Austin, though was getting trouble to get it working at the first place.But I figured (haha ‘figured’) it out after a bit digging. You forget to mention few things – 1. linking the flexslider.css file 2. Categorizing the posts. We should add the “Featured” category to all those posts. Basically ‘category_name’ => ‘Featured’ not looking for the category name “Featured” it looks for the category slug. If someone has the category slug other then “featured” or “Featured” it won’t work.

  27. Great series thus far. After trouble shooting the css link and featured category per link below, I also noticed that my drop down menu does not work. I expect it has something to do with css. Does anyone have a similar problem, and ideally a solution 🙂

  28. Hi, 
    I wanted to wait till the end of the series to tell you that you are doing a great job but I got stuck here :)) My Next and Prev buttons are sitting under the slider, not styled (in a blue square or something), they work properly but they are made of text and look silly. Is anyone having the same problem? 
    Thank you, keep up the great work!
    Cheers

  29. For some reason my flexslide is showing up on top of my nav menu. Did I miss something? 

  30. Hello Ostin! I have the same problem with downloading. The link is broken. Could you please upload files one more time? 

  32. the download link is broken, could i get link to download please… thx austin, u r awesome.

  33. hello all, the .rar i download seems to be curropted can you send a new link with files , love this tutorial very easy to follow. Keep it up.

  35. any one help? i show this tutorial ans work when i complete the work my slider donst show . how find the problem

Comments are closed.