Recess Week Post – Report 7

Reading Professional WordPress

Chapter 6 Data Management

This chapter mainly introduces how WordPress organize data in tables (11 default tables) and the relationship between these tables.11 db tables

The content is helpful but some problem occurs when I want to try some queries on my local server. After I installed Bitnami I have checked PhpMyAdmin for many times but cannot find the database related to WordPress. I knew it was somewhere there otherwise the whole WordPress would not work.

phpmyadmin tables
Tables

Luck is finally with me this time when I found the reason in wp-config.php.

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'bitnami_wordpress');

/** MySQL database username */
define('DB_USER', 'bn_wordpress');

/** MySQL database password */
define('DB_PASSWORD', '081a0d8255');

/** MySQL hostname */
define('DB_HOST', '127.0.0.1:3306');

Before, I used the WordPress username (qibo0001) and password to login to the phpMyAdmin so that I was logged in as the administrator. But as defined in the code above, I should log in using the username bn_wordpress and password 081a0d8255. Then  I finally found the database bitnami_wordpress which consists of all the default tables mentioned above.

In phpMyAdmin I can make my own query directly on the WordPress database. I ran a query that gets all comments made by the logged-in user qibo0001 and got the following result. It’s always recommended to run queries on in phpMyAdmin first before moving the queries into code.

run query

Chapter 7 Plugin Development

In this chapter, it introduces about internationalization or so-called i18n first. it refers to the way WordPress wraps around the text using functions for translation purpose. It is widely used in theme and plugin development.

It then introduced hooks. Hook is an important concept in WordPress. As it is introduced in this chapter,

two types of hooks can be used: Actions and Filters. Action hooks are triggered by events in WordPress. For example, an Action hook is triggered when a new post is published. Filter hooks are used to modify WordPress content before saving it to the database or displaying it to the screen.

The critical and challenging part of developing plugin is to find the correct hook to use.

 

Configuration Of Live Server

Last week, we setup our live server and installed Bitnami on it. There was only one WordPress installed with Bitnami by default so that this week we installed another one on it. We found this topic on WordPress Forum which solved our problem and we followed the steps described in it.

Therefore, now we have two WordPress sites on live server. One is http://172.19.37.161/wordpress  (for me) and the other one is http://172.19.37.161/wordpress3 (for Cynthia). Each of them has its own database on the live server.

For database synchronization, I have tried Migrate DB on my local server and pushed my database onto the live server successfully. Because of that, the login username and password of my live WordPress site have also been changed to my local site ones.

Use DB Migrate Plugin to Push Content to Live Server
Use DB Migrate Plugin to Push Content to Live Server

 

Collaborative Project

Beverley gave us the design and the pictures on Monday then we decided to use Custom Page Template to realize this design.

custom page template

All files related to this design is included in our GitHub repository. Basically, we added two files to my theme, page-baverley.php and beverley-design.css, in the corresponding folders. We modified these two files so that the page layout is the same as Beverley’s design. However, we included the menu bar which is not in the design because that would facilitate navigation.

custom page template_edit page

Then we added a new page with the custom page template Page with Beverley Design. In the page, we included all the images.

We modified function.php file as well so that it will enqueue correct CSS file when the custom page template is chosen.

if(is_page_template('page-templates/page-beverley.php')){
    wp_enqueue_style(' first-try-layout-sidebar-content',get_template_directory_uri() .'/layouts/beverley-design.css');
}
else{
    wp_enqueue_style(' first-try-layout-sidebar-content',get_template_directory_uri() .'/layouts/sidebar-content.css');
}

All these were done locally. After we tested that everything was fine, we pushed it to the live server using both DB Migrate and remote control. The DB Migrate was to update the newly added page while remote control was to update theme folder and uploads folder.

The final result can be seen at http://172.19.37.161/wordpress/collaborative-project/. Through this simple project, I got more familiar with the development process that involves live server, the use of GitHub and various synchronization tools.

 

Infinite Scroll/Page

This website introduced the strength and weakness of infinite scroll thoroughly from which I summarized several points below.

The good side about infinite scroll is that it’s more efficient for users to get access to information because they don’t need to wait for the page to load, which is the case with pagination.

However, the bad side is that the infinite scroll basically never ends so it doesn’t reflect the actual amount of data available. Users may get lost about where they are and it’s hard for them to look for the same data again.

It’s always a good idea to implement some kind of the progress bar besides the content to indicate the position of users. In WordPress index page, we can build a monthly or yearly progress bar if the posts are ordered chronologically; or a-to-z progress bar if posts are ordered alphabetically.

html5-progress-bar

Implementation using Jetpack

Jetpack provides infinite scroll support and it’s easy to enable it. This documentation site illustrate how to do so.

infinite scroll activateBasically, after I activated the infinite scroll in Jetpack setting, I added the codes below in my function.php file.

add_theme_support( 'infinite-scroll', array(
   'type'           => 'scroll',
   'footer_widgets' => false,
   'container'      => 'primary',
   'wrapper'        => true,
   'render'         => false,
   'posts_per_page' => false,
) );

I set type to be scroll and footer_widgets to be false so that the footer widgets would never show up until all posts are loaded and scrolling will be used to method for loading new posts (the other way is to click on a show-more button).

Problem#1:  I used masonry to display footer widgets but it seems that some changes will be needed to make it compatible with the infinite scroll. After I loaded all the posts and reached the very bottom of the page, the footer widgets appeared but in a messy way.

masonry not right

I had calendar, tag clouds and search box in my footer widgets and they stacked on top of each other. When I checked them using inspect elements, they turned back to normal.  I haven’t figured out why yet, but I will be working on that later.

normal footer widget

Problem#2: Jetpack works locally on localhost/wordpress but doesn’t work on 127.0.0.1/wordpress.

127.0.0.1 jetpack
Jetpack on 127.0.0.1/wordpress

Same thing happens on the live server. Because our live server is within the firewall of university intranet, Jetpack on http://172.19.37.161/wordpress failed to work. However, when I remotely controlled the live server and go to localhost/wordpress on the live server, it works perfectly.

Infinite Scroll Works on Localhost of Live Server
Infinite Scroll Works on Localhost of Live Server Using Remote Control

Conclusion of Infinite Scroll

Infinite scroll can be implemented easily using Jetpack. It’s really a pity that the functions of Jetpack are restricted by the configuration of our live server. However, if we only want to test the infinite scroll we can always use the remote control to do it.

 

One comment on “Recess Week Post – Report 7

  1. Boyan, good work! Yes Jetpack doesn’t fully work on the localhost development server. There is information on line about this. Perhaps it might be better to work on infinite scroll without jetback, so you learn more fully the underlying code?

Leave a Reply