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

Posted by Justin Farrugia
Justin Farrugia
13,649 Points

I can't seem to be able load assets (fonts or images) through MAMP and Codekit when trying to build my WP site locally

So basically I setup a local development workflow to work with MAMP and Codekit, and I'm trying to preview what the assets would look like (fonts and images), but they're not showing up. Would this be a problem with my folder structure? Am I missing something? I've tried to look into the console and it's telling me that it's not able to load the resources due to a status of 404. I'm using the Underscores theme if that helps.

2 Answers

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

That makes sense, that's why it's not loading - it just can't find it. Wordpress has a system for asset loading, relative paths generally don't work well.

You'll have to change your folder structure, right now you're telling wp to go outside of it's theme folder and find an assets folder.

What will probably work best is to have an assets folder inside your theme folder, where your theme files are, and than call them using something like

<img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.png"/>

For font's you will probably want to use the wp_enqueue_style function that wp provides to pull those files in. There are some great courses on WP where Zac breaks down how to work within wordpress. Wordpress has it's own ecosystem, and it's the least headache to work within that system. Let me know if that helps.

Jacob Mishkin
Jacob Mishkin
23,118 Points

The advice above is sound, I just wanted to add that fonts can be a little tricky, they require an array, and its best to register first then add action to it. here is an example of enqueueing google fonts into WP:

    //Fonts
    function google_fonts() {
    $query_args = array(
        'family' => 'Open+Sans:400,700|Oswald:700',
        'subset' => 'latin,latin-ext'
    );
    wp_register_style( 'google_fonts', add_query_arg( $query_args, "//fonts.googleapis.com/css" ), array(), null );
  }

add_action('wp_enqueue_scripts', 'google_fonts');

That way later you can use font-family: later.

and this is just preference/style but I would put your img path to a variable then echo the variable in the img tag, or if its appropriate use the_post_thumbnail() function. both ways work, its just a preference of style.

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

well, how are you trying to load in these assets?

Justin Farrugia
Justin Farrugia
13,649 Points

I'm trying to load them by just calling assets via filepath

<img src="../assets/images/logo.png" alt="Logo">