There are a lot of times where you may need to FTP into your server and work with the code in a WordPress theme directly. This post is aimed at WordPress users who are familiar with using the WordPress Dashboard, but have never logged onto the server.

You should know a little something about coding before making too many changes to your code because if you don’t know what you are doing, you could really mess things up.

Step 1: Find an FTP client

In order to access your server you need to use a FTP (File Transfer Protocol) client. There are many out there, some you have to pay for and others are free. Since this is not a post about FTP clients I will not go too indepth on them. For now use FileZilla, a free FTP client, which will get you started.

Download and install FileZilla (or another client of your choice) and get ready for Step 2.

Step 2: Log onto the server

Next you will need to log onto your web server. You will need the server’s IP address or URL, the username, and the password. You should have gotten the username and password in an email from your web host when you set up your server. If you forgot the info or deleted the email just contact your hosting provider and ask them to resend the information.

Step 3: Go to the WordPress theme folder

You want to find the WordPress theme folder. This is the only folder that you should ever modify the contents of. To access the theme folder go to wp-content/themes/your-theme-name.

This folder contains all of the files that make up your theme. Some key files are header.php and functions.php.  I won’t be going into WordPress themes in this post, but just realize that all theme files are located in this folder.

Step 4: Download the file you want to edit

If you are using FileZilla you have to save the file you want to edit on your hard drive before you make changes to it. Find the file and save it to your computer.

If you are not sure what you are doing it may be a good idea to make a backup file. This way if you make any mistakes you can always upload the original file.

Step 5: Make changes and upload

Open the file that you just downloaded in a text editor and make the changes that you need to make. When the changes are done, upload the revised file back to your server and visit your site in a browser to confirm the changes.

Filed under: Code, Web Development, Wordpress by Keith
Comments are fun, leave one! »

You guessed it, this section of the toolbar allows you to play with the styles of a website. Frontend web developers and designers will find a lot of value with these tools. Be sure to check out the other posts in the series as well.

Disable Styles – Disable styles allows you to disable different CSS stylesheets on a web page. This is a dropdown item that lets you select which style(s) you want to disable, which is good to display just the content of your website. It will allow you to see what web crawlers/spiders see. The best use for this is for search engine optimization and to make sure your site is alright for disabled users.

• All Styles – Lets you turn off every style on the website.
• Browser Default Styles – Each browser has it’s own way on deciding how elements are displayed, this will let you remove those styles.
• Embedded Styles – Clears styles that are coded on the top of the page
• Inline Styles – Clears styles that are coded inline with elements
• Linked Style Sheets – Clears style sheets that are linked externally
• Print Styles – If you have a separate style sheet(s) for printing this will clear them.
• Individual Style Sheet – Lets you specifically choose which style sheets to disable.

Display CSS by Media Type – Lets you see what your website looks like on a mobile phone or in print if the respective style sheet is included in your code.

View CSS – Click this to see the all of the CSS for a web page. I would recommend using the Firebug extension for really digging in deep with viewing CSS.

View Style Information – Lets you hover over different elements on the page. It will show you the element’s location at the top of your browser and when you click on the element it shows you a list of all of the styles associated with it. Again, I think that the Firebug extension does a slightly better job with this.

Add User Style Sheet – Allows you to add a style sheet from your hard drive and apply it to a page. This is great because you can test styles on sites you don’t have FTP access to, and if you mess anything up, you can just hit the “refresh” button.

Edit CSS – This is a really cool feature that lets you look at the current style sheet and make any changes that you want instantaneously. If you like the changes that you make, you can export the new CSS file. If you don’t like them, just close the box!

Use Border Box Model – Don’t worry about this one. It is used for testing on much older browsers (IE5/6). It is slowly going obsolete.

Conclusion

The CSS section of the web developer toolbar has some really neat tricks that will help debug a site that you create or help you learn from a site that you didn’t. If you like this section, you may want to check out the Firebug extension for Chrome and Firefox which also has some cool CSS debugging features.

