Use a DIVI built layout for Category page
Would you like to use the DIVI Builder to create a layout for your Categories pages ?
Let’s go to the DIVI Library and let’s add a new MODEL.
You must select “LAYOUT” when creating your new model (otherwise it won’t work well)
You can add anything you want in your layout, but don’t forget that you must insert a blog module targetting only the category you’re working on, if you don’t the posts won’t appear on your archive page (we are going to remove all content but the header, this layout and the footer)
For instance, here is the layout i use for my “Tutoriels” category page (You can’t see this page in english version, but iuf you want a demo for this tutorial, here is a link to the french “Tutoriels” archive page)
— IMPORTANT UPDATE !!! March 14th 2017 —
The following of my post is about adding a given php template for each category you have in your blog.
But Pierre Sudarovich just made things easier than ever by creating an automatic category template, that will get your category model right from divi library.
So i let my code in place for record but i encourage everyone to follow this NEW WAY TO USE A LAYOUT FOR CATEGORY
(Don’t be afraid, the post is in french at the beggining but english translation follows in the second part of his post)
Just download Pierre Sudarovich ‘category.php’ file and name your DIVI library category layout using the category slug.
For instance, if you have a category named cars, just save your divi library layout with the name of “category cars” and you’re done…
Have fun !
— The following is for record purpose , you have no more reason to use that 🙂 —
Let’s have a look at the address bar and note the layout number (url is showing post=XXXX where XXXX is the number you’ll use to call your layout. (here 198)
Next, open your usual text editor and type the following PHP code :
<?php
get_header();
echo do_shortcode('[et_pb_section global_module="xxxx"][/et_pb_section]');
get_footer();
?>
Don’t forget to replace XXXX with your post number.
Save file using the following structure : “category-YOURCATEGORY.php”
So if your category is “automotive” you’ll save “category-automotive.php”
Put this file inside your child theme folder and… Yes it’s a short tuto and everyone that was wondering how to have a nice looking category page should like it.
Feel free to ask if you need further explanation.
Hi,
I don’t know why it is not working on my side.
I followed the instruction already.
on my site, the category should have the same layout as the blog page that I created inside DIVI which uses blog module.
So, When I followed your instruction, what I did is I added the whole layout from the blog page to the library. And when I added new Layout as per your instruction added those blog page Layout.
Note: I downloaded the category.php and I didn’t change anything there.
This is what it should look like: https://wordpress-88301-890199.cloudwaysapps.com/payroll-blog/
this is the category page: https://wordpress-88301-890199.cloudwaysapps.com/category/payroll-blog/
Hi, if you talk about category.php, then you followed the tutorial from tips02, you should ask him directly 🙂
Hello Fabrice,
thank you for your sharing. it’s very helpful!
i did your suggestion ” NEW WAY TO USE A LAYOUT FOR CATEGORY” from Pierre method, but i had a problem.
then i tried to use your method and face the similar problem.
the problem happens when the category and post are both fullwidth layout.
the image on fullwidth header/post title/ image is blank on category page or single post.
the blog module on category page without problem. only the problem when i am using fullwidth header/post title/image on category page and it can’t show the full width image. the image is blank.
do you have any idea to solve this problem?
does others has the same problem?
any solution will be appreciated.
btw, Happy New Year 🙂
Hi, answered you by mail. I think there is a problem with your fullwidth header as category and single post use different templates to be displayed.
Dear Fabrice,
thank you for quick reply.
after seeing your reply, i am trying to change the theme settings to see any improvement.
surprising to me that after i enable the “Output Styles Inline” (Divi Theme Options -> Builder -> Static CSS File Generation), the fullwidth image on the category page and posts shows up. it shows exactly what i design. here is the theme seeings: https://www.screencast.com/t/Kbq29iw8Kbw
i don’t know why but it does work for my website. the problem is solved.
thank you so much for your kindly instruction. 🙂 🙂
HI,
I am using your solution to create custom layouts for my blog category pages. But do you know how I can add pagination at the bottom, as I am using a several blog modules and the offsetting the post that is displayed. So when I add ‘Pagination’ to the last mdule it only displays within that module, not across the bottom of the page.
This is layout: https://screencast.com/t/6U3SasKi
Hi, sorry for the delay for answering, and sorry to answer that i haven’t got a solution for that. Maybe something custom but i haven’t time to investigate right now.
I was hoping this was going to work for my CPT but the only category options to select are from the the default post categories not my CPT categories 🙁 I’ve tried so many ‘solutions’ for this and can’t get anything to work.
Yes, in order to select the CPT categories, you need a specific query so it won’t work with the default blog module. But it’s something possible, i’ve done it several times. If i find time, i’ll try to make a tutorial about that.
this seems to work fine, however all of a sudden i have a 6 column width page
is there a way to make this the regular 3 column width page
I don’t see what happens to you, can you share a screen capture ? How did you set up your blog module, grid mode ?
contact@creaweb2b.com
soory my bad is was a pluggin messing it up
I am planning to customize the Category page as suggested by you But I am not getting the blog module as you have suggested. All I am getting is the full width modules which lack the blog module. Please suggest.
You need to add a blog module to your divi builder designed category layout
Thanks for the hack and link to the other version. I ended up having to use yours because, for some reason, the blog slider module wouldn’t work correctly with the other one.
Thanks for feedback. Please can you give more advice on your issue with post slider ?
Hi Fabrice :)!
Starting from your code, I wanted to simplify and optimize the method allowing the customization of the page “Category”. The result can be consulted on my website 😉 (I couldn’t add a link).
By using my downloadable file, you no longer need to create as many “category” files as you need. Simply create your templates in the Divi library by taking care to precede the name of your template for a category given by “Category”. Example: “Category Test” and the created model will be applied for the category ;).
Sorry for the “duplicate” comment ;).
Amicably,
Pierre.
Wow Pierre ! This is so easy to use and so useful. Thanks a lot, i’ll link your blog inside this post. My way to do it is now totally “obsolète” 🙂
Could you please share the link ?
Hi Salma, the tutorial has been updated including the link toward Pierre’s way to do it. The link is “new way…” but i share it here for you : https://www.tips02.fr/backstage/personnaliser-facilement-votre-page-categorie-customize-easily-you-category-page/
Thanks for the tutorial! I am having some trouble though. here is my code:
and this is the error message:
Parse error: syntax error, unexpected ‘get_footer’ (T_STRING), expecting ‘,’ or ‘;’ in /home/taoashza/public_html/cadev/wp-content/themes/Consciously-Awesome-Child-Theme/category-brilliant-relationships.php on line 3
I dont know php. Can you help?
Hi Zac, you can’t post code here. Please send code on the following mail : contact@creaweb2b.com but you can check if quotes are ok. Sometimes when you copy/paste code, quotes are replaced with fancy quotes and it doesn’t work.
Email sent. Thanks a lot for checking this out.
Great tutorial, thank you. I have a question though. Is it possible to create this with a speciality section so I can place a custom sidebar (DIVI 3.0 Custom Sidebar Widget) It would be nice to show a category specific sidebar along side the archive list. For example I could put a related categories list or a catagory specific search box within each category layout – these would be determined by different sidebars created in the appearance > widgets area using Divi 3.0?
Your thoughts on this would be highly valued.
Never tested it but i think you can use a speciality section inside the layout you build for a given category.
Thank you so much for sharing this tutorial. It works on our site however, I got a problem with the page navigation. When I click to view the previous it shows error not found..
I have created category-free-funeral-resources.php
my category name is Free Funeral Resources
Do you know why it is not working?
I already saw that issue happening and just made some tries to make it appear again. There is something wrong with post count and pagination i guess. I just figured out that if you want to show 4 posts per page and you have a total post number of 8 in that category, it will create a wrong link to a 3 page. if you change post per page setting to 5, the error won’t show. All this need further research on the pagination count of posts.
Très bon tuto, merci.
Néanmoins si la structure des permaliens pour le “Préfixe des catégories” est modifiée par “.” afin de ne pas avoir de préfixe, votre astuce ne fonctionne plus…
Des idées ?
Sans le préfixe, la page de catégorie n’est pas retrouvée parle biais habituel de la hiérarchie des template wordpress. Cela me retourne “aucun résultat” même sans utiliser ma méthode, avez vous déjà obtenu un résultat positif sans préciser de préfixe ?
En fait cela fonctionne, il faut juste modifier aussi la structure des permaliens. Il faut utiliser la structure personnalisée et /%category%/%postname%/
Très bien merci pour votre réponse. J’avais en effet aussi une erreur 404. Je veux garder mon réglage des permaliens en “Nom de l’article”, donc je vais mettre un Préfixe pour mes catégories.
Pour résumé, c’est dommage que cela ne soit pas possible lorsque :
Réglages des permaliens = Nom de l’article
Préfixe des catégories = .
Effectivement, en supprimant le suffixe et en réglant les permaliens en conséquence au final on rajoute un niveau à l’url d’accès aux articles, ce qui n’est pas très logique 🙂
Je viens de trouver une alternative qui fonctionne. Si vous utilisez le plugin Yoast SEO, dans les réglages avancés–>permaliens, vous pouvez supprimer la base de la catégorie (premier réglage) et de ce fait supprimer le préfixe, conserver vos permaliens et utiliser ma méthode.
Einen wunderschönen “Guten Abend” Christian.
Mein falscher Post hat mich veranlasst, Dein Tutorial zu genießen. Werde es gleich mit in meine Sammlung nehmen.
Unbezahlbar solche Tipps, wenn man php nicht kann. Ich muss immer wieder feststellen:”Ich liebe Divi und seine tolle Community”. Danke für das Tut.
Bernd
Beautiful Fabrice, Bravo
Thanks so much for this tutorial. I know you mentioned it was “short” but it’s a perfect length, for a problem so many of us have.
I’m also trying to create something similar for project categories. I’ve created a layout with the filterable portfolio full width module. Then, created a php file named:
project_category-paintings.php
I’m sure I’m missing something super obvious – but I suppose it’s also possible that this won’t work for projects the same way it works for blog categories.
If you can spot my error, let me know? Thanks again!
Thank you so f*cking much for this!
You have no idea how long I’ve been looking for this! I’ve gone through the Elegant Themes forum and Google this and all the explanations I found were either too complicated and required medium to advanced coding knowledge or didn’t solve the problem at all.
Your tutorial was straight to the point. Simple and easy to execute. Thanks again!
Great ! Thank you!
It works for tags page as well. Simply create a tag.php file in the child theme folder and paste in the same kind of code with the Divi model number… 🙂
I suppose we can use one Divi model for multiple category-XXXX.php files. Correct? (if we activate all the categories in the Divi Blog module of the global model. I’ll give it a try)
Thanks, yes it works for all kind of templates, i used a shortcode inside 404 page, archive page…
To use only one template for all categories, you can just add category.php to your child theme and set up a blog module inside without selectinc any category. it should work but i didn’t gave it a try.
About using it as a base for all categories, it didn’t work. Instead of displaying the posts for a selected category, it displays the most recent posts.
Hi, it is dont work for my category pages. Modules shows only for post or pages but not for category or archive pages.
Only fullwidth white spasce shown. Also divi fonts not showing for archive pages.
Must be something wrong in way you do it, it worked right for everybody.
Do you add some global modules (sections or anything else) inside the layout you build to use inside wategory page ?
Can you share a screen capture of builder side and code (with category.php name of file) to see what can be wrong ?
I send to you message with links to screenshots from contact form on your contact page.
Just sent you a reply. Your code isn’t good and layout isn’t good. You need to insert the shortcode given in tutorial and you need to use the blog module in order to display category related posts.
Bonjour Fabrice,
Merci pour ce tuto !
J’arrive à créer mes différentes pages de catégories et j’ai bien accès au Builder de DIVI sur ces pages,
cependant toutes les pages d’Archives ainsi créées ne se comportent pas de la même façon qu’une page basique DIVI…
Quand j’utilise le module “blog” dans une page d’Archive, toutes les colonnes sont divisées par 2.
Mes articles qui s’affichaient sur 3 colonnes sur une page “classique”, s’affichent maintenant en 6 colonnes sur une page d’Archives.
Comment faire pour conserver le même nombre de colonnes avec les pages d’archive ?
Merci !
Bonjour, il n’y a pas de raison pour que cela se comporte différemment, cela peut venir d’un réglage ou d’une règle CSS personnalisée. Difficile de voir ce qui ne va pas sans avoir un lien ou une capture d’écran “vue builder” pour essayer de comprendre ce qui ne va pas. Le réglage de la largeur de ligne peut aussi affecter le nombre d’articles affichés sur une même ligne.
Bonjour Fabrice,
J’ai tout installé sur mon site et cela fonctionne très bien, sous Chrome. Si je passe à Firefox, Opera ou Internet Explorer, la page reste blanche, mais les articles sont bien là. Il est possible de scroller la page et en cliquant on arrive directement aux articles.
Je n’arrive pas à trouver d’où cela provient.
Merci de votre aide.
Répondu par mail
En parcourant votre site, j’ai trouvé une opacité réglée à 0 dans le CSS. En la mettant à 1 les articles s’affichent :
.js .et_pb_blog_grid[data-columns] .et_pb_post {
opacity: 1;
}
Best solution so far that does not need plugins… still i want to edit the page in category, not in layout.
Help me. For my blog, this solution doesn’t work.
1. I create new template as layot and global model
2. I make the blog in template
3. I write the number of template
4. I create a new page php with the following code:
5. I save this file as category-slug
BUT NOTHING!
My category template there isn’t… the page is white!
Hi, what is the name of your category and what is the exact name given to your template ? Where do you save the file ? Did you put it inside child theme folder ? Feel free to send the code using contact@www.creaweb2b.com, as it won’t appear in comments.
Bonjour,
J’ai utilisé votre exemple pour mes pages Catégories, cela fonctionne très bien.
Toutefois, je souhaiterai insérer automatiquement le nom de la catégorie avant l’affichage de vignettes.
Le tutoriel existe aussi en français 🙂 Ce que je fais c’est utiliser un module texte avant le module blog pour insérer un titre spécifique pour la catégorie. Je ne sais pas si c’est ce que vous souhaitez faire.
En fait je n’avais pas tout lu correctement 😉 maintenant j’ai compris. Merci
C’est bon j’ai compris pourquoi ça ne fonctionnait pas. C’est parce que j’avais mis plusieurs sections dans mon layout.
ça ne fonctionne que s’il y a une seule section.
Effectivement, comme on ouvre une balise de section avec le shortcode, et que quand il y a plusieurs sections ça en ouvre d’autres, ça doit perturber le fonctionnement. Une solution c’est d’ajouter autant de sections que nécessaire sur plusieurs lignes successives (je pense par exemple à une section pour le menu pleine largeur, et une autre section pour le reste)
Ah oui en rajoutant les numéros de section dans la page php. J’essaierai ça.
Est-il possible d’appliquer un layout défini aux pages de résultat du champ de recherche ?
Quand on recherche un terme, on se retrouve avec la mise en page de base avec la sidebar à droite.
Merci pour vos réponses en tous cas !
Bonjour,
dans la mise en page de mes pages catégories, tout en haut j’ai mis une image fullwidth avec un logo
j’ai ensuite rajouté les sections que je souhaitais.
Le code de ma page php est comme ça :
le problème c’est que la barre de menu est derrière l’image qui est tout en haut. Je n’arrive pas à refaire passer devant mon menu.
Si j’enlève la section avec l’image on revoit bien le menu…
Sauriez-vous s’il est possible de refaire passer la barre de menu par dessus ?
Merci d’avance !
Je dirais que le problème peut venir d’un z-index plus fort sur l’image que sur le menu. Avez vous un lien pour tester en live ?
Non je suis en local pour le moment.
Oui j’avais essayé au z-index, mais ça ne change rien…
en changeant la position en absolute ça donne quoi (quitte à jouer sur les marges ensuite) ?
modifier la valeur de display aussi peut jouer (par exemple tester avec block si c’est inline)
Ce n’est pas évident sans voir la structure dans le code source (position des div les unes par rapport aux autres)
Bonjour,
j’ai refait mon layout à partir de zéro et le menu apparait maintenant. Je n’ai rien changé de spécial pourtant, mais ça re-fonctionne. Merci pour votre aide en tous cas !
Au fait j’ai refait pas mal de tests et cela fonctionne même avec plusieurs sections. Avez-vous utilisé “Disposition” comme type de modèle au moment de la création ?
Bonjour,
merci pour votre tuto. Cependant ça ne fonctionne pas chez moi. Quand je clique sur une catégorie j’ai toujours la mise en page de base de Divi.
J’ai prévu d’avoir une dizaine de catégories pour les articles de mon blog.
Faut-il faire autant de layout divi et de pages php avec le shortcode qu’il y a de catégories ?
Je ne comprends pas comment on lie la catégorie des articles sur le site à cette page php…
Merci d’avance pour votre aide.
Bonjour,
il faut créer autant de template php qu’il y aura de catégories. Les pages doivent porter un nom dont la structure contient le mot “category” ce qui donnera
category-nomdelacategorie.php
où il faudra remplacer nomdelacategorie par votre catégorie.
Il faut placer les modèles de pages de catégories ainsi créées dans le dossier de votre thème enfant.
Pas de raison que cela ne fonctionne pas.
Merci pour votre réponse.
J’ai fait le test avec une nouvelle catégorie nommée “essai” et il y a du mieux, je n’ai plus la mise en page de base de Divi mais uniquement la dernière section du layout que j’ai fait.
Par contre il manque tout le reste. J’ai pourtant suivi le tuto à la lettre…
Mon layout php se nomme “category-essai.php” et j’ai bien le # du layout inséré dedans.
Le layout est il stocké dans la bibliothèque DIVI ? Le #doit être celui issu de la bibliothèque divi, pas le numéro d’une page dans le builder.
Mes pages de catégories sur ce site sont construites avec cette méthode, avez vous inséré un module blog ?
Bonjour,
oui j’ai refait tout le process ce matin avec un nouveau layout, une nouvelle catégorie et c’est la même chose, quand je vais sur cette catégorie, je n’ai que la dernière section de mon layout qui s’affiche…
Mon layout est bien stocké dans la bibliothèque Divi et j’ai bien pris le numéro qui s’affiche quand je suis dans la bibliothèque.
Mon layout est comme ça :
[url=http://www.servimg.com/view/18951804/416][img]http://i97.servimg.com/u/f97/18/95/18/04/layout10.jpg[/img][/url]
il n’y a que la partie verte qui s’affiche quand je vais sur la catégorie concernée.
Je travaille avec Divi 3 pour info.
Nice! Is this working for single posts? Also any way to place Monarch social sharing icons by this way? Or get php code for it?
What do you want to achieve with single post ? Single post is created via DIVI builder. If you want to add something specific to single post template, maybe you should look my other tutorial (insert DIVI section anywhere.)
To customize single posts template, let’s copy single.php from DIVI folder to child theme folder and edit it from there.
Hi nice tutorial. Thanks a lot for sharing this one. BTN I want to know how to make this trick working in custom taxonomies ( created from custom post )
Hi, you can do the same for custom post. Posts uses the template single.php, so instead of naming your page category-YOURCATEGORY.php, you’ll have to copy single.php from DIVI folder, and then save the template for your custom post like the following :
single-TYPEOFCUSTOMPOST.php
For instance if your custom post is “recipe”, the template will be single-recipe.php
Hope it’s clear enough 🙂
It not work but I use the code below and it work. Don’t know how different. But the code below include itself
You mean it doesn’t work for search page ? It’s quite different as search or date archive page needs to use the main wp loop to display posts so theses needs to be customized in a different way. But for Categories pages, this trick will do it. Just have to add a blog module and select the category to display inside blog module settings. And next add the shortcode to category-yourcategory.php template like in the tuto.
HI Fabrice,
Do you have an idea on how to do the same thing for the search result ? I would like to apply my category layout to the search result too…
Thanks !
Hi Emilie, in order to add a custom search page, you need to copy the file “index.php” from divi folder and paste it inside your child theme folder. Next rename it “search.php“.
Then you can add a custom section using the do_shortcode method (explained in another tutorial) or you can change the html inside search.php to add a title. On this website, i did this, just added an h2 tag right after the div “content-area” to dispay a sentence related to search, but if i find a little time, i will had a custom section like all other pages using the shortcode method.