Wordpress administration

WordPress works with 2 main content types – Posts and Pages. The difference between these two can be difficult to recognize at first, but basically you use a Page to display content (web page) that is static, that does not need to be updated very often. Posts, on the other side, are something like news, blog articles, so they represent content that is being continuously added and updated on your website.

An example could be a catering company website with this navigational structure (a site menu): Home, About, Services, Our Projects and Contact. On such website a Home, About, Contact and most probably also Services would be created as Pages in WordPress. And, you’ve guessed it, if you would like to add a new project in Our Projects section, you would have to create a new Post in WordPress.

All Posts have to be assigned to their Category (or more categories) – in this case its name would be “Our Projects” or simply “Projects”. Categories (as well as Pages) can be hierarchically ordered, which you will see in Publish the post section bellow. It means the “Our Projects” category can contain subcategories “Business events”, “Weddings”, “Celebrations”. If you add a post to any subcategory, there is usually no need to assign it also to a parent category (although, everything depends on the WordPress template you are using).

Now, with the basic theory needed, we can start creating our first Post in WordPress. If you have an experience with a text processing application like MicroSoft Word (from their MS Office suite) or OpenOffice.org Writer, than you will find the procedure very very easy. I divided whole process into following sections:

• Creating a new post
• Basic editing
• Inserting an image
• Publishing the post
• Additional editing

Let’s roll it…

Creating a new post

Creating a new Post in WordPress is really easy. But first you need to log into WordPress administration ;).

1. After you log in, the Dashboard will appear. Here you have 2 possibilities how to create a new article. You can either click a “New Post” quick access button on top right (A) or hover the mouse over “Posts” panel, click the triangle button (B) and choose “Add New” (C)from displayed menu.
   
2. You will be taken to “Add New Post” page. There are several panels displayed here so you might be a bit confused. This and another step is optional and it’s just my advice to turn some panels off as you will probably never need them (on the picture in orange). Each WordPress administration page contains “Screen Options” (A)which will help you to hide/display just the information you need.
   

   There is no need to repeat the Screen Options procedure in the future if you access the WordPress administration from the same computer and the same web-browser.

3. Clicking the “Screen Options” button will display hidden panel where you can un-check the information you don’t want to show up (A). When you finish, click the “Screen Options” button (B) again to hide the panel. As you can see, all the information I didn’t want to display is gone. Nothing will distract me from what is important now – writing the article.
   
   
4. As you’ve noticed already, the whole screen is divided into 3 sections. The menu on the left, the main content area at the middle and the other settings area on the right side. The body of article (Post) is being created in main content area. Every post needs to have a unique title (A). You write the article into content area (B) bellow formatting panel (C). At first you can probably see just the first row of formatting panel. It contains the basic, most-used formatting options. If you would like to display additional formatting buttons, just click the last button (far right) in the first row of formatting panel (C).
   
   

Now, that we’ve inserted some text into Post, it is time to make it look better. Time to format.

Basic editing

WordPress offers quite extensive possibilities of text formatting. If the tools offered are not enough for you, you can still use a plain HTML coding (you need to switch from Visual editor to HTML editor – tabs in the top right corner of post content block). We will go through the basic ones now, but you can try the other functions yourself. If you mess up something, there is still “Undo” and “Redo” button (in the second row of formatting panel).

1. The text in WordPress is divided into paragraphs. Each time you press [ENTER] on your keyboard, a new paragraph is created.
   

   In case you would like to start a new line in the paragraph, you can insert it with [SHIFT] + [ENTER] key combination.

   In this step I will show you how to insert a sub-title or sub-heading to separate different sections of your article. When starting a new sub-heading, press [ENTER] on the keyboard to close the previous paragraph. Then write sub-header text and select it (A). In the second row of formatting panel click on Format button (B) and choose “Heading 3″ (C). You have created a sub-header now.
   
   

   Please note that due to HTML hierarchy I suggest NOT to use “Heading 1″ and “Heading 2″ to format a sub-header. These 2 are most likely assigned to the website header and post/page title.

2. Time to emphasize some text in paragraph now. Some words, phrases or sentences in paragraph can be more important than the other. You can make them stand out with heavier, leaned, underlined or line-crossed (obviously for something that no longer applies) text formatting. I will show you how to make the text italic (leaning to the right). Highlight the text you want to work with (A) and press the appropriate format button – in this case “I” (B). As simple as that.
   
   
3. If you need to insert a list of items (either ordered or unordered) first you need to write the list items. After each item press [ENTER]. When you are done, select all future-list-items (A) and click on one of list formatting buttons (B) – I chose unordered list with a bullet in front of each list item.
   
   
4. Last, but very important, formatting function I will show you is how to insert a link into the article. Internet is all about connection between information – links. You can create a link to another website, another article or section on your own site, link to a file or to a section of the current article or web page. Just select the phrase of the linked text (A), click a link (chain) button in the first row of formatting panel (B) and fill out the form displayed (C). When you are done, just click the “Insert” button to confirm (D).
   

   If you decide to edit the link later, just place the mouse cursor somewhere in the linked text and click link button (to cancel the link, press broken chain button on its right). The link form will reappear and you can adjust the information.

   

Basic formatting is done, but we want some images too.

Inserting an image

Post without an image is – boring. So let’s include some.

