{"id":283,"date":"2020-10-14T00:33:57","date_gmt":"2020-10-14T00:33:57","guid":{"rendered":"https:\/\/marshallbrain.com\/wordpress\/?page_id=283"},"modified":"2020-10-14T00:33:57","modified_gmt":"2020-10-14T00:33:57","slug":"wordpress-intro","status":"publish","type":"page","link":"https:\/\/marshallbrain.com\/wordpress-intro","title":{"rendered":"WordPress: A simple and quick way to create a web site"},"content":{"rendered":"\n<p>by&nbsp;<a href=\"http:\/\/www.marshallbrain.com\/\">Marshall Brain<\/a><\/p>\n\n\n\n<p>Last Saturday David and I took a one day \u201cIntroduction to WordPress\u201d kind of class. It turned out to be an eye-opening event for me for several reasons:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>WordPress has come a&nbsp;<em>long<\/em>&nbsp;way in the last several years. I first learned about WordPress early on, and since then the number of improvements is impressive.<\/li><li>WordPress can look complicated if you have never seen it before, but if you want to do simple things, all you need is for someone to show you the easy paths.<\/li><li>The web sites you can now create in WordPress are so beautiful and full-featured, and it only takes a couple of hours to do it.<\/li><\/ol>\n\n\n\n<p>What I would like to do in this article is show you how I set up the web site&nbsp;<a href=\"http:\/\/howgodworks.com\/\">HowGodWorks.com<\/a>&nbsp;in just a couple of hours using WordPress. You will be able to apply these ideas yourself very easily and then extend your knowledge quickly.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1 \u2013 Set up a basic WordPress site<\/h4>\n\n\n\n<p>There are 2 ways to set up a basic WordPress site:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Option 1 &#8211; Go to&nbsp;<a href=\"http:\/\/wordpress.com\/\">WordPress.com<\/a>&nbsp;and create a new site. WordPress.com will host it for you, so you really don&#8217;t have to do anything. In the free version, you can use the free domain name they give you, or you can pay a few dollars per year and use any domain name you like. For example, I could host&nbsp;<a href=\"http:\/\/howgodworks.com\/\">HowGodWorks.com<\/a>, with that domain name, on&nbsp;<a href=\"http:\/\/wordpress.com\/\">WordPress.com<\/a>&nbsp;if I am willing to pay a few dollars per year for them to manage the domain name for me. Or I could have a completely free site if I am happy with the URL HowGodWorks.Wordpress.com.<\/li><li>Option 2 &#8211; Go to just about any normal web hosting company like GoDaddy, HostGator, etc. and get a web hosting account. You will choose your domain name as you are setting up the account. They will have a tool to install\/activate WordPress in just a few clicks (example: you will need to set the password for the admin account that lets you configure your new WordPress site). Once WordPress is installed you have created your new site.<\/li><\/ul>\n\n\n\n<p>I am using option 2 for this particular site \u2013 I went to a hosting company and installed WordPress there.<\/p>\n\n\n\n<p>Once WordPress is installed, you can do two things:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>You can log in to your WordPress account as the administrator and add to or change your web site using the WordPress tools, or<\/li><li>You can go to your web site through your domain name and view what your web site looks like to your visitors. For example, you can go to&nbsp;<a href=\"http:\/\/howgodworks.com\/\">HowGodWorks.com<\/a>&nbsp;and see the web site I have created using WordPress.<\/li><\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2 \u2013 Pick a theme<\/h4>\n\n\n\n<p>WordPress supports the idea of&nbsp;<strong>themes<\/strong>, which control the look and layout of your site. There are thousands of themes available \u2013 some free, some with a price. Right now, a theme called Twenty Fourteen is the default theme that WordPress will install for you (this will change in 2015). Because it is the default theme, Twenty Fourteen has a lot of support, meaning you can find answers to questions easily.<\/p>\n\n\n\n<p>If you do not like Twenty Fourteen as a theme, you can change it. In the WordPress administrator panel, click on Appearance, then Themes.<a href=\"http:\/\/marshallbrain.com\/gif\/wordpress-themes.jpg\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"983\" src=\"https:\/\/marshallbrain.com\/wordpress\/wp-content\/uploads\/2020\/10\/wordpress-themes.jpg\" alt=\"\" class=\"wp-image-284\" srcset=\"https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-themes.jpg 977w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-themes-298x300.jpg 298w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-themes-150x150.jpg 150w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-themes-768x773.jpg 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/figure>\n\n\n\n<p>Click on Add New and you will see the WordPress theme browser. Search through that to your heart&#8217;s content. Or go to a place like&nbsp;<a href=\"http:\/\/themeforest.com\/\">ThemeForest.com<\/a>, or go onto Google and type questions like \u201cWhat is a good wordpress theme for&#8230;\u201d. Type in your requirements and see what you get with queries like that.<\/p>\n\n\n\n<p>I am using Twenty Fourteen because it is simple, powerful, easy to customize for my purposes, and well-supported. It is also&nbsp;<strong>responsive<\/strong>, meaning it responds rationally to different screen sizes. So your site will look OK on a phone, a tablet, a laptop and a desktop.<\/p>\n\n\n\n<p>If there is a WordPress site out there that you like, you can write to them and ask about their theme. Or you can view the page source in your web browser and search for the word \u201cthemes\u201d. Here is what you will find if you do that for HowGodWorks:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;script src=\"http:\/\/howgodworks.com\/wp-content\/\nthemes\/twentyfourteen\/js\/html5.js\"><\/pre>\n\n\n\n<p>The theme is declared right there on the page. The advantage of writing to them is that they might be willing to answer a couple of questions.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3 \u2013 Write a little content<\/h4>\n\n\n\n<p>When WordPress installed your site, it created a sample&nbsp;<strong>page<\/strong>, a sample&nbsp;<strong>post<\/strong>&nbsp;and a sample&nbsp;<strong>comment<\/strong>. A page is just that \u2013 a static web page that you create with the WordPress editor. A post is a piece of content almost exactly like a page, but it will go into a blog.<\/p>\n\n\n\n<p>In the Twenty Fourteen theme, here is the difference: By default, every page you create automatically appears in the menu bar along the top of the site. Every post that you create goes in the \u201cwell\u201d, or the center area, sorted by the date\/time of creation. In addition, posts can also be \u201cfeatured\u201d in a grid or slider that goes at the top of the site.<\/p>\n\n\n\n<p><em>[A tangent for those who want a little more detail: That distinction between \u201cpage\u201d and \u201cpost\u201d is kind of important, and the distinction can manifest itself differently in different themes. As best I can tell, in Twenty Fourteen, only posts can go in the slider or grid. Not pages. If you don&#8217;t like that, pick another theme.<\/em><\/p>\n\n\n\n<p><em>Here is another way it manifests itself. By default in WordPress, because of its history, it defaults to a blog. So by default, blog posts go in the well in sorted order and your web site&#8217;s home page will consist of a stream of blog posts. That is great if you are creating a blog site, not so great if not. You can change this easily. There is a setting to say, \u201cUse this particular static page as the home page, instead of the blog.\u201d Click Settings and then Reading to find the screen that lets you make the change. Then the static page you choose for the home page can link to other static pages. If you also want to have a blog for your site (but not on the home page),&nbsp;<a href=\"https:\/\/wordpress.org\/support\/topic\/static-front-page-and-blog\">this page<\/a>&nbsp;explains how.]<\/em><\/p>\n\n\n\n<p>So, delete the sample page, post and comment that WordPress created at installation. Do this in the admin panel by, for example, going into the Posts menu and clicking on All Posts. Hover over the sample post and then click to send it to the trash.<a href=\"http:\/\/marshallbrain.com\/gif\/wordpress-posts.jpg\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"983\" src=\"https:\/\/marshallbrain.com\/wordpress\/wp-content\/uploads\/2020\/10\/wordpress-posts.jpg\" alt=\"\" class=\"wp-image-285\" srcset=\"https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-posts.jpg 977w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-posts-298x300.jpg 298w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-posts-150x150.jpg 150w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-posts-768x773.jpg 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/figure>\n\n\n\n<p>Create your own post by going to the Posts menu and clicking \u201cAdd New\u201d. Give it a title and then add a paragraph or two.<\/p>\n\n\n\n<p>Now when you go to your site&#8217;s home page, the post will be there in the well.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Add a featured image<\/h4>\n\n\n\n<p>Go back and edit the post you just created. There is a place in the bottom right that lets you add a featured image. The way this works is you upload an image to the&nbsp;<strong>media library<\/strong>&nbsp;and then select it as the featured image. Try it. Now your home page has an image above your post.<\/p>\n\n\n\n<p>Do the same thing by adding a new page. Create a title, a paragraph or two, and add a featured image. When you publish it, that page will have a place in the top menu bar.<\/p>\n\n\n\n<p>If you use featured images, make sure they have enough pixels, as described&nbsp;<a href=\"https:\/\/wordpress.org\/support\/topic\/featured-image-dimensions\">here<\/a>. Also note the difference between a featured image and an image below the title, as described&nbsp;<a href=\"http:\/\/bobwp.com\/exactly-what-is-that-featured-image-in-wordpress\/\">here<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Play with the menus<\/h4>\n\n\n\n<p>If you look at the menus for&nbsp;<a href=\"http:\/\/howgodworks.com\/\">HowGodWorks.com<\/a>, you can see that the one on the top of the page is different than the one in the left sidebar. Also, several menu options link to things that are not WordPress pages. And they are not in alphabetical order.<\/p>\n\n\n\n<p>The default menu for Twenty Fourteen will contain all of your pages, and only your pages, in alphabetical order.<\/p>\n\n\n\n<p>To change the menus, Click on Appearance, and then Menus. Create a new menu, and add in what you like. You can add in pages, add links to external web sites, etc. In the area on the right, slide menu options around to change the order. Move a menu slightly to the right to nest it under another menu.<a href=\"http:\/\/marshallbrain.com\/gif\/wordpress-menus.jpg\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"983\" src=\"https:\/\/marshallbrain.com\/wordpress\/wp-content\/uploads\/2020\/10\/wordpress-menus.jpg\" alt=\"\" class=\"wp-image-286\" srcset=\"https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-menus.jpg 977w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-menus-298x300.jpg 298w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-menus-150x150.jpg 150w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-menus-768x773.jpg 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/figure>\n\n\n\n<p>The top menu and the left menu can be identical, or they can be different. Create two separate menus if you want them to be different.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">You can change the menu colors<\/h4>\n\n\n\n<p>By default, the Twenty Fourteen theme has a black sidebar and top menu, and the&nbsp;<strong>accent color<\/strong>&nbsp;is bright green. What if you do not like these colors? The you need to use a plugin called&nbsp;<strong>Fourteen Colors<\/strong>.<\/p>\n\n\n\n<p>Look for Plugins in the admin menu, click on Add New, search for Fourteen Colors, install it and activate it.<\/p>\n\n\n\n<p>Now, if you look in the Appearance menu, then click on Customize, there will be a new entry for Colors. You can change the sidebar and accent color to anything you like.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adding a forum<\/h4>\n\n\n\n<p>I wanted to have a place on&nbsp;<a href=\"http:\/\/howgodworks.com\/\">HowGodWorks.com<\/a>&nbsp;where readers could ask questions. A traditional way to do this is to have a forum area on the site, so I went to Google and asked about WordPress forums. I found this article:<\/p>\n\n\n\n<p><a href=\"http:\/\/premium.wpmudev.org\/blog\/best-5-wordpress-forum-plugins-and-themes\/\">Best 5 WordPress Forum Plugins And Themes<\/a><\/p>\n\n\n\n<p>After reading through that, and looking at a couple of other articles and reviews, I decided to use bbPress. This article taught me how to get it working:<\/p>\n\n\n\n<p><a href=\"http:\/\/codex.bbpress.org\/step-by-step-guide-to-setting-up-a-bbpress-forum\/\">A step by step guide to setting up a bbPress forum<\/a><\/p>\n\n\n\n<p>It was amazing to me \u2013 the whole forum area was installed, configured and working in about 10 minutes.<\/p>\n\n\n\n<p>Perhaps a month after installation, formum spam started and ramped up very quickly. A captcha plugin called&nbsp;<a href=\"https:\/\/wordpress.org\/plugins\/wp-math-captcha\/\">Math Captcha<\/a>&nbsp;solved that problem for me.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adding Social Media Sharing<\/h4>\n\n\n\n<p>During my reading and investigating, I had noticed that some sites that use the Twenty Fourteen theme had buttons at the bottom of each article for social media sharing on sites like Facebook and Twitter. My site did not have them, and no amount of searching in the settings gave me a way to turn them on.<a href=\"http:\/\/marshallbrain.com\/gif\/wordpress-sharing.jpg\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"981\" height=\"990\" src=\"https:\/\/marshallbrain.com\/wordpress\/wp-content\/uploads\/2020\/10\/wordpress-sharing.jpg\" alt=\"\" class=\"wp-image-287\" srcset=\"https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-sharing.jpg 981w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-sharing-297x300.jpg 297w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-sharing-150x150.jpg 150w, https:\/\/marshallbrain.com\/wp-content\/uploads\/2020\/10\/wordpress-sharing-768x775.jpg 768w\" sizes=\"auto, (max-width: 981px) 100vw, 981px\" \/><\/figure>\n\n\n\n<p>It turns out this this feature, and several others, are available in Twenty Fourteen on the wordpress.com site, but not when you use a different web hosting company. Since&nbsp;<a href=\"http:\/\/howgodworks.com\/\">HowGodWorks.com<\/a>&nbsp;is hosted elsewhere, I didn&#8217;t have access to these features.<\/p>\n\n\n\n<p>If you find yourself in this same situation, the way to solve this deficiency is to install a plugin called Jetpack. It adds social media sharing and about 30 other interesting features. Take time to read through the list and learn about everything in the Jetpack package \u2013 it really is remarkable.<\/p>\n\n\n\n<p>I had to register to activate Jetpack, but it is free otherwise.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Eliminating Comment Spam<\/h4>\n\n\n\n<p>One thing you will have to contend with on a WordPress site is&nbsp;<strong>comment spam<\/strong>. If you don&#8217;t do something about comment spam, people and robots will leave lots of irrelevant comments on your site and really junk it up. There are several ways to avoid comment spam:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Disable all comments (easy to do in settings)<\/li><li>Only allow registered users to comment (ditto)<\/li><li>Moderate all comments<\/li><li>Add some kind of spam blocker<\/li><\/ul>\n\n\n\n<p>A plugin called Akismet is one way that WordPress lobbies for, but it is kind of expensive if you are a business. This article describes alternatives:<\/p>\n\n\n\n<p><a href=\"http:\/\/wpdevshed.com\/alternatives-to-akismet-for-spam-prevention\/\">Free Alternatives to Akismet for Spam Prevention<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Widgets<\/h4>\n\n\n\n<p>In the left hand column of&nbsp;<a href=\"http:\/\/howgodworks.com\/\">HowGodWorks.com<\/a>, there are several well-defined areas like the recent posts, recent comments, etc. These are made possible through&nbsp;<strong>widgets<\/strong>. You can access the widget area by clicking on Appearance and then Widgets. What you will notice is that you can easily add, delete and rearrange widgets. You can also use Google to find additional widgets that you install as plugins.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Google Analytics<\/h4>\n\n\n\n<p>Jetpack provides some simple analytics to help you see how many page views you are getting and where your visitors are coming from. But if you need more information, Google Analytics is the place to be. A plugin called&nbsp;<a href=\"https:\/\/yoast.com\/wordpress\/plugins\/google-analytics\/\">Google Analytics by Yoast<\/a>&nbsp;will get GA installed on all of your pages in a minute or two.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Conclusion<\/h4>\n\n\n\n<p>As I mentioned at the top of this article, this whole experience was eye-opening. It is amazing to me that all of this functionality is available, and is so easy to use.<\/p>\n\n\n\n<p>It is also amazing that just about any question I came up with can be answered with Google in just a few minutes.<\/p>\n\n\n\n<p>Obviously what I need to do next is convert MarshallBrain.com over to WordPress. That will be a little more involved, but I will give it a try soon.<\/p>\n\n\n\n<p>Have fun creating your own WordPress sites!<\/p>\n\n\n\n<p>Sincerely,<br><img decoding=\"async\" src=\"http:\/\/marshallbrain.com\/gif\/mb-signature.gif\"><br>Marshall Brain<\/p>\n","protected":false},"excerpt":{"rendered":"<p>by&nbsp;Marshall Brain Last Saturday David and I took a one day \u201cIntroduction to WordPress\u201d kind of class. It turned out to be an eye-opening event for me for several reasons: WordPress has come a&nbsp;long&nbsp;way in the last several years. I first learned about WordPress early on, and since then the number of improvements is impressive. &hellip; <a href=\"https:\/\/marshallbrain.com\/wordpress-intro\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">WordPress: A simple and quick way to create a web site<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-283","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marshallbrain.com\/wp-json\/wp\/v2\/pages\/283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marshallbrain.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marshallbrain.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marshallbrain.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marshallbrain.com\/wp-json\/wp\/v2\/comments?post=283"}],"version-history":[{"count":1,"href":"https:\/\/marshallbrain.com\/wp-json\/wp\/v2\/pages\/283\/revisions"}],"predecessor-version":[{"id":288,"href":"https:\/\/marshallbrain.com\/wp-json\/wp\/v2\/pages\/283\/revisions\/288"}],"wp:attachment":[{"href":"https:\/\/marshallbrain.com\/wp-json\/wp\/v2\/media?parent=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}