Custom Wordpress Theme Home Link Image Upload

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

You now have the ancestry of a theme, just unfortunately your files won't work every bit a theme just nonetheless.

For any theme to piece of work, you demand to tell WordPress about the theme, and you do this in the stylesheet. In this tutorial, you lot'll do that.

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

---

What You'll Need

As you'll exist working with WordPress from at present on yous'll need some more than tools for this tutorial:

• Your lawmaking editor of choice
• A browser for testing your work
• Image software for saving your screenshot in the correct dimensions
• A WordPress installation, either local or remote
• If you lot're working locally, you'll need MAMP, WAMP or LAMP to enable WordPress to run
• If you're working remotely, you'll need FTP admission to your site plus an administrator account in your WordPress installation

---

1. Setting Up the Theme in the Stylesheet

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

At the very height of the file add the following:

/* Theme Name: WordPress Theme Building from HTML - Function 3 Theme URI: https://rachelmccollin.co.uk Writer: 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 Part three of the series. Version: 3.0 License: GNU General Public License v2 or later License URI: http://world wide web.gnu.org/licenses/gpl-2.0.html */

The details of what you add together will be specific to you and your theme just should follow the same structure.

Save your stylesheet and shut information technology.

---

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. You need to change that before yous upload the theme.

Open up the header.php file and find the line which reads:

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

Supervene upon it with the following:

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

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

At present save the file and close it.

---

3. Creating a Screenshot

The final thing to do before uploading the theme is to create a screenshot. Screenshots for the WordPress admin should exist 600px wide by 450px high.

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

Ingather the prototype then its aspect ratio is 12:9 and then relieve it every bit a PNG file 600px broad by 450px loftier. Name information technology screenshot.png and salve information technology to your theme folder.

---

four. Uploading Your Theme to WordPress

The adjacent step is to upload your theme to WordPress.

I'm assuming yous've already installed WordPress - if you're unsure how to do this check out the Codex.

Yous can upload your theme in ane of two means:

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

Now when you visit the Themes admin screen your theme should be visible:

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

---

five. Testing Your Theme

Now information technology'due south time to check that your theme works. Simply visit your site'due south home page to see what's displayed.

My site currently looks like this:

You'll observe that the images aren't displayed right at present - that'due south considering their href attributes are static so WordPress tin can't discover them. If yous have missing images in your content you lot don't need to worry - these will be displayed automatically by WordPress via the loop, which y'all'll add in the next office.

If you lot have images in your templates however, either as backgrounds or in the content - logos for example - you lot will demand to better their code to tell WordPress where to find them.

---

half dozen. Updating Paradigm Links in Template Files

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

For example, let's say you have a logo in your header. This might exist displayed using the post-obit:

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

The href attribute tells the browser to observe the image in the image binder of the site - every bit the original site was static, this was only relative to the folio being viewed. In WordPress it works differently - your images folder is a subfolder of your theme folder and you need to tell WordPress to become there to discover the image.

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

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

Obviously the specific filename you're using will be dissimilar, but this gives you the thought. You may take noticed that the function I've used hither is the same as the one used earlier to phone call the stylesheet from the header file.

Now save your file and refresh your browser. Any images in your template files should now be displayed.

---

Summary

You now have a (nearly) working theme. You lot've fix up your stylesheet and then that WordPress recognises the theme, linked to it correctly from the header and changed whatsoever image links in your template files.

In the next tutorial I'll bear witness you how to add a loop to your theme, which WordPress volition use 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 Evolution (from the Codex - includes the code for your stylesheet plus guidance on screenshots)

bowmantimit1980.blogspot.com

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

Share this post