WordPress Design Tip: Creating Rectangular Graphics for Your Posts

I’m learning new techniques as I go. Last time I said that it’s best
to have square images so that they don’t get awkwardly cropped when
you want to share them on Facebook. I said that if you make your own
graphics make them a square that is at least 200X200 pixels last week.

This week I learned a trick to use when you absolutely must have a
rectangular graphic and turning it into a square would skew it too
much.If your rectangle is small enough you can create the
rectangular image first. Save it as a jpg in its original dimensions
than insert it into a new square image with a neutral background
that matches/blends with your theme. Once the image you created is
set in the square save the square image as the graphic you will post
online. The original rectangular image will be what is visible
on Facebook and your blog. In my case that means make the rectangular
image and insert it in a new homemade image with a white background.

I will post new tips as I learn new tricks.I’m testing out some theories I
have on posting/linking to rectangular images that you can’t alter into
squares without having it become awkwardly cropped when you share a post
on Facebook.


WordPress Webdesign Tip: Best Shape for Sharing Posts with Homemade Graphics on Facebook

My art journal has inspired a WordPress Web Design tip. I found out that it’s best to make any homemade graphics a square shape that is at least 200X200 pixels if you want to share it on Facebook. Facebook likes square thumbnails and crops anything that isn’t square shaped awkwardly.

Are You Mobile Ready?

Google’s new website ranking system makes it important to have a site that can be
easily accessed on mobile platforms.

I found Sarah Whitford’s You need a mobile friendly site NOW! Here’s how to do it
blog about making WordPress sites “responsive”. Luckily I’d already chosen a
responsive theme when I created my site this October and nothing more needed to
be done on my part.

I also discovered Google’s helpful Mobile-Friendly Test site to further test my online
outreaches mobile readiness. It doesn’t tell me how it actually looks like on a mobile
but I at least know that Google thinks it is which is good for SEO ranking. You can
use the test to check the mobile readiness of any of your website URL’s.

Creating Book Widgets within a WordPress Page or Blog Post

This is more of a simple tip than a long tutorial. When I had a blog post about creating a widget for a book on a WordPress web page I wondered what would happen if I needed to cull widgets from the sides but still wanted to advertise earlier works. I played with WordPress’s dashboard and came up with a simple technique for creating a widget within a WordPress page or blog post.

Basically go to the Amazon page of the book you want to advertise and right click it. Chose the “copy image location” option on the menu. Choose whether you want to create a page or post on the WordPress dash board. Click the “add media” button. You will be taken to a new “add media” screen. There will be an “insert from URL” option on the menu on the left choose that. There will be a screen with an entry field for the URL paste the URL of the image there. You can also add a caption to it if you wish.

Now you have the book’s cover posted in your page or post and you will see the cover image of the book when you go back to the main post/page visual editing screen. Copy the URL of the book’s Amazon sale page. Highlight the book cover image. Now you can click the hot link icon that looks like a chain link to paste the URL of the book’s Amazon sale page.

You have now created a widget for your book. This may be useful if you are creating a blog post about a new work being published or else want to create a bibliography page of your works and have a set of widgets instead of just titles.

My widget for demonstration purposes. It has a short story of mine in it.

How to create a widget on WordPress for your book

I just figured out how to create a widget for a book that published my short story and it ended up being easy:

When you log into WordPress go to the front end of your site and you will see a drop down list after your site’s name on a banner at the very top of your page. Click it and choose the “widget” option. You will be taken to a list of available widgets, choose the “image” widget option. This will create a drop down menu. First you are asked to choose where you want to place the widget. Choose a location. Then you will be taken to a page that is needed to generate the content of the widget. For your image URL go to the Amazon page where your work is listed and right click on the image of the cover. This will produce a menu choose, “copy image location” and copy and paste the info into the image URL entry field on the “image” widget. You can add a caption explaining the importance of the widget. Then you can copy and paste the URL of the webpage where the book is located in Amazon into the “Link URL” entry field, and it will direct anyone who clicks it to your work’s sales page where they can buy it if they want.

