What Part Of The Zip File Do I Upload For Theme Wordpress

In the first two parts of this series, you lot learned how to ready static HTML for WordPress and to carve up your HTML file into a set of template files.

Yous now have the beginnings of a theme, but unfortunately your files won't work as a theme just nonetheless.

For whatever theme to work, yous need to tell WordPress well-nigh the theme, and you lot do this in the stylesheet. In this tutorial, you lot'll do that.

Adjacent, you lot'll upload your new theme to a WordPress installation and test it. Additionally, you lot'll create a screenshot of your theme then information technology's easier to work with in the WordPress admin.

What You'll Need

Equally yous'll exist working with WordPress from at present on y'all'll need some more tools for this tutorial:

Your lawmaking editor of choice
A browser for testing your work
Image software for saving your screenshot in the right dimensions
A WordPress installation, either local or remote
If y'all're working locally, you'll demand MAMP, WAMP or LAMP to enable WordPress to run
If you're working remotely, y'all'll need FTP access to your site plus an ambassador business relationship in your WordPress installation

1. Setting Up the Theme in the Stylesheet

Before uploading the theme, you need to edit your stylesheet. Open the style.css file in your template folder.

At the very top of the file add the post-obit:

/* Theme Name: WordPress Theme Building from HTML - Role 3 Theme URI: https://rachelmccollin.co.uk Author: Rachel McCollin Author URI: http://rachelmccollin.co.britain Description: The theme to accompany the wptutsplus series on creating a WordPress theme from static HTML. This theme accompanies Role 3 of the series. Version: 3.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-two.0.html */

The details of what you add volition exist specific to you and your theme but should follow the same construction.

Salvage your stylesheet and shut it.

2. Calling the Stylesheet From the Header File

At the moment your header.php file has a link to the stylesheet which is static and won't work in WordPress. Yous need to modify that earlier you upload the theme.

Open the header.php file and notice the line which reads:

          <link href="fashion.css" rel="stylesheet" media="all" blazon="text/css" />

Replace information technology with the following:

          <link href="<?php bloginfo( 'stylesheet_url' ); ?>" rel="stylesheet" media="all" blazon="text/css" />

This includes the role<?php bloginfo( 'stylesheet_url' ); ?> which tells WordPress where to find the stylesheet.

Now save the file and close information technology.

3. Creating a Screenshot

The final affair to exercise before uploading the theme is to create a screenshot. Screenshots for the WordPress admin should be 600px wide past 450px loftier.

Have a screen grab from your browser using your preferred method and open this in your preferred image editor. I'm using Photoshop.

Ingather the image so its aspect ratio is 12:nine and and then save it as a PNG file 600px wide past 450px loftier. Name information technology screenshot.png and salvage it to your theme binder.

4. Uploading Your Theme to WordPress

The side by side step is to upload your theme to WordPress.

I'm bold y'all've already installed WordPress - if you're unsure how to practice this check out the Codex.

You can upload your theme in one of two ways:

Using FTP (or directly if yous're working locally), copy your theme folder to the wp-content folder in your WordPress installation
Create a zip file containing your folder and upload that via the Themes admin screen, past clicking on Add together New -> Upload.

Now when y'all visit the Themes admin screen your theme should be visible:

creating-wordpress-theme-from-static-html-theme-admin-screen-with-theme

Select the theme to activate information technology. This will be shown in the Themes admin:

creating-wordpress-theme-from-static-html-theme-activated

five. Testing Your Theme

Now it'south fourth dimension to bank check that your theme works. Only visit your site's home page to run into what'southward displayed.

My site currently looks similar this:

creating-wordpress-theme-from-static-html-site-home-page-after-theme-activation

You'll notice that the images aren't displayed right now - that'due south because their href attributes are static then WordPress can't find them. If you accept missing images in your content you lot don't demand to worry - these will be displayed automatically past WordPress via the loop, which you lot'll add in the next office.

If you have images in your templates however, either every bit backgrounds or in the content - logos for instance - you lot will need to amend their code to tell WordPress where to find them.

half-dozen. Updating Paradigm Links in Template Files

This department only applies if y'all're using images in your template files. These aren't added via the loop and so you lot'll need to edit your template file directly to tell WordPress where to find them.

For example, allow'south say you lot accept a logo in your header. This might be displayed using the following:

<img alt="" src="images/logo.jpg" />

The href attribute tells the browser to find the image in the image folder of the site - as the original site was static, this was simply relative to the page being viewed. In WordPress it works differently - your images binder is a subfolder of your theme folder and you demand to tell WordPress to become there to find the epitome.

In your header.php file, edit the code then it reads:

<img alt="" src="<?php bloginfo( 'stylesheet_url' ); ?>/images/logo.jpg" />

Plain the specific filename you lot're using will be different, but this gives you the idea. You may accept noticed that the part I've used hither is the same as the one used earlier to telephone call the stylesheet from the header file.

Now salvage your file and refresh your browser. Any images in your template files should now exist displayed.

Summary

Yous now have a (nearly) working theme. You've fix your stylesheet so that WordPress recognises the theme, linked to it correctly from the header and changed any epitome links in your template files.

In the next tutorial I'll testify y'all how to add a loop to your theme, which WordPress will utilise to display the content of your posts and pages.

Resources

MAMP (for Mac)
WAMP (for Windows)
LAMP (for Unix)
WordPress (download)
Installing WordPress (from the Codex)
Installing WordPress locally with MAMP (from the Codex)
Theme Development (from the Codex - includes the code for your stylesheet plus guidance on screenshots)

Source: https://code.tutsplus.com/tutorials/creating-a-wordpress-theme-from-static-html-uploading-your-theme-to-wordpress--wp-33955

Posted by: bennettshle1947.blogspot.com