Tag Archives: wordpress

The Super Easy Guide on how to Back Up WordPress

If you’re a frequent blogger/writer you’ll know how valuable in terms of time and effort your articles are, especially if you’re writing isn’t earning you a living. What protection do you have though for your long coffee drinking sessions of inspiration?

Well, you have this somewhat illusive process called backing up. Unfortunately this relatively pain-free process is often overlooked. In this article I’ll show you how you can keep piece of mind by backing up your WordPress (WP) blog – saving you days and hours of torment when that horrible day comes and your site gets erased from the face of the WWW (this can also be applied to many other blogging systems and database driven sites so don’t run away just yet if you’re not using WordPress).

What’s going to get backed up
  • The WordPress database
  • A WordPress XML file (details on this later)
  • Remote WordPress Core files
  • Local WordPress Core files
Set up a folder structure

You need to be organised on your local machine before we do anything. Dedicate a backup folder for each of your websites and create folders inside this that indicate the date and type of backup. By type, I mean local or remote backups. I’d advise remote and local copies just incase there any differences in the WP installation. This may include any updates to plugins or similar updates done with your browser.

First, backup your database

Right, I’m going to say it, brace yourselves, SQL. Yes, the best type of backup you can possibly do is to export your WordPress database to an SQL file.

Depending on your hosting company, you should have access to cPanel or phpMyAdmin at the least, so we’ll use phpMyAdmin for this. Open phpMyAdmin and select Export from the top menu.

You should now see the Export options. First, choose the database you want to export, in my case ‘nouvelle_worpdress’. Next, select the export file type, choose SQL. Make sure you tick the ‘Save as file’ option and choose either ‘zipped’ or ‘gzipped’. Then hit go!

You should now be downloading a zipped up SQL file. Once downloaded, place it in your remote backup folder for the current day. That’s your entire WP database backed up, simples?

XML time

WP has an in-built tool for exporting your posts, pages, comments, custom fields, categories, and tags. Though you shouldn’t rely on this method as your main backup, it’s still best to get your XML fix. Log into your WP admin area and select ‘Tools’, then ‘Export’.

All you need to do now is to select which authors you want to export (I recommend exporting all the authors each time) and hit ‘Download Export File’. This will give you an XML file which you should place in the same folder as the SQL file.

WordPress’s core files

You should have an up-to-date copy of your entire site (WP installation) on your local machine, cut this from the current folder and place it into the local backup folder for the current day. Now re-download from your FTP server what you just cut from your local files and copy it into your remote backup folder for the current day.

You should now have a local copy of your of:

  • Remote SQL file
  • Remote XML file
  • Remote WP Core files
  • Local WP Core files

Once you have all these files you should then backup your information to an external HDD or use a system similar to Time Machine. Your backup should now be complete!

How often should I back up?

Well, this purely depends on how much and how often your write. Usually a week’s backup will suffice but if you do any larger changes then a backup on that day wouldn’t go a miss.

Programs like Time Machine will help to keep your local backups up-to-date by the hour if needed but remember, you’ll still have to monitor your remote backups too.

Automation? Cron jobs, at your service

If you don’t want to keep going into phpMyAdmin to export your database to SQL every time you can use something called a ‘Cron Job’ to do the hard work for you. Cron jobs are simply pieces of scripts that are executed by your server at a given time. These are normally handled in the cPanel (or similar) interface (You can find them under ‘Advanced Tools’).

There are many ways you can configure each job so I’ll just show one method for now. Go into the ‘Cron Job’s section and choose ‘Advanced (Unix Style)’ and paste in the below code into the ‘Command Line’. This will export your database to an SQL file in the specified directory, make sure you’ve replaced the capital letters in the code with your information.

You will also need to specify a date for this function to occur. In this case I’ve used 1 1 * * 1 which will export my database on the first minute, of the first hour on the first day of each week. Then I simply download it from my FTP.

mysqldump -uUSER_NAME -pPASSWORD DATABASE_NAME > /home/username/www/path_to_backup/localhost.sql

Conclusion

I hope you found some of the processes helpful to backup your blogs and if you have any questions please leave a comment. If you have any backup methods of your own, let us know!

Become expert in wordpress with testking SSCP web designing course. We offer best quality testking XK0-002 resources with thousands of free testking HP2-T16 graphic tutorials for practice and review.

Design a Clean & Tidy Blog Layout Mock-Up in Photoshop

Design a Clean & Tidy Blog Layout Mock-Up in Photoshop

Designing your own custom theme for your favorite blogging platform can work wonders. It’ll be unique, admired and something you can be proud of. In this tutorial, Ionut Ciursa will show you how to create a blog layout with subtle gradients, thin lines and good typography.

Step 1 – Setting up the document

Create a new document in Photoshop (Ctrl/Cmd + N) with the dimensions 1920px by 1100px. Then fill the background with the color #dbdbdb using the Paint Bucket Tool (G).

Step 2 – Creating the background of the content

Select the Rectangle Tool (U) and create a rectangle in the middle of your canvas with the width 940px and the color #f8f8f8. Then double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer "layout bg."

