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
Laurie Gray
23,119 PointsWordpress 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
28,148 PointsLet'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
27,930 PointsNo 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
27,930 PointsHi 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
23,119 PointsThis doesn't work for me - it returns a whole lot of mess in the inspector and doesn't show the image.
Craig Watson
27,930 PointsCan you post the block of code you are trying to use it in ?
Laurie Gray
23,119 PointsIf 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
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
27,930 PointsAre you making this theme from scratch or are you using a child theme?
Laurie Gray
23,119 PointsFrom scratch
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
27,930 PointsYou 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
23,119 PointsThanks 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
23,119 PointsI mean every single image on every page its a nightmare!
Laurie Gray
23,119 PointsCraig I really appreciate your patience -
This works:
<img src="<?php echo get_template_directory_uri() . '/image.jpg'; ?>">
Laurie Gray
23,119 PointsHello 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
28,148 PointsWhat 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
23,119 PointsThanks for the awesome help!!!!!!!!!!!