Backing up your Wordpress site

Note:  Short and sweet, I've added this to this post as one of the better, really easy examples I found on how to backup your site with Filezilla:

Hello, I'm Dave. How to back up your site using Filezilla FTP

There is a plethora of material written about backing up your site so I'll let the pros do the talking.  You can download your site via an FTP client and I suggest Filezilla- it's fast and free and easy to use. Here's more on the backup process... you'll want to backup your files and your database. Both can be downloaded in about 10min.

Backing Up your Wordpress Site - this link contains many options for continually backing up your site. Choose one that is right for you, or backup your site after you make additions or changes on a case by case basis.

here's a bit about FTP clients and Filezilla

and here's a page about using Filezilla.


Download, save, copy as many times as you like to as many locations as you like.

To download a copy of the MYSQL database I simply logged into GoDaddy and into the FTP file manager. I went to the appropriate folder labeled

_db_backups

I downloaded the folders labeled "dig....." there are two folders with this label. I downloaded them and saved them both after archiving the MySQL databases.

Creating a local copy of your site: setting up PHP or a dummy site

Here is a link to setting up PHP on your Mac. It is a bit of a process but will allow you to try out edits on your blog before you upload them.

Here are instructions for the same process for a PC.

Another option I am fond of is creating a dummy site. I create a dummy site and load stock images and plugins to a site with the exact same parameters to my own site. I test things here before I edit my professional important site.  This Dummy site method has been extremely helpful and allows me to work completely online. This way I can quickly test options live and  run a manipulated page through multiple browsers.

Ghost in the Shell: Visual Editor in posts hides navigation

Posts are funny things. They have a few features that Wordpress keeps enabling and then disabling every few times it releases a new version and this time the "<prev" and "next>" buttons are automatically disabled. Maybe that's for the best. When they are enabled they are hard to customize and move around. The code for manipulating them is buried deep inside the Wordpress core. There have been a number of plugins that try to solve the problem but if you use both posts and pages in your site and want the "prev" and "next" buttons to look alike on each type of publication you are out of luck: plugins add navigation buttons for either posts or pages but I haven't seen any that added the same sort of button for both so  a user is left to manually build navigation buttons if they can't make the menu work as they would like.

In this case though I get the feeling of "can't live with 'em , can't live without 'em". In making my own manual navigation at the bottom of the posts pages I use the words previous and next. Wordpress seems to pick these up and hide them in the Visual editor, making editing a bit of a pain. Here everything must be edited in the HTML view.

One must click "edit post" avoid viewing the "Visual" tab go straight to the "HTML" view and add new links manually there.

I'll keep looking for a solution for this, but until then copy and paste the general code form previous posts into a new post and edit links by cutting and pasting them in place. I've listed this issue with Wordpress codex.


Oh Wordpress.

Ghost in the Shell: Fighting off comments!

Well I've had highs and lows with hiding post comments.  Several plugins failed to do the job and now I've pulled another and added a new one that seems to have 5 star reviews and about 7K downloads which is promising.

This one is called One Click Close Comments and it lives up to it's name.  Install this plugin and look at the "Posts" section. Click on "All Posts" and see that the plugin has placed a small red or green dot in the info about each post. Simply click on this and status will change. Green means comments are GO and red means comments are CLOSED.

Then check your post pages. A default message of "Comments are Closed" will appear.

Now go into the "Appearances" section. Click on "Editor". Go here only if you know what you are doing. Make sure site is backed up before you make any changes.  Look for <p></P> with "Comments are closed." message. Simply remove message! Don't change anything else. This time comments have vanished without leaving a trace and that's something worth celebrating.

Ghost in the Shell: Firefox might hate your .tiff file

While Safari and Google Chrome don't mind, Firefox might not like to show your .tiff file.  Avoid using .tiff files and instead use

.jpg

.gif

and

.png

filetypes. Firefox seems to digest these just fine.  Don't be fooled by the fact that you can indeed upload a .tiff file while using Wordpress in Firefox. When you get to the site, your image won't be there!