Step 3 – Creating the header

Create a new group and name it "header." Then select the Rectangle Tool (U) and create a rectangle with the height 15px that goes from the left edge of the canvas to the right edge. Use the color #90999b. Name this layer "top bar."

Step 4

Select the Line Tool (U) and create a line with the weight 1px and the color #848d8f. Put this line at the bottom of the rectangle which you have created at the previous step. Name this layer "1px dark line."

Duplicate this line (Ctrl/Cmd + J), change the color of the new one to #acb7ba and move it one pixel up. Name this layer "1px light line."

Step 5

Select the Rectangle Tool (U) to create a rectangle with the dimensions 940px by 100px using the color #f2f5f5. Double-click on this layer and use the settings from the following image. Name this layer "header bg."

Step 6

Use the Type Tool (T) to write a name for your layout in the header. I have used the font Adobe Garamond Pro and the color #9da6a7. Double-click on your text layer to open the layer style window and use the settings from the following image.

Step 7

Create a new group and name it "subscribe." Download these social media icons and move the rss, email and twitter icons into your document. Put them in the right side of the header and write the name of each icon beneath it using the font Georgia and the color #909b9c.

Step 8 – Creating the navigation bar

Create a new group and name it "navigation bar." Then select the Rectangle Tool (U) and create a rectangle with the height 40px beneath the header using the color #afbbbc. Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer "navigation bar."

Step 9

Use the Line Tool (U) to create four lines with the weight 1px – two at the top of the navigation bar and two at the bottom. Use the color #9aa4a6 for the dark lines and #bdcccd for the light ones. Take a look at the following image for reference.

Step 10

Select the Type Tool (T) and write the name for your navigation menu items. Use the font Georgia and the color #ebf3f4.

Step 11 – Creating the featured area

Create a new group and name it "featured." Then select the Rectangle Tool (U) and create a rectangle with the height 180px beneath the navigation bar using the color #ddeaeb.

Step 12

Create two lines with the weight 1px and put them at the bottom of the rectangle which you have created at the previous step. Use the color #becacb for the dark line and #e0f0f1for the light one.

Step 13

Select the Rectangle Tool (U) and create a rectangle with the size 240px by 140px. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Duplicate this rectangle two times (Ctrl/Cmd + J) and arrange them as you see in the image below.

Step 14

Select the Ellipse Tool (U), hold down the Shift key to maintain the proportions and create a small circle in the right side of the featured area using the color #c3d4d5. Name this layer "right circle", double-click on it and use the settings from the following image.

Step 15

Use the Custom Shape Tool (U) to create an arrow inside the circle with the color #edf6f7. Name this layer "right arrow."

Step 16

Select the "right circle" and "right arrow" layers and drag them over the ‘Create a new layer’ button from the bottom of the Layers palette to duplicate them. With the two new layers selected go to Edit > Transform > Flip Horizontal. Then move them in the left side of the featured area using the Move Tool (V). Change the name of these layers to "left circle" and "left arrow."

Step 17 – Creating the content

Create a new group and name it "content." Then use the Rectangle Tool (U) to create a rectangle with the dimensions 600px by 160px. Then copy the layer style of one of the rectangles from the featured area and paste it to this layer to get the same double stroke effect.

