Page Builder and Black Studio TinyMCE Widget

I love SiteOrigin.com, Greg Priday and his crew. I love their themes - Origami still one of my favorite. I love their background generator bg.siteorigin.com which is just plain fun, and really helps creating a color scheme with a background to match! But today's blog has got to be about PAGE BUILDER, Greg's incredibly useful plugin which works with Black Studio TinyMCE widget to create custom layouts.

He just created this classy video which gives you lots more information about Page Builder. I'll will be adding more to this post soon.

New Infographics

Content

Getting Domain Name and Finding Web Host

Loading WordPress

 

WP Dashboard

Settings

 

 

 

Pick a Theme

 

 

 

 

Pages and Posts

Adding Images

 

 

 

Plugins and Widgest

 

 

 

Check out the new homepage for this website and see the infographics I just got done creating in full color. They each link to the post describing in greater detail the how tos of creating a WordPress website EZily!

I used http://www.canva.com and my really old Photoshop Elements. Hope you enjoy these "infographics" and find them useful in making your WordPress website.

(This burst of creativity could be because I'm on keeping busy waiting for Robin and Darcy's Baby decide it is time to come out and play).

 

 

Child Theme

Save The Changes You Make With A Child Theme

parent-child themeWhen you make stylistic changes to your website you want them to continue to exist even if the theme you are using gets updated. This is the main reason it is advisable to create a Child Theme for the theme you are using. When you make your website with the Child theme activated you have a safety net. When the Parent theme is updated – maybe the developer found a better way to do something, or updated it because of new security protocols – you will not lose the changes that you have made to the look or function of your theme.

Simplified – A Child theme is a folder with one or several files in it that changes the look or actions of your website based upon a Parent theme. Style changes go in this folder on a css stylesheet. WordPress references the child theme to the parent theme. When the parent theme is updated the changes made on the child theme remain.

Other changes can be made to your theme and placed in the Child Theme folder – such as to the header.php, to change where the header is located on your website, or adding any changes to the footer.php, etc.

If you are just a beginner you may not yet be making changes that require a child theme. Many premium themes – ones you pay for - have a lot of customization built in, that will not be affected when the theme updates.

But as you continue to refine your website and make little tweaks to the style, or decide you want to add functionality with special coding, you will want to create a child theme folder, make child theme docs (style.css, footer.php, header.php, etc.) and place them there.

If you haven't already read my blog, FTP Program and Editor you may want to do so. It explains the two free programs that I suggest you download that help you make a child theme and that will facilitate your work on your website.

A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes.” says WordPress.org

OKAY Let’s Make A Child Theme

1. You have chosen your theme and now decided it is time to make a child theme. If you need to upload a new theme do it from your dashboard. (Example you decided to try Origami, and you upload it from your WordPress dashboard: Appearances).

2. You create a child theme folder in your WP website, on the server that hosts it, in /wp-content/themes. There are two ways to do this:
a) Use your Cpanel login with your host and create a new folder through file management.
b) Use an FTP program (such as Filezilla) to open up the website and by right clicking create a new directory in the wp-content/themes
c) The folder you create is the theme's name hyphen child Example origami-child

I suggest using FTP because the next step requires creating a stylesheet in Notepad++ and placing in it that folder.

3. Open Notepad++, a wonderful free source code editor. You can copy and paste the following into a new doc and then modify it with your theme's name. Be sure that the /* at beginning and ; at end are all there. They are very important to the coding.
Example using Origami as the theme
/*
Theme Name: Origami Child
Theme URI: http://siteorigin.com
Description: Child theme for Lindy's EZ WordPress Origami website
Author: Lindy Flynn
Author URI: http://EZWordPress4U.com
Template: origami
Version: 2.5.17
*/

@import url("../origami/style.css");

4. When you save that document in Notepad++ be sure to save it as “style.css” The css says that it is a cascading style sheet document.

5. Next step is to place it in the child theme folder on your host. You can ftp it there or you can upload through your host panel interface.

6. At the same time I ftp the style.css into the child folder I like to open up the parent and copy the “screenshot.png” from the parent folder to my computer and then copy it into the child folder. That way when you go to activate the child-theme it will have an image duplicating the parent's.

7. From your WordPress dashboard, Appearances (be sure to refresh browser window), activate that chid theme.

8. When you go to Editor, under Appearances to make a change - say font color, the stylesheet that automatically is shown is the Child stylesheet.

Congratulations! You have now protected your coding and special changes from oblivion.

Additional resources:
The best explanation and instructions I have been able to find is the one on WordPress.org
Child Themes
http://codex.wordpress.org/Child_Themes
Themify - Has an excellent section on saving the whole theme templates folder to the child theme when you want to modify more complicated functions.
http://themify.me/docs/child-themes

FTP Program and Editor

Before you make a Child Theme – I recommend downloading Filezilla, an FTP program, and Notepad ++, a source code editor. You need to be able to create a Child theme document that is a css file and then place it in a Child Theme folder on your host server. Or you could upload the document through your Cpanel. I find an FTP program easier. The two programs I suggest are:

Filezilla FTP Program

  • FTP (file transfer protocol) program that can take files from your computer and copy them to your WordPress folders on your host server. I recommend Filezilla. NOTE: be sure you are on the legitimate website before you download any software. You can also use the Cpanel or host control panel to upload/download files. WordPress.org has good info on ftp programs which are also called FTP clients. http://codex.wordpress.org/FTP_Clients also. YOU WANT THE CLIENT FTP PROGRAM. This is the program that allows you to take files and put them on your server.

Notepad++ Source Code Editor

  • Source Code Editor that you can use to make simple files that are saved as css (cascading style sheets), php (the acronym doesn’t really explain that it is a little action program) or even just html. Notepad++ is the one I recommend. Notepad++ uses colors and what is known as “Syntax highlighting” which means it displays text, especially source code in different colors and fonts according to the category of terms. Notepad++ is simple and easy to use – but has expandable capacity for professional developers. 

Once you have created a Child Theme stylesheet – see the next blog – you will use your FTP program to move it from your website to your server. Having an FTP program and an Editor will expand what you are able to do with your website and will make your feel like the real website developer you are becoming.

    • tax Highlighting and Syntax Folding
    • Syntax Highlighting andyntax Fol.
    • This is a bit of a test to see if this will post to Facebook now and again