DFC custom notes: developing on a subdirectory, hosting on a root

I recently added files to the root of a host site that helps to direct my root web address to the subdirectory folder where I developed it. This is an easy process and takes about a half hour to do.

Visit the Wordpress codex and you'll find this advice. For my own transfer I started at step 7 of this instructional page:

http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory

Then I came back and followed the advice of Wordpress guru Chris Coyier, from his nifty

book Digging Into Wordpress:(he is using "blackmothsuperrainbow" as his subdirectory, cuz he's

awesome, so substitute "wordpress" for "blackmothsuperrainbow" in the
below)

"You’ll now have to log in at
http://mydomain.com/blackmothsuperrainbow/wp-admin/, but WordPress
will be in control of the root just as if that were its actual
location. Once you have installed WordPress and logged in to the Admin
area, go to Settings > General and ensure that the settings for your
WordPress address (URL) points to
http://mydomain.com/blackmothsuperrainbow/ and Blog address (URL)
points to http://mydomain.com/. "

Now visit your site--- and Wordpress is neatly tucked away.  Check all of your links as certain plugins can cause make this switch over read a few links in a different way ( I'm not sure why). When I changed my website I had to update two links. Other than that the switch was a breeze!

DFC: templates for Navigation options

There are several options you can use for navigation in your site.  You can find descriptions of these and images of what they look like in the "Pages" section of your dashboard. Look under the "Pages" section and click on "All Pages" . Now look for pages that are called "Template #......." These are unpublished "draft" entries that only the owner of the site can see when they are in the dashboard.

Each template has an image of what a navigation model would look like. There are instructions on how you can use each  model and suggestions as to how a couple models could be combined if desired.  The model that is used on your site ( the requested model called "big button link") is also there so that if you change the style but want to revert to the old style you can. The requested model is labeled as "Template #5 Navigation: Big Button Link".

Out of all of the models the least complex is "Template #2: Exposed menu". This Template requires one change and to add a new image the owner to the site need only create a new page or post for the material.

The second most simple model is the "The Fake Sidebar" model . This model pushes the video right and leaves "prev" and "next" arrows below left. A menu for the three sections of the portfolio goes right. In the model I've provided there is room to expand the size of the video. The alignment of the arrows can be adjusted by changing the margin of the left most arrow. Remove the arrows and you will have jut a sidebar model for navigation that does not need to be updated when you add a new image.

The most manual is "Template #3: Arrows and Growing Menu". Template #3 is also the most transparent model as the code used to create it is very simple; that is to say it is the slow but steady way.


Remember that with all models you will need to add a thumbnail to the main pages of films, commercials, and showreels that links back to the new individual page you create for your content.

Above: Navigation #1: text and image

Above: Navigation #2: Exposed menu

Above: Navigation option #3: the All Image option

                                          Above: Navigation option #4: fake sidebar

Above: Navigation option #5: the Big Button Link w/ all thumbs 

at bottom as one, big button. This is the design requested for the site.

DFC Custom Notes: Some basic html

As you go through your DFC site you'll see some basic html. It will be helpful if you can start to recognize what some of these mean and here's a bits of code you'll see very often. Go into any post or page and click in the "html" tag to see the code that shapes some of your site.


<p></p>      


...That open and closes a paragraph.
You'll see this for basic text that appears in a site:  <p> hello there! I am your site!</p>




<h2></h2>  
  
...Any tag that has "h" and a number is a bit of text that will appear with a variation in size.  The "h" stands for heading and the number stands for a size. The lower the number the bigger the size!


<iframe></iframe>


...These tags surround Vimeo content.


<p style="text-align: center;"> stuff stuff stuff</p>


...You can "style" text in a variety of ways. Most of the time I'm styling text by aligning it, though there are many things you can do to text with this tag.


<a href= "http://site.com></a>


...<a> stands for "anchor" > Anytime you see "<a href=" used you are looking at code that's pointing to a link. Below is an example of a link that has a lot of extras thrown in. The link below specifies a title for the link (that will appear on mouse over), tells that an image is what's being used in the link, tells where the image comes from in the host directory, and tells how large the image is. Wheh... lots of info in there....


<a title="ZEN ESTILO" href="http://digitalfilmcolorist.com/123-2/"><img class="alignleft size-medium wp-image-19" title="ZEN ESTILO" src="http://digitalfilmcolorist.com/wordpress/wp-content/uploads/2011/08/ZEN-ESTILO-300x225.jpg" alt="" width="180" height="136" /></a>


There's a really great source for learning about html and css called W3schools.com
This is a free site and even if you don't go through it in great details it can be used as a quick reference for you to understand what a bit of code is doing in your site. Just cut and paste a sample of code from your site into the W3schools search box!

DFC custom notes: site structure

In Building the DFC site the Fullscreen them Graph Paper Press Template I used posed some pretty interesting dilemmas...

First of all the home page or landing page rules the site. That's core to understanding the site because all organization bows the the restrictions imposed by this home pages which pulls images for display. It;s the first thing a visitor to the site sees so in this case, this page gets to be the big boss.

If you look at the home screen you will see two sets of thumbnails. At top are movie thumbnails, and at bottom are post thumbnails. This segregation of "page" and "post" images feeding into each area allows me to add images and updates to each location and have some sway over where the images go.  Generically this template pulls images from only posts.

The second factor about the home page that has influenced the organization of the site is that the images on the home page appear in order from most rest to last. That means if you put up an image it will pop up on the home page. But what if you don't want the new image on the home page? The nice part is that pages and posts are easy to organize by editing publish dates and in some cases using plugins to order pages.

For more info about how I ordered pages ( with the home page in mind all the while) see the post in this blog posts titled:

Adding order to posts in Wordpress

and

Organizing pages via Wordpress plugin

Scale Images Wordpress: scaling images after upload

When I start building a site I usually rush to put up content. Its something like the feeling of a canvas being easier to work on after you've added that first dab of paint: the void is just a little too much to tackle on a whole and too much planning before you start can start to build anxiety or uncertainty around the actual beginning!

So that being said- I often upload images at a large scale and understand afterwards what the the realistic scale I'll need to use them at actually is.  You'll be glad to know that Wordpress has planned for this sort of behavior.

Go into your dashboard and go to the "Media" section. Under "Media" select library and find all of your images noted here. Hover over the image title and select "Edit" from the menu that appears below.

Once you are in the screen where you can edit your image look to the left and see "Scale Image". Select "Scale Image" and the panel will expand.

After loading my images of all sizes I realized the largest dimension any image would need in the site was 300px. I've gone back through my site and made 300px the cut off dimension for all of my images--- some images even have a cut off of 180px.

Scaling images in this way optimizes your site-- this means a page that shows an image at 100px by 100px doesn't spend time processing a much larger image and then scaling it down. The end result is a site where pages load as quickly as possible!

Sorting Images in Wordpress Media Library

A Wordpress media library can easily become muddled-- you may load more than one version of an image and only remember this later when you go to alter that image and have a hard time finding it. Another dilemma you may run across is that if you make the image titles something funny and distinct, when you mouse over the image you see this weird title pop up on your website or blog.

The solution to this is very simple and one that's easily overlooked. When you are in your dashboard look under the "Media" category and go into your"Library" here you see all the images and icons you've ever loaded.

Simple select "edit" in the menu that pops up when you hover over a title. This should pull up all the info for that image. Here you'll see the title to the image but look below to the catagory called "Alternate Text". This is the are where you can put the actual name you want a visitor to your site to see when they mouse over your image. Use the main title for your own purposes if you need to. You can keep the original title hidden and use it for indexing.

Also note that when you are viewing all images in the media library if you look across the categories of information you will see one called "attached to" and this will tell you where the image is currently being used in your site or the "Location of the uploaded file."

A tricky thing here to note is that if you load an image and then remove it form the site afterwards but want to keep in in the Media Library the file will still be noted as located in the page you originally upload it to. Hence my interest in using titles as labels!