This guest post is written by Malinda Alahakoon of Notesofgenius.com
Wordpres is a widely used self hosted blogging platform. It�s giving you amazing level of customizability unlike Blogspot and Wordpress.com. But I have noticed most of the blogger are not really utilizing its customizability to developer unique features and UI in their blogs.
Main limitation here is lack of PHP and CSS knowledge. But Wordpress is well structured content management system. Even with very basic PHP/CSS knowledge you can do a lot.
If you planning to customize your Wordpres blog like a BOSS, you have to prepare your tool kit. In this post I�m going to show to step by step configuration. The objective here is to get access to source code of your Wordpress blog and edit it using Adobe Dreamweaver.
Tools and Access Privileges
- Adobe Dreamweaver CS5
- Access to cPanel in your hosting server
- FTP account which has administrator level access (To entire files)
- FTP configuration details
That�s basically you need to start with. Before we move on take a back up of your home directory and database. Then install Adobe Dreamweaver and open it.
Step By Step Configuration
As the first thing you have to open Files windows in Adobe Dreamweaver. For this you may go to Window -> Files or simply press F8.
File window will appear as a sidebar in right most of the cases. Change its position as you comfortable. There you will be able to see a link named �Manage Sites�. Click on that. In the popup window press new.
� It will give you another window where you can configure remote site.
� In Side section you can give a site name and local site folder to save its file. Fill those fields as appropriate.
� Then go to server section and press �+� sign there to add your server to this list.
� It will give you another panel where you can enter your FTP access details. Fill them as instructed by your hosting service.
� Finally press test to confirm connection. If everything is Ok you will get below message. If not go back and check access details again.
� Save everything and go back to Dreamweaver main dashboard. In file window you will be able to see your site just configure. Change the view to remote server to view source files in your blog.
� Before you start editing code better to get a copy of whole website to your hard drive. For that click on public_html folder and then click on get files button in file window tool bar.
� It will take some time depending on your internet connection speed.
� Once it all done change the view to Local view. You will be able to see the local copy of web site.
� Click on any file to view the source code. If you want to edit them, you can do it right here in Adobe Dreamweaver.
� If you double click on a file when you are in remote view, it will be automatically fetched and open in Dreamweaver.
� Once you done editing, save the file, select it and press Put files button. It will update the file I server. Once you do that changes will be reflected in your website immediately.
Now your environment is all set to dig deep in to Wordpress source code, edit it and update those in server.
Where to Start Editing?
Here I�ll give you a summary of Wordpress structure.
� wp-admin: Here you can find files related to Wordpress administration back end. You better not touch them.
� wp-includes: Here you can find files related to wordpress core functions, For now stay away from them.
� wp-content: Here you can find your plugins and themes.
� wp-content -> themes: In this folder you will find separate folder for each theme. Good point to start editing. Go to active theme and take a look at file structure.
File Structure in a Wordpress Theme
� 404.php: The error page
� Archive.php: Archive page for all archives
� Comments.php; Design of comment page
� Footer.php: Footer section in every page
� Fuctions.php: Stores important factions
� Header.php: header in every page
� Index.php: Home page
� Page.php: Wordpress page
� Search.php: Search page
� Sidebar.php: Sidebar for all pages
� Single.php: Wordpress post
� Style.css: This is where you can find CSS rules.
Now you can do minor changes to files, put them in serve and see how they reflect in your blog. Make sure you have a back-up in the case of disaster. For those experiments use a separate copy of Wordpress or low traffic time.
What�s Coming Up?
Once you get familiar with Wordpress structure you can start editing its source code to come up with unique designs and features. Before that here is the To-Do list.
� Learn basic PHP and CSS.
� Take a look at Wordpress Codex.
In upcoming posts I�ll tell you how to create your own �Related Post List�, �Most Commented Post List� and �Author Bio Box�. Remember guys, there you will use your own code. In other words, it�s unlimited space for creativity and customization. Total control of UI and functions will be yours, unlike downloaded plugins. See you soon!
You may now like to read:
Malinda AlahakoonMalinda Alahakoon is a regular BloggingeHow reader and follower who loves to write on his blog NotesOfGenius. His passion for Blogging is what makes him stand out. You can connect with him @MalindaOnline
No comments