Flexslider for wordpress

Question

So in the how to create a wordpress template tutorial, I ran into a problem with Flexslider. In the /* Direction Nav */ section of the file, we are to change the director under the background images but the flexslider I just recently downloaded from the provided website, has no background image. Maybe the new flexslider doesn't need it? As it's an updated one.

Any feedback would be appreciated.

Answer 1 · 2013-09-17T22:41:49Z

September 17, 2013 10:41pm

Try seeing if this thread will help: https://teamtreehouse.com/forum/flexslider-url-images-not-found

Answer 2 · 2013-09-11T18:28:13Z

September 11, 2013 6:28pm

jQuery FlexSlider v2.2.0

http://www.woothemes.com/flexslider/

Answer 3 · 2013-09-12T22:48:09Z

September 12, 2013 10:48pm

Hey mate! Sorry about that. Try searching the forums for 'flexslider' there are a couple of suggestions on how to work with 2.0 :)

Answer 4 · 2013-09-13T02:27:59Z

September 13, 2013 2:27am

Thanks a lot Zac

Answer 5 · 2013-09-17T21:58:18Z

September 17, 2013 9:58pm

Ok I continued with the tutorial and everything is good except I ran into a few problems. The flexslider is working but the arrows and play/pause button dunno appear. They appear as a square with borders only, same for the social network buttons. They are attached to the head though, they appear in the head section.

Secondly, It does not display the image I selected in the work area, only its directory for example instead of the image I get this on the flexslider:

img src="http://localhost/yourwebsite.com/wp-content/uploads/2013/09/image.jpg" alt="image text Project Screenshot">

And third, I chose the color for the background in the work custom post but it does not display the color on the flexslider.

Any ideas?

Answer 6 · 2013-09-17T22:59:22Z

September 17, 2013 10:59pm

Yes, that works :), one problem solved.

Second problem is when I go to Work (field group we created) I put in the URL and everything that is asked including the colour for the background, the description, title displays perfectly on the slider but it doesn't display the background (color picker) I chose for that specific work and the image displays as a directory.

Answer 7 · 2013-09-17T23:04:07Z

September 17, 2013 11:04pm

Can you get the correct hexadecimal code to output?

Answer 8 · 2013-09-17T23:08:09Z

September 17, 2013 11:08pm

yeah #1e73be..not sure if that's what you mean

Answer 9 · 2013-09-17T23:10:46Z

September 17, 2013 11:10pm

Field Label: Background Color Field Name: background_color Field Type: Color Picker Field Instructions: select the color..... Required? No Default Value: #fffff Conditional Logic: No

that's what I have

Answer 10 · 2013-09-18T01:48:44Z

September 18, 2013 1:48am

Okay, if you can get all of that to output on the front end, it might have to do with proper markup.

Can you post up your php code for the loop.

See this article for how to best post code: https://teamtreehouse.com/forum/how-to-type-code-in-the-forum

Answer 11 · 2013-09-18T01:58:11Z

September 18, 2013 1:58am

front-page php

<?php get_header(); ?> </div> <div id="featured" class="clearfix flexslider">

    <ul class="slides">
    <?php 

        $args = array( 
            'post_type' => 'work'
        );


        $the_query = new WP_Query( $args );

    ?>


    <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <li style="background-color: <?php the_field( 'background-color' ); ?>">
    <div class="container">
        <div class="grid_8">
            img src="<?php the_field( 'homepage_slider_image' ); ?>" alt="<?php the_title(); ?> Project Screenshot">
        </div>
        <div id="featured-info" class="grid_4 omega">
            <h5>Featured Project</h5>
            <h3 style="color: <?php the_field( 'button-color' ); ?>"><?php the_title(); ?></h3>
            <p><?php the_field( 'description' ); ?></p>
            <a class="btn blue" style="background-color: <?php the_field( 'button-color' ); ?>" href="<?php the_permalink(); ?>">View Project &rarr;</a>
        </div>
    </div>
    </li>
    <?php endwhile; endif; ?>
    </ul>


