Transferring Assets

Transferring Assets

Now we need to move all the assets from our static HTML project into the WordPress theme folder and update the file paths to use WordPress functions.

What to Transfer

• CSS files — merge into style.css or keep in a css/ subfolder
• Images — copy the img/ folder into the theme
• JavaScript — copy the js/ folder into the theme
• Fonts — if using custom fonts, copy those too

Updated Theme Structure

developer-coffee/
├── style.css          ← All CSS styles (merged from static project)
├── index.php
├── functions.php
├── header.php
├── footer.php
├── screenshot.png
├── css/
│   └── extra.css      ← Optional additional styles
├── js/
│   └── script.js      ← Mobile menu toggle, etc.
└── img/
    ├── logo.png
    ├── hero.jpg
    ├── post-1.jpg
    ├── post-2.jpg
    └── post-3.jpg

WordPress Path Functions

In static HTML, you reference files with relative paths. In WordPress, you must use PHP functions to get the correct URLs:

Function	Returns	Example Output
get_template_directory_uri()	URL to the theme folder	http://localhost/developer-coffee/wp-content/themes/developer-coffee
get_template_directory()	Server path to the theme folder	C:/wamp64/www/.../developer-coffee
get_stylesheet_uri()	URL to the theme's style.css	http://localhost/.../style.css

Updating Image Paths

In static HTML:

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

In WordPress:

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

Updating CSS Background Images

Since CSS is loaded from the theme's style.css, relative paths like img/hero.jpg will work if the CSS file is in the theme root. But to be safe, you can reference images relatively:

/* In style.css (theme root) — relative path works */
#hero {
    background: url('img/hero.jpg') no-repeat center center/cover;
}

Enqueuing JavaScript

Never add <script> tags directly in your templates. Instead, enqueue them in functions.php:

function developer_coffee_scripts() {
    // Enqueue main stylesheet
    wp_enqueue_style(
        'developer-coffee-style',
        get_stylesheet_uri(),
        array(),
        '1.0'
    );

    // Enqueue custom JavaScript
    wp_enqueue_script(
        'developer-coffee-script',
        get_template_directory_uri() . '/js/script.js',
        array(),
        '1.0',
        true  // Load in footer
    );
}
add_action('wp_enqueue_scripts', 'developer_coffee_scripts');

Why Use wp_enqueue Instead of Direct Tags?

• Dependency management — WordPress handles the loading order
• No duplicates — if two plugins/themes load jQuery, it only loads once
• Versioning — WordPress appends version numbers for cache busting
• Best practice — required for theme review and WordPress.org submission

Merging CSS

Copy all the CSS from your static styles.css into the WordPress theme's style.css — below the comment header:

/*
Theme Name: Developer Coffee
...
*/

/* === Your static CSS goes below === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; ... }
/* ... rest of your CSS ... */

Key Takeaways

• Copy images, JS, and CSS from the static project into the theme folder
• Use get_template_directory_uri() for image and asset URLs in PHP
• Never hardcode paths — always use WordPress functions
• Enqueue scripts and styles in functions.php with wp_enqueue_*()
• Merge your static CSS into style.css below the theme header comment