Menambahkan Custom Top Sidebar di Theme OceanWP

Oleh Uboiz -

OceanWP adalah salah satu theme dari Wordpress.

Karena tampilannya yang elegan, mudah dimodifikasi, bervariasi dan cocok untuk situs pendidikan, penulis seringkali menggunakan theme ini untuk membuat situs-situs instansi pendidikan yang meng-kontrak tenaga penulis.

Namun, mungkin untuk versi gratis, OceanWP tidak menyediakan sidebar pada bagian atasnya, yang seringkali berguna bagi penulis untuk menyematkan link-link yang penting, tetapi bukan untuk website itu sendiri.

Oleh karena itu, berikut ini adalah tutorial singkat, percobaan penulis menambahkan top sidebar untuk theme OceanWP.

Pertama, tambahkan kode di bawah ini ke file function.php, yang berada di folder /wp-content/themes/, letakkan di dalam fungsi register_sidebars().

// Top Sidebar by Uboiz.
register_sidebar(
	array(
		'name'          => esc_html__( 'Top Sidebar by Uboiz', 'oceanwp' ),
		'id'            => 'top-sidebar-uboiz',
		'description'   => esc_html__( 'Widgets in this area are used in the top of theme', 'oceanwp' ),
		'before_widget' => '<div id="top-sidebar-uboiz" class="top-sidebar-uboiz">',
		'after_widget'  => '</div>',
		//'before_title'  => '<' . $foo_heading . ' class="widget-title">',
		//'after_title'   => '</' . $foo_heading . '>',
	)
);

Selanjutnya, kedua, tambahkan kode berikut di file header yang juga berada di /wp-content/themes/, sebelum baris do_action( 'ocean_header' ).

<?php if ( is_active_sidebar( 'top-sidebar-uboiz' ) ) : ?>
	<?php dynamic_sidebar( 'top-sidebar-uboiz' ); ?>
<?php endif; ?>

Ketiga, tambahkan kode CSS berikut di menu Custom CSS pada Costumize Wordpress, pada menu Appearance-Customize-Custom CSS/JS.

#top-sidebar-uboiz{
	text-align:right;
	padding-right:10px;
	border-bottom: 1px solid #eee;
}

#top-sidebar-uboiz ul li a{
	padding: 2px;
	font-size: small;
	font-weight: bold;
}

#top-sidebar-uboiz ul li a:hover{
	text-decoration:underline;
}

Keempat, buatlah contoh menu yang berisi link-link pada menu Appearance-Menus-create a new menu, yang akan disematkan pada sidebar.

Kelima, buka menu Widget Wordpress, masukkan menu tersebut ke widget Top Sidebar yang dibuat.

Reload halaman Wordpress, jika langkah-langkah yang dilakukan sudah benar, maka menu contoh akan tampil di bagian atas theme.

Perlu diingat, kode-kode yang disematkan pada file function.php dan header.php di atas, akan hilang, jika theme OceanWP diperbaharui/diupgrade.

Komentar

Posting Komentar



Postingan populer dari blog ini

Kumpulan Source Code Greenfoot

Oleh Uboiz -
Gambar
Overview Greenfoot adalah aplikasi berbasis Java yang cocok untuk pemula yang sedang belajar OOP Java. Dukungan image processing 2D dapat menjadi satu daya tarik utama penggunaan aplikasi ini. Sehingga selain gratis, dengan Greenfoot anda akan dapat belajar membuat algorithma pembuatan game, terutama yang berbasis game 2D. Greenfoot Sourcecode Collection adalah kumpulan source code Greenfoot yang terdiri dari 36 skenario. Beberapa scenario menunjukkan tentang bagaimana cara memvisualisasikan contoh-contoh bidang kefisikaan, seperti revolusi bulan, gravitasi, pendulum dan sebagainya. Selain itu beberapa contoh juga mengambil tujuan bagaimana cara membuat animasi 2D dengan lebih banyak menulis program, dibanding pengolahan gambar menggunakan software image processing seperti Corel Draw atau Photoshop. Dengan mempelajari source code ini diharapkan anda dapat menguasai dasar bagaimana melakukan atau menerapkan algorithma dalam bentuk kode program untuk pembuatan game 2D d
Baca selengkapnya

Game TicTacToe dengan Greenfoot

Oleh Uboiz -
Gambar
Game Tic Tac Toe, meskipun termasuk game yang sederhanya, ternyata sulit juga untuk membuatnya. Terutama untuk memasukkan Artificial Intelligence (AI) sebagai musuh pemain. Penulis sebenarnya telah mencoba mengimplementasikan algorithma game Tic Tac Toe dengan HTML5 Canvas pada posting sebelumnya, namun disini penulis mencoba menulis ulang dengan Greenfoot, dan melakukan efisiensi penulisan kode program. Awalnya, sesuai gambar diatas dan dalam video dibawah ini, penulis membuatnya dengan Greenfoot versi 3.x, namun karena terlalu memakan banyak memori, penulis ubah ke Greenfoot versi lebih awal, yaitu Greenfoot 2.x. Sedangkan untuk kode nya dapat di download dengan link dibawah ini: Download TicTacToe.gfar Ide AI-nya cukup sederhana, yaitu komputer mencoba bertahan, dengan mencari posisi pemain dimana paling berpotensi menang, baru kemudian mencari posisi untuk dirinya sendiri untuk menang. Untuk game versi Android-nya dapat dicoba di link dibawah ini
Baca selengkapnya