</div>

<div class="container clearfix">
    <div class="grid_12 omega">
        <h5>Featured Post</h5>
    </div>

        <?php

        $args = array(
            'post_type' => 'post',
            'category_name' => 'featured',
            'posts_per_page' => 1
        );

        $the_query = new WP_Query( $args );

        ?>

        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <div class="push_2 grid_10 omega clearfix">
            <article>

            <?php get_template_part( 'content', 'post' ); ?>

            </article>
    </div>

    <?php endwhile; endif; ?>

    <div class="grid_12 omega clearfix">
        <div class="grid_6 recent-post">
            <article>
                <h5>Recent Post</h5>
                    <?php

                    $args = array(
                        'post_type' => 'post',
                        'cat' => -1,
                        'posts_per_page' => 1
                    );

                    $the_query = new WP_Query( $args );

                    ?>

                    <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                        <?php get_template_part( 'content', 'post' ); ?>

                    <?php endwhile; endif; ?>
            </article>
        </div>


        <?php 

            $args = array( 
                'post_type' => 'work'
            );


            $the_query = new WP_Query( $args );

        ?>


        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

            <?php get_template_part( 'content', 'work' ); ?>

        <?php endwhile; endif; ?>

    </div>

<?php get_template_part( 'content', 'testimonials' ); ?>

<?php get_footer(); ?>

content-work php

<div class="grid_6 spotlight project" style="background-color: <?php the_field( 'background-color' ); ?>">

    <a href="<?php the_permalink(); ?>">
        img src="<?php the_field( 'homepage_slider_image' ); ?>">
    </a>

    <h4>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </h4>

    <?php the_field( 'description' ); ?>

    <p>
        <a class="btn blue" href="<?php the_permalink(); ?>" style="background-color: <?php the_field( 'button-color' ); ?>"> 
            View Project &rarr;
        </a>
    </p>

</div>

Answer 12 · 2013-09-18T15:12:46Z

September 18, 2013 3:12pm

When you look at the source code is the background color showing up as an inline style?

Answer 13 · 2013-09-18T15:44:56Z

September 18, 2013 3:44pm

No I removed those...this is my frontpage.php

<?php get_header(); ?> </div> <div id="featured" class="clearfix flexslider">

    <ul class="slides">
    <?php 

        $args = array( 
            'post_type' => 'work'
        );


        $the_query = new WP_Query( $args );

    ?>


    <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <li style="background-color: <?php the_field( 'background-color' ); ?>">
    <div class="container">
        <div class="grid_8">
            img src="<?php the_field( 'homepage_slider_image' ); ?>" alt="<?php the_title(); ?> Project Screenshot">
        </div>
        <div id="featured-info" class="grid_4 omega">
            <h5>Services & Programs</h5>
            <h3 style="color: <?php the_field( 'button-color' ); ?>"><?php the_title(); ?></h3>
            <p><?php the_field( 'description' ); ?></p>
            <a class="btn blue" style="background-color: <?php the_field( 'button-color' ); ?>" href="<?php the_permalink(); ?>">View Project &rarr;</a>
        </div>
    </div>
    </li>
    <?php endwhile; endif; ?>
    </ul>


</div>

Welcome to the Treehouse Community

Looking to learn something new?

Johannes Terry

Johannes Terry

Flexslider for wordpress

13 Answers

Zac Gordon

Zac Gordon

Johannes Terry

Johannes Terry

Zac Gordon

Zac Gordon

Johannes Terry

Johannes Terry

Johannes Terry

Johannes Terry

Johannes Terry

Johannes Terry

Zac Gordon

Zac Gordon

Johannes Terry

Johannes Terry

Johannes Terry

Johannes Terry

Zac Gordon

Zac Gordon

Johannes Terry

Johannes Terry

Zac Gordon

Zac Gordon

Johannes Terry

Johannes Terry