Out of all of the tools in the CSS toolbar, I would say the most useful would be Disabling Style sheets and Display CSS by Media Type.

Filed under: Web Developer Toolbar, Web Development by Keith
Comments are fun, leave one! »

This is the first post of the Web Developer Toolbar series. This first post focuses on the first dropdown menu: disable. Most of the disable tools are self explanatory, but I will cover each below. In case you missed it, be sure to check out the introduction to this series which overviews the web developer toolbar.

Disable Cache – The default setting for disable cache is set to enabled. This makes it so that your browser shows the latest version of changes that you make. For example, if you are working with Javascript and you have caching enabled, your browser may use the cached version and you won’t see your freshly made changes.

Disable Java – Very simply, this disables all Java applets on the page.

Disable Javascript – Disable javascript allows you to view a website without javascript. This is a useful tool for developers because there is a small percent of people who have javascript turned off. This tool allows you to see a website the way that they see it. Before you launch a site, you should make sure that you test it out without javascript. It may not look as pretty as it does with javascript, but it should function the same. Remember, don’t use javascript for navigation for this reason.

Disable Meta Redirects – This will turn off any redirection or page refreshes if they are called using meta tags. Meta redirects are problematic for users with screen readers, seeing as the uncontrolled refreshes and redirects can be confusing and random.

Disable Minimum Font Size – This disables the minium font size so you can make text smaller than the minimum font size.

Disable Page Colors – This removes all the page colors that are assigned to elements using external/internal CSS. There are a few minor uses for this option. It may help if you are trying to debug one of your projects, or it could help if you are trying to see how color blind users see your site. A good use for this feature would be if you are on a shoddy, poorly made website where the colors are so bad you can’t read the text. This would allow you to remove the colors and make the site easier to read.

In the example below, the image on the left is the default way a webpage displays with color, and the image on the right is the same page with the colors disabled. As you can see, if the page is hard to read because of bad design practices, disabling the colors can make it easier.

Disable Popup Blocker – This would allow popups to pop up, even if you have a popup blocker in your browser. This is useful if you are developing a site with popups and you want to test the functionality.

Disable Proxy – Disables proxy if it is used on the page.

Disable Referrers – This is less of a debugging tool and more of a privacy tool. Disabling referrers hides which website you came from when you go from site to site. Every time you click a link or submit a form the server knows about it. Disabling this is allows you to be more anonymous.

Conclusion

The disable section has some useful features for testing and privacy. Nothing in this section is really a life or death tool, but they are good to have in your arsenal and good to know about in case you ever need them.

Filed under: Web Developer Toolbar, Web Development by Keith
Comments are fun, leave one! »

I’m not going to lie, you may never need to use the cookies tools in the web developer toolbar unless you are doing some more advanced coding and development with cookies, but I am going to include the tools in this series anyway. Be sure to check out the other posts in the series as well.

What are cookies?

Briefly, cookies are little chunks of text that are stored in a user’s web browser. They are used for storing authentication, site preferences, shopping cart preferences, or anything else that can be accomplished by storing text. They are not malware, and only the website that saved the cookie can read it.

The toolbar

Disable Cookies – You guessed it! This disables cookies in your browser. This will allow you to see how a site you are making works without cookies. You could also use this if you are worried about privacy, however I personally don’t believe that anyone should be worried about cookies and privacy.

Clear Session Cookies – This clears all cookies from your current session.

Delete Domain Cookies – This deletes all saved cookies from the domain that you are currently accessing but keeps the rest of your cookies.

Delete Path Cookies – Deletes path cookies.

View Cookie Information – This shows all of the cookies that are assoicted with the page that you are on. It will show you the name, value, host, path, security, and expiration date of each cookie.

Add Cookie – Allows you to add a cookie to the site that you are on for testing purposes.

Conclusion

While this section of the Web Developer Toolbar can be useful for developers that are using cookies, most web developers will not find too much value in this section.

Filed under: Web Developer Toolbar, Web Development by Keith
Comments are fun, leave one! »