Once that is set up you now have a widget of any published works. It’s simple enough when you know how it’s done, but it may take a while for a newbie to figure it out. The support page I looked this up on left some stuff unsaid so I decided to add an extra WordPress Webdesign tip to this site as a courtesy to any reader who could use the information.

How to Create WordPress Pages without Tabs Showing Up on the Header

I was thinking of future developments for my site and thinking I may need to create pages for story excerpts and sample chapters. I was thinking of creating an index page and individual pages for each of my samples. However, when you create a page on WordPress a tab for it is created in the main header of your site by default. This could create a too cluttered look if I get a decent sized collection of clips to show off.

I experimented with WordPress’s dashboard and found two simple tricks that solve this problem. I thought I shouldn’t keep it to myself so I made up this post.

There are two options:

Option #1: When you are creating a page you can assign it parent page by choosing a page as the parent page in the “page attributes” menu on the right of the edit page screen. You may have to expand this menu by clicking an arrow next to “page attributes” but it should have a parent drop down menu option when it is fully expanded. Once the page is published WordPress will list this new sub-page on a drop down menu for the parent page on your site’s main header bar. The sub-page is accessible by clicking the downward arrow next to the parent page’s tab on the header menu bar.

Option #2: You want to create an index page where the sub-pages you create are listed as a series of links that can be clicked to access the sub-pages. You can make it so the index page has a tab on the header but there are no tabs for the individual sub-pages and the sub-pages don’t become part of a drop down menu for its parent page. There is a simple trick to stop your sub-pages from being listed as one of the main header’s tabs without having to know advanced programming or downloading the “hasn’t been updated in two years “exclude pages” add-on”.

Create the sub-page in the edit page screen and it’d be a good idea to click the “view page” link underneath the page’s title input field so that you can copy the full URL of your sub-page for future reference in a Wordpad document. Once you have finished creating all the sub-pages you want you can then create the index page by creating a list of your sub-pages and using the regular hotlink button that looks like a chain link icon to highlight the relevant words and input the sub-pages’ URLs. You can use the Wordpad document I suggested you create to simply copy and paste the URLs into the URL entry field that pops up. Repeat as many times as needed until you’re done creating links for all the items on your index page’s list.

Once you’re done with creating the index page and the sub-pages you then go to the “Appearance”s tab on your WordPress dashboard, this will open a sub-menu click “Menu” on the “Appearances” drop down menu. It will take you to a page, make sure you are toggled on the “edit menus” tab. There will be two lists, one called “pages” on the left and “menu structure” on the right. The list on the left will show the most recently created pages. They will also be added to the “menu structure” menu. You can delete the sub pages from the “menu structure” list by toggling their drop down menus and choosing the “remove” option from the bottom of the sub-page’s drop down menu. When you’re done weeding your menu structure save your changes. The next time you refresh your WordPress site’s front end all the header’s tabs will be configured to only show what you want it to. Your index page and its list of links will then become the only means to access the sub-pages that you have created in WordPress on your site.

You can see the results of Option #2 on my Links page which has a link to “experiment page”.

You need not download the out-of-date “exclude pages” add-on nor need to know advanced code with this workaround. I’m striving for a simple and attractive site so these tricks are good enough for my needs and I thought it might be useful to other people so I created this blog-post as at WordPress Webdesign tutorial.

Experiments in Webdesign-Creating WordPress Pages without Tabs

I was thinking there may come a day when I want to post pages of story chapters and excerpts to advertise my writing on this site.  Most times a new tab on the header tool bar is created every time you create a new page in WordPress, and I was worried this would create a cluttered look on the menu bar.

I experimented and found out there is a way to keep a page off the header.

If you assign it a parent page it will become part of the drop down menu on the parent page’s tab without being a part of the main menu.

I also know how to use a page as an index page with links to subpages and not have it listed on the main menu or become part of a drop down menu.

You can look at the results on the experiment page link on the Links page.

This opens up new webdesign options for this site. Maybe I’ll create a tutorial explaining this if anyone’s interested.