Honeycomb Style Wallpaper dengan HTML5 Canvas

Oleh Uboiz -
Gambar
Bentuk hexagon merupakan bentuk yang menarik dan identik dengan bentuk sarang lebah madu (Honeycomb). Gambar di atas adalah gambar hasil generate bentuk hexagon, yang disusun sesuai urutan, dengan lebar dan jarak tertentu, menggunakan HTML5 Canvas. Dengan menambahkan efek warna gradient hijau pada background dan shadow pada masing-masing bentuk hexagonnya, dapat menambahkan efek futuristik dan elegan sebagai wallpaper dekstop, smartphone, tablet atau semacamnya. Berikut kode HTML5 Canvasnya: <html> <head> <title>Honeycomb Shape</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var points=[]; var ctx = canvas.getContext( "2d" ); var grd = ctx.createRadialGradient(0.5*canvas.width,0.5*canvas.height,0,0.5*canvas.width,0.5*canvas.height,360); grd.addColorStop(0
Baca selengkapnya

Cara Menentukan Arah Kiblat Menggunakan Google Maps

Oleh Uboiz -
Gambar
Menentukan arah kiblat sholat bagi kaum muslim dapat dilakukan dengan menggunakan bantuan Google Maps, syaratnya adalah gadget smartphone yang digunakan harus memiliki sensor kompas dan GPS. Sedangkan untuk Sensor GPS biasanya sudah menjadi fitur wajib yang dimiliki oleh setiap smartphone, namun untuk sensor kompas tidak semua smartphone dilengkapi dengan sensor tersebut. Sehingga metode penentuan arah kiblat pada artikel ini hanya dapat dicoba dengan smartphone yang memiliki sensor-sensor di atas. Kemudian dari segi OS (Operating System), smartphone yang diperlukan adalah yang asalkan dapat menjalankan Google Maps.  Saat ini Google Maps dapat dijalankan pada berbagai OS smartphone termasuk di laptop atau notebook. Sehingga tutorial ini dapat dicoba juga di gadget laptop yang dilengkapi dengan kedua sensor di atas. Konsep dasar menentukan arah kiblat, adalah mencari arah posisi Kabah terhadap posisi gadget. Langkah pertama adalah menentukan posisi gadget di Google Maps. Jika s
Baca selengkapnya

Cara Membuat Halaman HTML Sederhana

Oleh Uboiz -
Gambar
Membuat halaman website sebenarnya tidaklah sulit. Yang diperlukan hanyalah mencoba. Tulisan berikut ini adalah berdasarkan pengalaman penulis, tutorial cepat bagaimana membuat halaman HTML untuk membangun sebuah website sederhana. Perlu diketahui, bahasa pemrograman dasar dari tampilan website adalah HTML, dan saat tulisan ini ditulis, bahasa HTML telah mencapai versi HTML5. Setiap halaman website sebenarnya ditulis dalam bentuk bahasa ini, dan web browserlah yang bertugas untuk merender dari kode HTML tersebut, agar halaman website tidak tampil berupa kode-kode program saja, melainkan dengan tampilan yang dapat dimengerti dengan mudah oleh mata manusia. Alat yang diperlukan untuk membuat halaman HTML adalah text editor seperti Notepad. Jika diperlukan, dapat digunakan aplikasi Notepad++, untuk mempermudah mengenali tag-tag HTML. Dengan Notepad++ ini pula, akan dapat dengan mudah mengatur indentasi, bagi programer yang membutuhkan kerapian. Membuat Halaman HTML Membuat
Baca selengkapnya

Ganti Kartu ATM BNI yang Rusak

Oleh Uboiz -
Gambar
Pada Senin, 2 Maret 2020, akibat tergores kunci sepeda motor, ATM BNI (Automated Teller Machine Bank Negara Indonesia) penulis rusak sebagaimana terlihat gambar di atas. Maka pada hari Selasa, keesokan hari, penulis mencoba ke bank untuk mencari solusi. Sayangnya, hari itu penulis lupa membawa buku tabungan. Sebab menurut satpam yang bertugas, untuk ganti kartu ATM, penulis harus membawa buku tabungan. Hari Rabunya, penulis kembali ke bank dan seorang Customer Service (CS) membantu mengganti kartu penulis. Setelah dilakukan verifikasi data dengan menanyakan data-data terkait pemilik kartu, penulis mengisi lembar dokumen, dan membayar biaya administrasi sebesar 20 ribu rupiah, maka penulis pun mendapatkan kartu yang baru.
Baca selengkapnya

Mencoba Submit Theme di Wordpress.org

Oleh Uboiz -
Gambar
Sangat penasaran sekali, bagaimana agar theme yang penulis buat, dapat tampil menjadi salah satu theme yang ditawarkan pada halaman tampilan Wordpress. Baru pada tahun 2023 ini, penulis berkesempatan untuk mengoprek lebih dalam Wordpress, mulai dari theme sampai plugin. Belum sampai ke core. Hal ini berkat serangan virus "Slot Gacor" yang beberapa bulan sebelum tulisan ini ditulis, menyerang beberapa website yang penulis kelola. Di mana kode injeksinya, penulis temukan di theme dan plugin yang digunakan. Bukan pada core Wordpress. Artinya, dari serangan tersebut adalah yang membuat penulis semakin berkeinginan untuk membuat theme dan plugin sendiri untuk Wordpress. Maklum, karena pada waktu itu, posisi penulis bukan yang membangun website dari awal, sehingga plugin yang digunakan, adalah sesuai kebutuhan tenaga IT sebelumnya. Dan Wordpress adalah aturan permintaan instansi pemilik website. Ngomong-ngomong bagaimana bisa terkena "Slot Gacor", apakah karena tenaga IT
Baca selengkapnya

Melihat Alamat Berbentuk QR Code di Undangan Pernikahan

Oleh Uboiz -
Gambar
Suatu hari, teman penulis menikah dan dia memberikan undangan dengan alamat diberikan selain dalam bentuk gambar, juga dalam bentuk QR (Quick Response) code. Awalnya penulis tidak begitu memperhatikan, namun lama kelamaan terbersik keinginan penulis untuk bagaimana membaca QR code tersebut. Setelah mencari referensi kesana kemari, penulis kira, smartphone Android dapat langsung membaca tanpa harus menginstal aplikasi. Nyatanya, saat tulisan ini ditulis, smartphone Android penulis perlu ditambahkan aplikasi pihak ketiga, untuk membaca QR code. Video di bawah ini adalah percobaan penulis dalam membaca QR code, menggunakan app QR Scanner dari Kaspersky Lab: Kode URL lokasi yang terbaca QR Scanner, dapat di copy dan dilihat menggunakan Google Search, baru kemudian di lihat menggunakan Google Maps. Jika kode URL dibaca langsung menggunakan Google Maps, adakalanya Google Maps tidak dapat mencari lokasi yang dimaksud. Tetapi mungkin saja penulis terlalu
Baca selengkapnya

Contoh Countdown Timer untuk Halaman Web dengan Javascript

Oleh Uboiz -
Gambar
Ketika membangun website konferensi, biasanya di halaman utama, diberikan countdown timer. Dimana countdown timer ini berfungsi untuk memberikan informasi batas kepada calon peserta konferensi, yang berkeinginan untuk menjadi presenter, agar segera mengirimkan paper atau posternya sebelum tanggal yang ditentukan. Salah satu contohnya, adalah website konferensi PIT-FMB 2022 seperti ditunjukkan pada gambar di atas. Untuk keperluan tersebut, di bawah ini adalah kode javascript countdown timer, dengan tampilan yang membutuhkan dukungan styling CSS untuk membuat background yang transparan. <html> <head> <title>The Example of Countdown Timer</title> <style> .countdownbox{ font-family: "Roboto", Sans-serif; padding:10px; font-size:48px; background-color:#00000061; color:white; margin:5px 5px 0 5px; border-radius:5px; } </style> <script> </script> </head> <body> <div id="countmainbox" style="displa
Baca selengkapnya

Proyek Rakyat atau Menghamburkan Dana Kantor

Oleh Uboiz -
Gambar
Setelah sekian lama tidak bertemu, penulis bertemu dengan teman satu angkatan semasa kuliah. Bedanya, saat tulisan ini ditulis, teman penulis tersebut telah bekerja di bagian Humas (Hubungan Masyarakat) salah satu instansi negara. Sedangkan penulis sendiri hanya sebagai Freelance di suatu sekolah swasta dan juga sebagai Android Developer dengan nama Computational Lab di Play Store. Mengobrol Berbincang kesana kemari, terdapat satu kesimpulan yang penulis dapatkan dari pola pikir teman penulis itu. Intinya saat itu, teman penulis begitu membanggakan posisinya, yang sepertinya merasa lebih berhasil dibanding teman-teman yang lain. Dia mengkritisi, cara kerja teman-teman yang berhasil, terlebih hanya karena 'menjilat'. Dan salah satu motivasinya adalah meraih jenjang karir yang paling tinggi di tempatnya bekerja. Kalau untuk menjilat, penulis sudah menyadari hal tersebut. Memang kebanyakan teman penulis yang berhasil saat tulisan ini ditulis, sepertin
Baca selengkapnya