So you like to use the internet. You read tons of websites, follow people on twitter, and make sure all of your friends keep up with you on facebook. As many of us(design students) get closer to graduation and professional practice it becomes more and more apparent that a myspace page is not going to cut it for a digital portfolio. Its time for a real website, and in my opinion there is only one place to start.
In this series I will be going through the ENTIRE process of getting a website up and running while working in wordpress. There are MANY MANY MANY articles written on this, but ZERO are written by me. A few friends of mine have asked me for help with this and I thought I would share with everyone else. With that said I will try and make it as clear as possible what the heck I’m doing and why. The first thing to realize is that a website cannot simply be thrown on to the internet, nor can you simply take an image and turn it into a site. It takes tons and tons of work to get all the pieces into place and a real working knowledge of code. I’ll be writing this series assuming you know a bit how the internet works. Things like <HTML> .CSS and <image> will be important, you don’t have to be a master but understand helps. Also access to basic tools like Photoshop and some sort of FTP access. Some people prefer to use a separate bit of software to control files and manage FTP connections, if you are one of these people its OK but I wont be writing in that format.
DREAMWEAVER NOTE: Dreamweaver is a incredibly useful tool, but TOTALLY useless in the realm of PHP and dynamic code. If you MUST use dreamweaver please don’t attempt to use it in split view or design view. It is a great code management software and can speed up your work and help manage larger sites between your local files and your online server. I will be suggesting TOTALY other software that is FREE and comes very close to DW and works just as well.
The first thing we should understand are the different parts of a website at the root level. First there is the actual hosting server to hold your files and exist online. Second is your coded files that tell a users browser how to display text and images in some sort of orderly fashion. Third is your images that can be both apart of your layout or simply an image on display.
When we use dynamic content(content compiled from the server) we add a new dimension to the basic equation. and This is where many designers quit and get frustrated. What happens is your designs get stored in one location, while the content is stored elsewhere (usually a database) and the server will call on that source when a user is looking for that info. This happens in an instant when you visit a website without you even notice it. Sometimes its difficult to understand when you look at the code but its really not that complex.. We’ll get into that another time.
Here is the “Planned” breakdown:
-
Intro
-
Hosting
-
WordPress, what up..
-
PHP-Its not so scary
-
Themes
-
Plugins
-
Making our own theme – It is that scary.
-
Test Test Retest..
- Analytics..
There some tools I think we should all be using so we can be on the same page. The first thing is Firefox.. Say what you will about browsers, but for this case the plugins we will be using are an important part of the tutorial.
Firebug – This is a plugin for firefox that is one of the most useful tools of all time.. It locates code and css in real time and allows you to view your code very in depth and problem solve along the way.
FireFTP- A ftp client within firefox that is a great alternative to the basic OS.
MeasureIt – a really useful plugin for designing your own themes.
Notepad++ If you are a PC user I find this to be the BEST FREE text editor.. Syntax highlighting and auto formatting of my code is totally awesome.. and its totally free.
for those of us on the MAC TextWrangler is the best FREE alternative.. Although CODA is my recommendation.. Its not free though.. In MAC users case, If you have dreamweaver, Id use it..
I hope to have the first post up in the next few days, if you would like a jump ahead heres some great resources:
CSS-Tricks three part screencast on making a new theme
Smashing Magazine – WordPress Shortcodes
SmashingMagazine – Awesome WordPress Themes
No Comments Yet - be the First!