Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Adding Widget Areas to the Front Page

Laurie Gray
Laurie Gray
23,119 Points
Posted by Laurie Gray
Laurie Gray
23,119 Points

Wordpress to MAMP directory conundrum!

Okay,

I have a fresh install of MAMP and am properly enqueue ing styles and scripts using template directory URI etc.

However as soon as I move over from static to mamp all of my image links are broken and don't appear.

My images have the link src=/assets/img.jpg for example - simple right? But they never appear when in wordpress. The scripts and styles all appear just fine but there is no way I can get them to appear - even if I do src=localhost:8888/wp/wp-content..... etc

Why is this happening???????

Thanks guys

12 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Let's assume you have this folder structure (very important)

-root wordpress structure --wp-content ---themes ----my_theme_folder -----assets

And in your assets you have your images, correct?

Can I not just take this header file and put src=/assets/image.jpg and it should work? None of the methods seem to be working for me they cannot be found

No, not anymore. With a CMS, folder structure isn't a clear.

So given that folder structure, you could do <img src="<?php bloginfo('template_directory');?>/assets/image.jpg >" as an example. This would work, I've tested it locally, it works.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

No problem Laurie,

I'm glad you have got to the bottom of it with a php solution so when you move the site live you dont have to worry about changing the file paths :)

If you want to add a logo up loader to the customizer options of your theme, below is the code from my site so you would need to change the function names and things.

Add this to functions.php

<?php

//Add Logo Image Option to WP Customizer
//-------------------------------------------------------------------------
function digimouse_register_theme_customizer( $wp_customize ) {

    // Add Custom Logo Settings
    $wp_customize->add_section( 'custom_logo_section' , array(

        'title'       => __( 'Logo', 'digimouse' ),
        'priority'    => 30,
        'description' => 'Upload a logo to replace the default',

    ) ); 

    $wp_customize->add_setting( 'digimouse_logo' );

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'digimouse_logo', array(

        'label'    => __( 'Logo', 'digimouse' ),
        'section'  => 'custom_logo_section',
        'settings' => 'digimouse_logo',

    ) ) ); 
}
add_action( 'customize_register', 'digimouse_register_theme_customizer' );

?>

Add this to header.php

                    <!-- Link Containing the Site Name -->
                    <a class="navbar-brand" href="<?php bloginfo( 'url' ) ?>">

                        <?php if( get_theme_mod( 'digimouse_logo') != "" ): ?>
                            <img id="logo" src="<?php echo get_theme_mod( 'digimouse_logo' ); ?>">
                        <?php endif; ?>

                    </a>
                    <!-- //Close Site Name Link -->

and your good to go :)

Craig

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Laurie,

have you tried linking dynamically like below:

src="<?php bloginfo('template_directory');?>/img/favicon.ico"

That takes you to the root of the theme files.

So if my setup is

Them name - Hello

The file path it spits out is - loads/of/jargon/Hello/img/favicon.ico

Craig

Laurie Gray
Laurie Gray
23,119 Points
Laurie Gray
Laurie Gray
23,119 Points

This doesn't work for me - it returns a whole lot of mess in the inspector and doesn't show the image.

Craig Watson
Craig Watson
27,930 Points

Can you post the block of code you are trying to use it in ?

Laurie Gray
Laurie Gray
23,119 Points
Laurie Gray
Laurie Gray
23,119 Points

If I use the above code and place my images in the root folder of wordpress itself (not the theme folder) it works. The php code above is looking inside the wordpress folder?? How is this possible? Will post code

Laurie Gray
Laurie Gray
23,119 Points
Laurie Gray
Laurie Gray
23,119 Points

<?php wp_head(); ?>

</head>