Use the Type Tool (T) to add some text beneath the rectangle. I have used the font Georgia Bold Italic for the headline (#555858) and Helvetica for the block of text (#525757).

Step 18

Create a new rectangle with the dimensions 290px by 100px. Right-click on this layer and select Paste Layer Style to add the double stroke effect. Then select the Type Tool (T) and add some text beneath this rectangle.

Select the two layers and duplicate them three times by dragging them over the ‘Create a new layer’ button from the bottom of the Layers palette. Then arrange the rectangles and the text layers to have four blog posts. Take a look at the following image for reference.

Step 19

Select the Line Tool (U) and create a horizontal line and a vertical one using the color #cccccc, to separate the blog posts.

Step 20

Create a new group and name it "sidebar." Then select the Rectangle Tool (U) and create a rectangle with the width 300px using the color #e7eded. Name this layer "sidebar bg."

Step 21

Use the Line Tool (U) to create two vertical lines in the left side of the sidebar. Use the color #c9cfcf for the dark line and #f3f9f9 for the light one.

Step 22 – Creating a search bar

Select the Rectangle Tool (U) and create a rectangle using the color #f4f7f7. Name this layer "search bar", double-click on it and use the settings from the following image for Stroke. Then use the Type Tool (T) to write something inside your search bar.

Step 23

Use the Type Tool (T) to add some text in your sidebar.

Step 24 – Creating the footer

Create a new group and name it "footer." Then select the Rectangle Tool (U) and create a rectangle with the height 40px using the color #b6bfc0. Name this layer "footer bg", double-click on it and use the settings from the following image for Gradient Overlay.

Step 25

Select the Line Tool (U) and create two horizontal lines at the top of the footer. Use the color #9da5a6 for the dark line and #c5cfd0 for the light one.

Then select the Type Tool (T) and write a copyright statement in your footer using the color #858e8f and the font Georgia.

Final Result

Here is the final result of this tutorial. I hope you enjoyed it. Click on the following image to see the full size layout.

Introducing you to the new Circlebox Blog Redesign!

As many of you know, Circlebox Blog, since birth, has been using a premium theme. Although it was a great theme, with the blogs recent success it was time to put some time aside to design my own theme and raise some money to get it coded up. So lets call this post an introduction to it!

The new theme, as you should be seeing on your screen as you read this (unless of course you’re in a feedreader, in which case get your ass over here!), is modern, clean and quite minimalistic. I wanted it to be stylish, but at the same time I want you to be able concentrate and appreciate the content the blog has to offer instead of just it’s theme.

So… what’s new?

Improved Headings

We have much improved headings; orange ones, green ones, gray ones, italic ones, bold ones… you name it! These will be put to good use to help organize different types of posts such as round-ups and tutorials, all-in-all meaning they’ll be much easier to navigate and skim through.

Guest Authors

Within the past few months I’ve experimented with guest authors; some good and some bad. I’d like to experiment some more. With the new Circlebox Blog theme, I’ve added an authors page, meaning every author with 5 posts or more will get a permanent spot on our authors page. Each author will have an ‘about’ page with some information about themselves, a link to their website and Twitter account and a list of articles that they have previously published on the blog.

For the time-being, posts will be contribute-only and I’ll be manually accepting and publishing posts, but maybe sometime in the future, when things pick up a little more, I’ll be able to offer a competitive rate and authors may be able to access the admin interface using their own log-in details. More to come on this in the next few months!

Twitter Links

Twitter is huge, especially within the online design community. Because of this I have added the option to include your twitter username (i.e. “callumchapman”) in comments, meaning people will be able to directly visit your Twitter account as well as your website every time you leave a comment.

A Footer!

A footer is something the previous theme didn’t have; but now we have one! I won’t be using the footer too much, but have decided to include a ‘top posts’ and ‘flickr feed’ section, which I’m sure will come in handy for new readers of the blogs, or for people who just want to know what the top posts are.

A Flickr Group

A Flickr Group is something I have been meaning to do for a while now, so I though I may as well introduce it with the new theme. Nothing too special, but it allows users to upload their work to the group and possibly have it seen by thousands of people! Another possibility, if the Flickr Group really takes off, is to have a monthly collection of the best user submissions every month – so join the group and get uploading! You’ll find the Flickr Group link in the top right.

Advertisement Spots

We have new advertisement spots which I hope to get filled some point soon. We have a range of ad spots to our right in the sidebar, and a banner on top of every post page. We also loads of icon ads at the bottom of the page (in the footer) for those that want a cheap method of advertisement. I’ll also be accepting link advertisements, see the advertise page for that!

And that, ladies and gents, is pretty much it!

Please bare with me over the next few days as everything is finalized – as always, there may be a thing or two that might need changing. If you spot anything that doesn’t seem right, please let me know!

How to Add a Custom Field Download Button to WordPress Posts

This beginners WordPress tutorial will teach you how to add a Download Button to the bottom of your WordPress posts, with the ability to change the buttons destination URL on every post by using a Custom Field.

The outcome of this quick and easy tutorial should look and work something like the download button I recently designed and installed over at Circlebox Textures.

Circlebox Textures Download Button

The first step is to design or download a button you want to use. If you can’t design your own, there are plenty of freebies out there on other design blogs, as well as icons and button generators. Once you’ve designed or chosen your button, it’s time to insert it into your theme with the PHP code.

Go to your WordPress Admin Dashboard, and under the Appearance tab, click Editor. On the right hand side, you should see a list of files that your theme is using. Click on the Single Post (single.php) file. Locate this line:

With that line located, insert this code somewhere beneath it. Remember to change IMG URL to your image, for example ‘http://yourdomain.com/images/downloadbutton.jpg‘.

ID, "download_link", $single = true) != ""){ ?>
"

You’ll probably want to style your button a little using CSS to get it in the right place. Put it in a DIV, your code should now look something like this:

ID, "download_link", $single = true) != ""){ ?>
"

With that done, you can head over to your Stylesheet to style your button. Here’s the CSS I used:

#downloadbutton {
float: left;
margin-left: 0px;
margin-top: 10px;
margin-bottom: 20px;
}

That’s it! Now all you have to do to get the button displaying and working in your post is insert a Custom Field. When writing a new post, you’ll find a Custom Fields box beneath the editor. Click ‘Enter New’. Insert ‘download_link’ in name, and the URL to the download link in Value, and then click ‘Add Custom Field’.

Custom Field Download Link Settings

After doing it once, you’ll be able to select the custom field automatically from the drop down menu.

Custom Field Download Link Settings Drop Down

A good thing about this particular piece of code is if you don’t insert a custom field (i.e. you don’t have a download link for that post) the download button won’t show, therefore not confusing your readers!

A huge thanks Zach Dunn from Build Internet! for teaching me this trick in the first place. I hope it taught you as much as it did me!