How to create a custom layout for category pages in WordPress

Travelify
1

Hello!
I am trying to add a custom layout for a category page showing all posts within this category.
Therefore I copied the archive.php and copied it as category-X.php (X=ID) into the same folder. I already made a basic echo and it did work.
But now I want to change the layout because I need a design whith three columns showing the posts with the image in some rows than.
But I do not know where the html-tags are created. I searched for travelify_main_container in functions.php but did not find.
Can you please tell me where I can find the relevant source code?
Thanks in advance!

2

Peet,

It’s very cool that you are doing some extra modifications for this theme.

Main loops and functions including ones for archive are inside content-extensions.php. You will be able to find this file in theme folder → library → structure.

Your mentioned travelify_main_container is also there.

Happy coding! :slight_smile:

3

Aigars, today I tried your advice and now have some new problems. I did find the code in the file so here was my first idea:

  1. In the category-X.php file is a call: do_action( ‘travelify_main_container’ );
    I wanted to change this action to do_action( ‘travelify_main_container_X’ );
    Then I would need to define an own function travelify_content() in the content-extensions.php. Is this correct? But within this function I am not able to figure out where the call for the loop is and how to change this. Actually I only would need to say “Please call travelify_theloop_for_my_own_category.” It seems that the function
    travelify_the_loop is executed on every page, although I do not know where the call is in the code. But this leads me to the …
    Second idea:
    I modified function travelify_theloop() and added elseif( is_category( ‘technik’ ) ) {
    travelify_theloop_for_category_technik(); as the last elseif statement before “else {

travelify_theloop_for_archive();
}”

Then I copied the travelify_theloop_for_archive() function and named it as I require it in my elseif statement (…_category_technik()). I made a basic change in the function’s source code and added some static text to it and it did not show up.
The content-extensions.php file is located in my child-theme folder -> library -> structure, exactly how it is in the parent theme. When I copy my modified functions to the original content-extensions.php of the parent-theme it shows up as I want to.
So here are my open questions :slight_smile:

  1. Is my folder structure correct and it should overwrite the content-extensions.php?
  2. If yes, will it only overwrite the modified functions and use the rest of the functions from the original file or will it overwrite the whole file?
    Following this link (http://codex.wordpress.org/Child_Themes#Template_Files) it should overwrite the whole file but it does not overwrite anything.
  3. From my understanding using the second idea I would not need the category-X.php file anymore. Therefore I think that this is not the finest solution.!?

I’d like to have a clean solution which ensures to get updates of your great theme but also that my modifications are not overwritten.

I would really appreciate your help!

4

Unfortunately, WordPress Child Theme does not overwrite files that are not default WordPress theme files such as archive.php, index.php, page.php etc.

Still you might try to create a workaround.

Personally I would overwrite archive.php by creating a new file and placing it inside Child Theme and taking a part of code from content-extensions.php. From function travelify_theloop_for_archive to be more exact. You don’t need an actual function but but just content that starts with section.

Additionally you might want to include part from travelify_content so sidebar could be displayed in the right side.

For your custom archive-x.php you can just adjust this example. At least now this part of theme will function like regular WordPress themes.

Furthermore you can target any category page via CSS without modifying the PHP code, of course, unless you are looking for some drastic changes.

WordPress prints category names and their ID so you can target them like

.category-6 .entry-title {
    color: #fff;
}

Just add categories div name at front of any element and you can start customizing.

Hope this helps a bit.