Author: akira.maria.yosina
-
WordPress #13: Add Social Media Icon on Footer’s Menu
On WordPress, go to Plugins >> Add New, search for “WP Menu Icons” >> install and activate Plugin. Go to Appearance >> Menus Choose one font/ icon type >> Save. Append Custom Links >> Add URL and Link Text. After added, click the plus ‘+’ sign >> Search for “Instagram” >>
-
WordPress #12: Reorder the WordPress Posts
By default, WordPress posts are sort by the latest posted date. Edit the post >> Edit Publish time,
-
WordPress #11: Set up 3 column footer
Following up from WordPress #4: Create a constant footer on every page on WordPress, add new menu. Appearance >> Menus >> Create a new menu. Repeat 3x because 3 columns. On functions.php add the following, After creating the menus, Manage Locations >> select the relevant one >> Save Changes. Go to Menu Structure tab >>…
-
CSS #2: Adding Shadows and Borders to Cards
To add shadows, add this to the CSS, To round borders, add this to the CSS, But because of the thumbnail image, the top of the box is not rounded. To round only the top of the image, add this to the CSS, References: https://www.w3schools.com/css/css3_shadows_box.asp https://www.w3schools.com/css/css3_borders.asp
-
WordPress #10: Show Instagram Feed (TBD)
On WordPress, add new plugin ‘Smash Balloon Social Photo Feed’ After installed, on the WordPress dashboard, on the menu on the left, select ”Instagram Feed” > All Feeds Add New > Next > Add Source > Login with Instagram. Bug: photos are not displayed in local. References: https://wpprotools.io/plugins/instagram-feed/
-
WordPress #9: Show Top Posts
On WordPress, install plugin “WordPress Popular Posts”. On the code, Go visit a few posts to add view count. If there’s no view, it will show “Sorry. No data so far”. References: https://cabrerahector.com/wordpress/how-to-make-a-grid-of-popular-posts-with-thumbnails/
-
CSS #1
These are the CSS notes I need to make in the process of building the page. How to divide the page into two using Bootstrap, How to remove bullets from wp_list_categories(), How to adjust text alignment when the window is resized (buggy), How to add borders between <li>, How to remove the last bottom-border, How…
-
WordPress #8: Display List of Categories Based on Labeled Posts (TBD)
Code On blog.php add, To remove ‘Categories’ title, add this CSS, To remove bulletpoints, add this CSS,
-
WordPress #7: Change ‘Read More’ button style on Content Views Plugin
After applying WordPress #6, the green button can be changed through CSS. On WordPress On the left menu >> Content Views >> Display Settings >> Scroll to ‘Read More text’ >> Click ‘Please check this document’. On Code Copy the instruction CSS to single.php or to blog.php (depending on which page). For example, Outcome