I’m finally going to answer, in depth, one of the most common questions I’ve gotten over the past few years – how did I build my website?
Most artists ask me this because they want to know a) how I built my portfolio gallery or b) how I integrated my blog into my website. I will attempt to answer both of those questions.
To understand the bulk of this post, you should have a passing understanding of HTML, CSS, WordPress, and web design software. I won’t be making this into a web design tutorial or coding lesson, and if you ask me questions about them I will most likely tell you to Google it. I’m simply going to explain the strategy I used to integrate these tools into my own website.
The first thing you need to know is that my website is built using WordPress. It is a blogging platform that you can install on your web server. You can get the download and installation instructions at wordpress.org.
I used WordPress because I want to have a blog integrated into the site so visitors don’t have to go to an external place like Blogger to read my blog.
Customizing the Theme
Lots of people ask me what theme I use. Themes are templates that you can install on WordPress to change the look of your site instantly. In the past, I would go looking for a custom theme, but the website that is running now is the default WordPress theme that was there when I installed it (I think it is called “Twenty Ten” or something like that).
I modified it slightly, but not very much. I changed the header size, some of the colors, and the look of the top navigation menu, for example. Some of these changes were options built right into the theme (the header image and background color, for example). Other changes I did by editing the CSS file. Other than a few minor changes, that is pretty much all I did.
Next, I made my portfolio page. To those who have been asking, no it is not a gallery plugin or WordPress trick. I built it on my own with the help of web design software. I use Adobe Dreamweaver, but you could probably use any program of your choice. In the end, you just need the ability to copy and paste the resulting code.
I built my portfolio just as I would any webpage. For my portfolio, I use a rollover effect where the visitor hovers their cursor over the thumbnail and the large image shows up on the right (in Dreamweaver, this is called “Swap Image” in the Behaviors panel).
When I have the page working the way I want it, it’s time to move that page into WordPress.
Understanding WordPress Pages
WordPress works differently than a regular static site. Each page is not a single HTML file but rather a conglomeration of a bunch of elements.
When you look at the files that make up a WordPress theme, you’ll notice that there’s files in there like “header.php” and “style.css” and “page.php”. When a page loads on a WordPress site, it takes elements from different files to make a single page. Usually, first it loads the header, then all the content, then the footer. On a blog page, it would load the sidebar too.
So when you start a new page in WordPress, you are only modifying the middle section, the content.
Moving the Page to WordPress
Copy and paste the page code.
Let’s go back Dreamweaver. Open up your page in “code view” or wherever in your software program where you can access the code. You need to copy all the code that includes the content you want to move to your WordPress page. Usually, that means copying everything between the body tags. You do not need to include the head section or the body tags themselves, because those are already included in your WordPress theme.
In WordPress, open up the page you want to edit or start a new page. Make sure the editor is in “Code” or “HTML” view, not “Visual”. Paste the code from your software program.
Remember to also upload your images onto your server. For simple pages, that’s it. However, for my portfolio page I need to complete a couple other steps.
Insert any necessary code in the header and footer.
If you used a rollover effect like I did, chances are you will need to copy and paste some additional code into the header. You can’t just copy and paste it with your other page code into the WordPress Edit Page window. Remember this only edits the middle content section of the site. The head section of the HTML is in another file. To access the header, you have to edit the actual theme.
Find the file “header.php” in your WordPress theme. In WordPress, you can go to the “Appearance” section and click on “Editor”, or you can download the file to your computer and use a text editor.
Edit the CSS file if necessary.
If you designed your page with CSS, you will need to copy that code also. In my WordPress theme, I pasted all my custom styles to the end of the “style.css” file.
Note also that your theme’s CSS might affect your page in ways you didn’t anticipate when you built it in Dreamweaver, so you may have to edit other CSS properties. For example, by default my theme scrunched the page content into a skinny column. I widened this so I could fit all my portfolio content.
The portfolio is done! You can make additional pages in a similar fashion, or directly in the WordPress editor. What I love about WordPress is that I don’t have to worry about the header section, top navigation, or footer links for each and every page. It is automatically included throughout the site.
One other thing I like to do is go to Settings > General > Reading and set the front page to my portfolio page. That way when a visitor enters my site, it goes to my portfolio instead of my blog. Where it says “front page displays” choose “a static page”. Set the front page to your portfolio (or other page of your choice, like a “home” page), and the posts page to your blog.
Like with blog posts, WordPress pages have the option to include comments. You may or may not want that. In the page editor, there should be a checkbox somewhere to turn this off on a per page basis.
A plugin I’ve also found handy is Exclude Pages From Navigation. This gives you the option to not include new pages in your top navigation menu. This is useful if you want to make a side page that you don’t necessarily need listed throughout the site. I use this for my book pages, for example (e.g. http://danidraws.com/onceuponatime).