Changing the layout of the blogs homepage to be squared and have author

I really like this design
https://www.opportunity-china.com/living-in-china/

It looks more mobile and user friendly for finding things.

Is there a way to make the blogs page appear like this. Currently mine looks like this

I would also like to acknowledge the author in the article by having an author section by clicking the person writing it from below the article

Hello there,

Do you use a special plugin that the posts squared? Doesn’t it have an option to show the post’s author link?

Regards,
Kharis

hi,

I don’t use any plugin to make mine look like app squares as it currently is not. it is just a list. It is nice but takes up a bit too much space.

Should i use a plugin to make it squares? like the linked website

@kharisblank
Is it possible to have an update?

I don’t use a plugin. It’s the basic sydney pro theme and the basic blog layout that comes with it. So I would like to change it to that link i gave design https://www.opportunity-china.com/living-in-china/

Hello there,

Add the post’s author link on the post meta section is quite a complex task to do. You have to edit the main theme’s file, content-classic-alt.php, with a child theme.

  1. Download our child theme for Sydney Pro if aren’t running any.
  2. In the child theme’s folder, pick and edit the functions.php file with your code editor program. Add this function to the most bottom line:
    function sydney_pro_child_post_date() {
    	$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
    	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
    		$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
    	}
    	$time_string = sprintf( $time_string,
    		esc_attr( get_the_date( 'c' ) ),
    		esc_html( get_the_date() ),
    		esc_attr( get_the_modified_date( 'c' ) ),
    		esc_html( get_the_modified_date() )
    	);
    	$posted_on = sprintf(
    		/* translators: %s: post date. */
    		esc_html_x( 'Posted on %s', 'post date', 'sydney' ),
    		'<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
    	);

    	$byline = sprintf(
    		_x( '%s', 'post author', 'sydney' ),
    		'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>'
    	);

    	echo '<span class="posted-on">' . $posted_on . '</span> <span class="posted-on byline">' . $byline . '</span>'; // WPCS: XSS OK.
    }
  1. Duplicate the content-classic-alt.php from main Sydney Pro theme’s folder to child theme folder.

  2. Edit this file (the one in your child theme’s folder), and find this line of code:

   <?php sydney_post_date(); ?>

Replace it with:

   <?php sydney_pro_child_post_date(); ?>
  1. Upload the child theme to your site’s wp-content > themes folder.
  2. Visit your site’s dashboard, and go to Appearance menu.
  3. Activate the new installed child theme. Before doing so, review this tutorial as you would do the same steps explained in there. In case you losse the settings in customzer. Adjust the folder names as mentioned in the 3rd step. The folder name must match.

Regards,
Kharis

hi kharis,

thank you, i think i am following but how do i do step 2. content-classic-alt.php from main Sydney Pro theme’s folder to child theme folder?

I see content-classic-alt.php in the sydney pro but not tin the child theme and see no option to add

Hello there,

You can manually copy that file and paste into your child theme’s folder. It is easier to do this locally in your computer. Just like rugular copying and pasting a file in your drive.

Regards,
Kharis

Hi,

This is my first time using a child folder (to be honest i don’t fully understand it),
how do I manually copy the content-classic-alt.php ? i see no copy option, i wouldn’t quite know how to do that correctly if there is way to save it to my computer

.owl-theme .owl-controls {
    margin-top: 0;
}

@kharisblank

Hi, just wondering if i should make a new separate question for how to do a child theme to come back to this or will you help here?

You should first copy the theme’s file into your drive. You can use FTP client program to download from your site. https://www.wpbeginner.com/glossary/ftp/.

Regards,
Kharis

I’m sorry but i am a little confused still.

I downloaded and installed sydney pro child. . I don’t get what you mean by number 2 “code editor program”. I have “snippets”?

Like this? i can’ find the way to download content-classic-alt.php yet.

apologies if this is simpler than i thought

could i have help still, please? thanks

do you have an update please?

@kharisblank