Breakdown of a WordPress Page

A WordPress Page

When training new users on a WordPress, many times they do not know the structure or layout of a WordPress page.  They will see a page but do not realize that it is actually made up of several components. In this blog, I will do my best to break it down to the novice level.

The Components

A WordPress page is usually broken down into several pieces depending on the theme chosen for the website. They are:

  • Header
  • Navigation
  • Sidebars
  • Page content
  • Footer

Here is a drawing to show where these components are usually placed.

WordPressPageDrawing2Additionally you may have:

  • Sliders
  • Columns

Sliders and columns are usually placed in the page content area and you may or may not have sidebars.  Here is a drawing without the sidebars.

WordPressPageDrawingSliders

 The Header

Your business name (title) and/or logo are usually presented within the webpage header.  WordPress will place the title name within the header (if the theme has not suppressed it), or you can create header with the name already present inside of it.

WordPressHead_500

The Navigation (Menu)

The Menu is the way you navigate on a website. It may look like tabs or a horizontal or vertical list. Typically the menu will be in one of three places.  Above the header, just below the header, or on the left side.

WordPressMenuChptrD_500 WordPressMenuAinsEtc_500

The Content

The content of area of a webpage  is where  you present the information that you are conveying to the public.  The webpage will typically consist of the content area with 1 or 2 sidebars and maybe a footer. Here is an example of My About page which includes 1 sidebar.

WordPressContentx500

 The Sidebars

The sidebar is a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, usually one on each side of the page content.  Here is an example:

WordPressSidebars

The Footer

The footer of a webpage is that section of the page at the very bottom.  This area usually contains information regarding the website such as name of the webpage designer, the URL of the designer, name of the theme, links to pages, etc.  Here is an example:

Footers

In Summary

WordPress has the ability to layout a web page in just about any manner conceivable.  It really depends on the creativeness of the web designer and his/her skills. Knowing the breakdown of a WordPress page will greatly help in communicating your desires.

Chuck Ainsworth
AinsworthEtc.com

TinyMCE Advance vs Ultimate TinyMCE

TinyMCE Advanced vs Ultimate TinyMCE

TinyMCE and TinyMCE are plugins which are editors to facilitate the entry/editing of data when creating or updating post or pages within WordPress.

When in a post or page and using the visual editor, I believe either TinyMCE Advanced (by Andrew Ozz) or Ultimate TinyMCE (by Josh Lobe) is must. Both of the these plugins offer the same functionality but where the differences come in is in the setups.

TinyMCE Advanced

The plugin TinyMCE Advanced plugin can be found by entering your dashboard in WordPress, Plugins and clicking on “Add New”.  In the search bar, type in” tinymce advanced”.  Select it from the list provided and perform a normal plugin installation and activation.

After TinyMCE Advanced has been activated you will need to load the desired features in the post/pages edit bars.  To do that go into the settings and make the necessary changes.  The settings for TinyMCE are found in your dashboard in the “Setting” menu.

SettingsMenuTo add to the edit toolbar you just drag and drop the desired features, which are represented by an icon, from the bottom set of icons to the upper set of icons into the desired row.  See example below:

TablesAddedJust repeat the process until you have selected all the features that you need the most. (Note: Just apply those features you really need as loading too many features will slow down the page load).  Below the bottom set of icons there are additional features that can be turned on such as; Advanced Image, Advanced List Options, Context Menu and others.  I usually turn these on as well as “Stop removing the <p> and <br/> tags”.  This comes into play when looking at the code in the Text editor.

I have experienced some issues with this plugin stripping out HTML code that I entered in the Text editor and then reviewing the results in the Visual editor.  Other than that, I have been happy with this plugin.

 Ultimate TinyMCE

The plugin Ultimate TinyMCE provides the same functionality as TinyMCE Advanced but the setup is done differently.  Finding the plugin and installation is the same as TinyMCE Advanced with the exception that you are looking for “Ultimate TinyMCE”.

The access to the settings for Ultimate TinyMCE will be found in the dashboard.  Just click on Ultimate TinyMCE.

TinyMCEUltimateMenu

The plugin setup is completely different from that of TinyMCE Advanced.  This setup is comprised of setting check boxes and the desired row you that wish your icon to display on. In the list provided is just about any feature that you may need when editing.

TinyMCEUltimateSettingsI have found this plugin to work a little better in some of the functionality.  For instance, it does a much better job in retaining HTML code that you may enter using the Text editor. Another thing that I like is the complete list of font sizes whereas TinyMCE Advanced gives you a list of the 7 most common sizes.

Summary

In summary, I like both of the these plugins.  I have found TinyMCE Advanced easier to set up the way I want it and Ultimate MCE seems to handle some of the functionality better.  Ultimate TinyMCE does have a Pro version which offers additional functionality for a price. I have used both of these plugins and continue to do on my websites. My suggestion would be try one or both, learn how it works and stick with it.

Chuck Ainsworth
AinsworthEtc.com

WordPress Course

I am the webmaster for several websites.  One of the things that comes up quite often is how do I use WordPress to make changes to my own website.  With that in mind, I am in the process of creating a WordPress course on this site.  If you would like access to the course, just drop email to cdainsworth@gmail.com asking to be added as member.  I will then set you a login account and notify you when it is available.

The content of the course is about 50% completed so will be going through lots of changes over time.  However, I believe the basics are all in place so feel free to send me an email to get started.  As of right now, this course is free but I plan to move it to a paid course sometime in the future.