<body>

   <div class="reserveBanner">

           <div class="container">
               <div class="callToAction"><p>Feel free to <a class="btn btn-primary" href="#">Make a Reservation</a></p></div>
               <div class="callToAction rightAlign"><p>Opening Times: Tue-Sat: 9am-5pm</p></div>
            </div>

   </div>  

  <div class="navbar navbar-default">

      <div class="container">

         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>

        <img src="<?php bloginfo('template_directory');?>/assets/image.jpg">
        <div class="collapse navbar-collapse">

          <?php 

              $defaults = array(
                'container' => false,
                'theme_location'  => 'primary-menu',
                'menu_class'  => 'nav navbar-nav navbar-right'
              );

              wp_nav_menu( $defaults );

            ?>


              </div>
      </div>


  </div>

    <!-- Container -->

    <div class="container">



            <!-- Main Content -->
Craig Watson
Craig Watson
27,930 Points

Are you making this theme from scratch or are you using a child theme?

Laurie Gray
Laurie Gray
23,119 Points
Laurie Gray
Laurie Gray
23,119 Points

<img src="<?php bloginfo('template_directory');?>/assets/image.jpg">

This code does not load the image - but if I put the image which definitely is in the right place waaaaay back inside the absolute root folder in wordpress it appears...

I have set my document root folder in mamp to be wordpress folder which is of course correct and it all works fine.. except my links.

Can I not just take this header file and put src=/assets/image.jpg and it should work? None of the methods seem to be working for me they cannot be found

Craig Watson
Craig Watson
27,930 Points

You could and if it works then it looks like problem solved but to be honest this might be premature and over looking a small error that might cost you big in the long term of the build.

To do the image as above I can give you the code to set up a theme_mod which will let you go to the customizer and upload an image through the admin to be used as a logo.

It is how I have my site set up currently.

WordPress is not a fan of hard coded things in general so I can help you find a work around :)

Laurie Gray
Laurie Gray
23,119 Points
Laurie Gray
Laurie Gray
23,119 Points

Thanks Craig. I have actually done the workaround as you say. My question is - and this is the 2nd time this has happened. Why do all of my basic coded links not work. And why is wordpress looking in the root folder for these files when it is so obviously supposed to be looking in the theme folder first?

Laurie Gray
Laurie Gray
23,119 Points
Laurie Gray
Laurie Gray
23,119 Points

I mean every single image on every page its a nightmare!

Laurie Gray
Laurie Gray
23,119 Points
Laurie Gray
Laurie Gray
23,119 Points

Craig I really appreciate your patience -

This works:

<img src="<?php echo get_template_directory_uri() . '/image.jpg'; ?>">
Laurie Gray
Laurie Gray
23,119 Points
Laurie Gray
Laurie Gray
23,119 Points

Hello Kevin, I totally understand what youre saying - yes I have identical file structure and by sheer miracle it now works... after 2 days of headaches...

HOWEVER, not that youre a genius and are here: why can't I just use the normal link structure? What do you mean with a cms its not clear? Thanks so much

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

What do you mean by normal link structure? Like <a href="/about.php">?

You can't really use link structures like this anymore after moving into a cms (content management system), because links and paths are not based on file structure anymore. Instead, they are based on routes and logic. What you don't see wordpress doing is routing requests, and using logic to decide which template, resource, asset to grab. That's why there are dozens of helper functions available to you as the developer to make sure Wordpress knows what it is you're actually after.

What I mean by that is did you notice that that all the template files like index.php, home.php, page.php, etc are all on the same level. But I can have long, complex URL structures that normally would have required a file/folder hierarchy to match. Things happen more dynamically in wordpress, so use the Wordpress codex to find the functions you need to tie links and assets together.

Keep in mind, it's not uncommon you'll call a wordpress function inside a wordpress function. For instance to get a permalink you might need to know the post's id, so you might call one function that returns the posts id based on the title you give it, and than use that returned id to get the posts permalink.

This way no matter what page you're on, the link always goes where you would expect it to.

Laurie Gray
Laurie Gray
23,119 Points
Laurie Gray
Laurie Gray
23,119 Points

Thanks for the awesome help!!!!!!!!!!!