1. If your website’s template support post thumbnails (also called featured image), you can insert one into Featured Image (B) panel on the right side. Besides this type of image, you would certainly want to insert a picture directly into the article. Just place the mouse cursor to the position, where the image will appear and press “Add an Image” button (A). Image insert form will be displayed. There are 3 options how to insert the picture. You can upload it from your computer, insert it from Internet location or use Media Library (which contains all previously uploaded files to your website) (C). I will upload the post’s Featured Image from my computer, which is selected by default. So I just click the “Select File” button (D).
   
   
2. After the file is uploaded and processed by WordPress, you can fill out the information in the form. It contains image thumbnail, image description section, image link (if it is used as link) and image alignment and size section. My advice is to fill out at least Title, Alternative Text (A) and in case you are inserting the picture into the article, set up also Link URL (B), Alignment and Size (C). To insert picture into the post or use it as featured image or delete it from Media Library use buttons at the bottom of the form (D). Afterward just Save All Changes (E) and close the form window (F).
   
   

Doesn’t the article look better now?

Publishing the post

I think I’m done with this article. During the process of post creation, it is not appearing on your website. You need to publish it first, here is how to do so.

1. Before the actual post publishing we change our attention from the main content area to the other settings area on the right side. I hope you still remember that every Post needs to be assigned to a Category (A). Then, for easier searching features, I usually assign a tags to the post (B). Tags are words or short phrases describing the content of the article. They are useful also for Search Engine Optimization (SEO). During article creation process I suggest to save your work continuously. You never know what can happen. Just press “Save Draft” button (C) to save the article (it won’t be published yet). When you’re ready to publish, set the time (or leave it) and press the magic “Publish” button (D).
   
   
2. WordPress now processes the Post and publish it. You will be informed about the operation result (A) and also offered a link to view the post directly on your website (A, B). Notice also the Permalink section under the Post Title which represents the full Internet path (URL) to your Post. If you don’t like it, you can partly change the link (just its last section) pressing “Edit” button (B). You also have the ability to get a short link to your post (B). It is useful for example when you tweet about the article on Twitter.com where you can type in just short text messages and the URL of the post is too long (for example “http://www.too-long-web.com/long-category/very-very-long-postname/”) – this will shorten it significantly (for example “http://tlw.com/lcvvlp”).
   
   

Congratulation! You have successfully created a WordPress Post!

Additional editing

Just in case you found some mistake in the published article, there is still possibility to edit it additionally. Simply open Posts panel drop-down (A), click on Posts list (B) and click the post title (C). Than use above procedures to edit the post.

That’s all from me for today. Thanks for reading the article till here ;)

Any questions about the topic? Use commets form bellow. See you later!

New home-page design

For graphic design I used Inkscape and for coding and programming Czech editor PSPad. Again, the website is not compatible with (evil) Internet Explorer 6 (I hope everybody updated the browser by now…), but all modern browsers should have no problem. However, if you find any flow in the design or site behavior, have suggestions to make it better, please use comment section bellow this article or send me your opinion.

However if you were familiar with previous theme and want to temporarily revert back, it is still possible to switch to blue theme – just click the image bellow. (To use current theme again click the “NEW” button next to website logo.)

Click the image to switch the theme

Enjoy the new design as much as I do!

Sex, drugs and rock’n'roll. And money. ;) And the music I like to listen, to play, to compose and to record. About my tips and tricks for home music production (mostly for Cakewalks Sonar DAW software) and what free plugins to use and how to use them.

I also came across quite a mountain of software in last 4 years of intensive internet browsing. I found out that not all good software is commercial and there is a lot of great free replacements. And to my surprise, not many people use them and rather buy some bullshit instead of using (better) free solution.

The Design category of this site is about my webdesign experiences and some beautifying contributions to the world of Linux.

The last category is pretty obvious. It’s about my life, observations, trips, funny and cool stuff and anything else that will come to my mind to give it out to the wild.

Let’s have a look at Lemmonaid from a bit more surgical point of view…

WordPress

First idea of building the site out of crumbs of code I left behind from previous times was …just an idea. It would take long time and I needed some quick and reliable solution that would allow me to create a place with functionality and design I like. So first step was to choose the right CMS for the task. I have experiences with Textpattern and Joomla from the past but none of them made huge impression on me.

Obviously, I came along “the mighty two” – WordPress and Drupal. When I checked them both, Drupal seems to be more complex and complicated and honestly I don’t really like the administrator section look. But although I liked the WordPress’ simplicity and beauty there was still the prejudice “it’s just a blog engine”. Until I saw the work of guys from digitalnature who also created beautiful WordPress theme called Fusion. These guys made me believe in WordPress ;)

Extensive use of JavaScript

Yes, that’s true, and in modern web pretty common also, this website is using JavaScript quite a lot. Most of the effects here I created by myself as I couldn’t find appropriate free replacements that would look and act as cool as mine ;).

Lemmon's Lemmonbox effect

And what about CSS?

CSS is one of the things I can’t live without (greetings to Nataly and my guitars if they’re reading ;)). This little thing uses some CSS 3 styling so please, don’t validate it for 2.1! It is working without JavaScript quite happily too thanks to Cascading Style Sheets but when these two goes hand-in-hand, everything just shines.

As I’m talking about validation, I like to keep my web creations always valid with W3C standards. That assures some kind of quality. Although I if somebody of you spots some invalid spot let me know!

Thank you for reading the first post of Lemmon’s Lemmonaid and I invite you to come back for more and better stuff soon!