How to Code WordPress From Illustrator

Although Illustrator is not a Web editing program, you can design a website draft in Illustrator. Instead of rebuilding a WordPress template based on the design, you can code the template directly from Illustrator. In such cases, you can use the “slices” tool to create the divisions of the site, export the divisions to HTML and combine them with a blank “developer” theme like “Starkers.”

Creating a Static HTML Site

Step 1

Open Illustrator and load the file containing your website template.

Step 2

Create “Smart” slices for the objects in your design. Select the object, then click “Object,” “Slice,” then “Make.” Illustrator formats the object based on its content. For example, if the slice contains text, Illustrator will detect it and automatically format it to HTML code upon export.

Step 3

Create any additional sections you need using “dumb” slices. Click the "Slice" tool, then drag the cursor over the region you want to slice. Dumb slices are necessary when an object holds two parts of the site. For example, you might want two columns in the object containing your main content area.

Step 4

Define the slices. Click the "Slice Select" tool, then click on a slice. Go to “Object,” “Slice,” then “Slice Options.” Choose “Image” for images, “No Image” for areas to be left blank, or areas to be filled with other code or content, and “HTML Text Slice” for slices containing text. Repeat until all slices have been defined.

Step 5

Click “File,” then “Save for Web and Devices.” Select “HTML,” choose a location for the site, then click “Save.” You now have a static HTML site.

Transforming the Static Site to a WordPress Template

Step 1

Go to starkerstheme.com and click “Download the .zip.” Locate and extract the file on your hard drive. These files are the WordPress theme files.

Step 2

Load “header.php,” then load up your static HTML file. From your site, copy the code for the main header, below the tag, and paste it below the tag in header.php.

Step 3

Open “Style.css.” If you have a CSS file with your static site, copy and save the contents into this file. Otherwise, continue.

Step 4

Open “footer.php.” Delete everything above “<?php wp_footer(); ?>” and paste in the code for the footer area from your static site.

Step 5

Open “Sidebar.php.” Paste in the code for the sidebar area, if you have one.

Step 6

Locate the main content area on your static site, where the WordPress “Loop” must be placed. The loop starts with “<?php if (have posts” and ends with “<?php endif” and is contained inside these files: “index.php,” “page.php,” “search.php,” “single.php” and “archive.php.” You must paste the content area into each of these files, putting the opening tags above the Loop and the closing tags below it, so that the Loop is wrapped inside the content tags.

Step 7

Save all files and compress the file into a .zip file. The template is ready to upload to WordPress.